[HTML / CSS ] 기초

HTML / CSS 왕기초

mmmmmm02

Aug 28, 2024

Contents

block 블록 inline 인라인 HTML / CSS

HTML / CSS 와 친하지 않은 나, 거진 초면이다.

기본적인 것은 알고 시작하자.

block 블록

HTML 에서 블록은 웹 페이지의 레이아웃을 구성하는 요소 중 하나로, 기본적으로 화면에서 새로운 줄에서 시작하고, 가로로 가능한 모든 공간을 차지하는 요소를 말한다.

블록은 화면에서 독립적으로 줄을 차지한다.

대표적인 블록


<div> <h1> ... <h6> <p> <ul> <ol> <li> <table> <footer> <header>

inline 인라인

인라인은 자기의 크기만큼만 차지하는 요소. 인라인 요소는 블록 요소와 달리, 자신이 가진 내용물이나 컨텐츠의 크기만큼만 공간을 차지하며, 다른 인라인 요소들과 같은 줄에 나란히 배치된다.

가로 여백과 패딩은 적용되지만, 세로 여백과 패딩은 일부 제한이 있다. 세로 방향에서는 주로 글씨의 크기에 맞춰 여백과 패딩이 적용된다.

대표적인 인라인


 <span> <a> <img> <strong> <em> <b> <i>

💡

block → 가로로 가능한 모든 공간을 차지

inline → 자기 자리를 차지하는

HTML / CSS

HTML 과 CSS 를 같이 써 볼 건데, VS code 를 열고 test.html 파일을 만들어서 진행한다.

VS code 내부에서 live server 를 꼭 먼저 다운받고, 실행하여야 한다.

CSS 는 <head> 안에 <style> 로 표현.

<div>111<div> → 실행 했을 때, 브라우저에서 우클릭> 검사> 커서 올려보면 block 인 것을 알 수 있음 내가 원치 않는 margin 이나 padding 이라는 여백이 생길 수 있으니, 무효화 시키고 작업을 해야한다.


* {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

이미지 첨부 할 때, 아래와 같이 넣으면 inline 으로 같은 줄에 나란히 배치된다.


 <img src="https://picsum.photos/id/237/200/300">

디자인 할 때는 id(id는 유일해야 한다. 나중에 기능을 넣을 수 있게) 가 아니라 class 를 줘야 한다.


 <img class="img_block" src="https://picsum.photos/id/237/200/300">
 <img class="img_block" src="https://picsum.photos/id/238/200/300">

box-sizing 할 때, border 를 포함한 사이즈가 나옴, 200 이면 border 10-10 포함한 200


<style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .img_block {
            display: block;
            height: 200px;
            border: 10px solid black;
        }
</style>

자바스크립트에서 dataset 을 쓸 때, id 를 써서 아래와 같이 사용 할 수 있다.


 <div id=”userinfo” id=”1”>ssar</div>


<body>
    <div>111</div>
    <div id="userinfo" id="1">ssar</div>
    <img class="img_block" src="https://picsum.photos/id/237/200/300">
    <img class="img_block" src="https://picsum.photos/id/238/200/300">
    <img src="https://picsum.photos/id/239/200/300">
    <img src="https://picsum.photos/id/231/200/300">
    <script>
        let divDom = document.querySelector("#userinfo");
        console.log(divDom.dataset.id);
    </script>
</body>

HTMLElement: dataset property - Web APIs | MDN

The dataset read-only property of the HTMLElement interface provides read/write access to custom data attributes (data-*) on elements. It exposes a map of strings (DOMStringMap) with an entry for each data-* attribute.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

HTMLElement: dataset property - Web APIs | MDN

See more posts

[HTML / CSS ] 기초

block 블록

inline 인라인

HTML / CSS

More articles

[웹사이트 만들기] airbnb 웹 화면 만들기 (header) (2)

[웹사이트 만들기] airbnb 웹 화면 만들기 (header) (1)

[Git] Rebase merge

[Git] 3-way merge