🎁숙제
- 53p - 54p(인라인 요소) 꼼꼼히 읽어보고 교재에 있는 예제 구현 해보기
- 55p - 56p(블록 요소) 꼼꼼히 읽어보고 교재에 있는 예제 구현 해보기
[교재 중요 포인트]
- html요소는 크게 인라인 요소와 블록 요소 두가지 유형으로 나눌 수 있다.
- 인라인 요소는 텍스트처럼 내용을 수평으로 표시
- 인라인 요소는 자신이 필요한 만큼만 크기를 계산
[div태그 용도]
- html에서 가장 기본적인 태그
- nav태그나 section태그는 각각 역할이 있지만 div는 의미없는 공간에 사용할 수 있는 태그.
- 주로 역할이 없는 공간에 박스로 사용된다.
[태그를 세포처럼 생각하자]
- 사람이 태어날 때 세포가 정해지는 것 처럼 태그도 각각 역할에 맞게 정해진 세포(요소)를 가지고 태어난다.
예시) 한줄에 하나씩 나오는 태그, 한줄에 같이 나오는 태그
[block(요소)]
- div가 넓게 나오는 이유는 세포가 block이어서 그렇다.
- 그 세포 이름은 display: block;
- block은 너비가 기본값(auto)일 때 100%로 작동한다.
- 한 줄에 한 개 배치
- 너비 높이 속성 커스텀 가능
- ★ ★ 아무리 태그 크기가 작아도 무조건 한 줄에 한 개씩 배치된다. (값이 0이여도 한 줄에 같이 배치된다.)★ ★
[너비 속성] width
- 기본값: auto
- 태그 기본 세포: width: auto;
- 커스텀 속성값: px, %등 ...
[100%] 전부, 전체값
- 기본값: width가 auto일 때 100%로 작동하거나 0으로 작동한다.
ㄴ100%는 상위태그 크기만큼 크기를 가지겠다는 뜻.
ㄴ예시) 상위태그 높이가 30px이면 30px를 그대로 받아 태그도 30px이 된다.
ㄴ예시) 상위태그 너비가 20px이면 20px를 그대로 받아 태그도 20px이 된다.
[0] 기본값, 커스텀값
- 기본값: auto
ㄴ하위태그 크기만큼 크기를 가짐
ㄴheight: auto -> 0
- 커스텀: 0
ㄴ 값이 0이다. 너비가 0, 높이가 0.
ㄴheight: 0
[높이 속성] height
- 기본값: height가 auto일 때 0으로 작동한다.
- 0일 때 하위태그 크기만큼 크기를 가진다.
ㄴ예시) 하위태그 높이가 30px이면 30px을 그대로 받아 상위태그도 30px이 된다.
ㄴ예시) 하위태그 너비가 20px이면 20px을 그대로 받아 상위태그도 20px이 된다.
ㄴ inline일 경우 width의 auto값이 0이기 때문에 하위태그의 너비를 상속받는 것.
ㄴ예시) 텍스트 높이만큼 높이를 가지기도 한다.
[inline]
- 한줄에 같이 요소 배치
- 너비가 기본값(auto)일 때 0으로 작동한다.
- 높이가 기본값(auto)일 때 0으로 작동한다.
- 양 옆, 하단에 수치를 알 수 없는 여백값이 생긴다.
ㄴ(추후 추가설명) 브라우저에서 텍스트 취급을 받기 때문
- 너비 속성과 높이 속성을 사용할 수 없다. (값을 커스텀해도 적용되지 않는다)
ㄴ(inline-block) 너비 높이 속성을 사용하면서 한줄에 같이 배치하고, 너비높이가 기본값(auto)일 때 0으로 사용하고 싶으면 inline요소를 다른 요소로 바꿔서 사용한다. 그 중 가장 기본적인 요소는 inline-block으로 바꾸는 것이다. 나중에는 flex-item으로 바꾸어서 사용할 것이다.
[한 줄에 같이 배치되는 요소와 한 줄에 하나씩 배치되는 요소로 나누어져 있는 이유]
- 네이버 로그인하기 버튼 박스처럼 각 정보가 한 줄에 하나씩 배치되는 상황이 있고 그 한 줄 안에서 작은 요소들끼리 같이 배치되는 상황도 있기 때문이다.
[네이버를 더 안전하고 편리하게 이용하세요]- block
[(NAVER)- inline (로그인)- inline]- block
[(아이디 찾기)- inline (비밀번호 찾기)- inline]- block
