<div></div>
<section></section> 
<nav></nav>

이 세가지의 태그는 똑같은 기능을 갖는 태그입니다. 근데 왜 세 가지를 다 구분해서 쓰는 걸까요?

태그를 한 가지만 계속 쓴다면 아무리 클래스와 아이디를 넣어도 헷갈릴 수 밖에 없습니다.

그래서 우리는 각각의 상황마다 어울리는 태그들을 쓰는 것이 좋습니다. 태그를 필요한 상황마다 잘 활용하면 때론 클래스명으로 구분하는 것보다 편하기 때문입니다.

보통 div 태그가 제일 많이 활용되는데, 어떤 요소를 만들어 구현해야할 때 무난하게 많이 쓰이는 태그입니다.

section 태그는 '단락'을 써야할 때 주로 쓰이며, nav 태그는 메뉴바 혹은 네비게이션 바를 만들어야할 때 주로 쓰이는 태그입니다.

우리는 태그의 종류와 쓰임을 제대로 알고 코드를 짤 때 다양하게 잘 사용할 수 있도록 노력해야합니다.

#display 속성에 대하여

div{
    display: block;
}

display는 말그대로 보여지는 화면에서 엘리먼트가 어떤 요소로서 적용될 건지를 설정하는 것과 같습니다.

inline-block, inline, inline-flex 는 우리가 텍스트를 쓰는 것과 비슷한 역할을 한다.

한 줄에 여러개의 엘리먼트가 나열되는 것이 가능한 것이 특징이며, width값과 height 값이 설정되지 않은 상태에선 최소한으로 작아진다.

블록 속성은 너비값이 정해지지 않아도 최대한으로 넓어지지만 높이 값이 없다면 최소한으로 줄기 때문에 높이값을 설정해줘야한다.

/* 알아둬야할 점 */

• a, span은 inline 속성이다.
• img 태그는 inline-block 속성이다.
• inline은 width, height, margin, padding 값이 제대로 적용되지 않는다.

-- 안녕하세요, 첫 글이라 부족한 점이 많지만 이 곳에 제가 배우는 것들을 기록할 예정입니다. 글을 읽으시다가 지적할 부분이 있다면 얼마든지 해주세요. 부족한 지식과 정리 안 된 개념들에 허덕이는 중이라 모든 피드백 달게 받습니다. 읽어주셔서 감사합니다.