#태그에 대하여
<div></div>
<section></section>
<nav></nav>이 세가지의 태그는 똑같은 기능을 갖는 태그입니다.
근데 왜 세 가지를 다 구분해서 쓰는 걸까요?
태그를 한 가지만 계속 쓴다면 아무리 클래스와 아이디를 넣어도 헷갈릴 수 밖에 없습니다.
그래서 우리는 각각의 상황마다 어울리는 태그들을 쓰는 것이 좋습니다. 태그를 필요한 상황마다 잘 활용하면 때론 클래스명으로 구분하는 것보다 편하기 때문입니다.
보통 div 태그가 제일 많이 활용되는데, 어떤 요소를 만들어 구현해야할 때 무난하게 많이 쓰이는 태그입니다.
section 태그는 '단락'을 써야할 때 주로 쓰이며, nav 태그는 메뉴바 혹은 네비게이션 바를 만들어야할 때 주로 쓰이는 태그입니다.
우리는 태그의 종류와 쓰임을 제대로 알고 코드를 짤 때 다양하게 잘 사용할 수 있도록 노력해야합니다.
#display 속성에 대하여
div{
display: block;
}display는 말그대로 보여지는 화면에서 엘리먼트가 어떤 요소로서 적용될 건지를 설정하는 것과 같습니다.
inline-block, inline, inline-flex 는 우리가 텍스트를 쓰는 것과 비슷한 역할을 한다.
한 줄에 여러개의 엘리먼트가 나열되는 것이 가능한 것이 특징이며, width값과 height 값이 설정되지 않은 상태에선 최소한으로 작아진다.
flex, block은 말그대로 블록과 비슷하다. 텍스트는 옆으로 나열하지만 블록은 위로 쌓는 것이 일반적인 것처럼 display의 속성을 block 혹은 flex 로 지정할 경우 한 줄에 한 엘리먼트가 오고, 다음 요소는 그 다음줄에 배치되는 것이 일반적이다.
블록 속성은 너비값이 정해지지 않아도 최대한으로 넓어지지만 높이 값이 없다면 최소한으로 줄기 때문에 높이값을 설정해줘야한다.
/ 알아둬야할 점 /
- a, span은 inline 속성이다.
- img 태그는 inline-block 속성이다.
- inline은 width, height, margin, padding 값이 제대로 적용되지 않는다.
-- 안녕하세요, 첫 글이라 부족한 점이 많지만 이 곳에 제가 배우는 것들을 기록할 예정입니다. 글을 읽으시다가 지적할 부분이 있다면 얼마든지 해주세요. 부족한 지식과 정리 안 된 개념들에 허덕이는 중이라 모든 피드백 달게 받습니다. 읽어주셔서 감사합니다.
