2022.05.03 09:30 PM ~ 6-1 파일로 이동
Section 8: The CSS Box Model
＊ 글속 태그들 < >는 ( )로 대체
<< The CSS Box Model >>
※ 요소를 감싸고 있는 안보이는 네모난 박스 형태.
※ 직접적인 컨텐츠 내용의 box는width (너비) / height (높이) 도 있음.
※ width, height를 조정하면 box 안 컨텐츠가 영향을 받음.
늘어나고 줄어들고, 서로 겹치고 그렇게 될 수도 있음.
<< Box Model - 1. Border (경계) >>
※ 쉽게 말해 '테두리 선'
- Border의 Properties (속성들) (중요한 것들만)
- border-width : 테두리 너비
ex: width/height 둘 다 200 씩 인데, 만약 5px 굵기의 외곽선을 추가하면
최종 너비와 높이는 각각 210이 됨.
- border-color : 테두리 색상
- border-style : 테두리 모양 (선, 끊어지는 점선 모양 등등)
- box-sizing : 경계선을 상자 외곽에 놓을 건지 상자 안에 넣을 건지 결정함.
(box-sizing: border-box라고 하면, 외곽선이 안쪽으로 들어옴. 1번의 예시대로라면 선 빼고 190x190으로 변함)
- border : 경계선 색상, 두께를 한꺼번에 지정가능!
(이후 border-left-style 등으로 원하는 쪽만 스타일링 가능)
<< Box Model - 2. Border-radius (테두리 모서리) >>
※ 테두리 모서리를 원형, 타원형 등으로 만들 수 있음.
※ 원하는 좌우상하 테두리 모서리만 지정해서 스타일링 가능-> 1. border-radius : 몇 px, 몇 50% 등으로 표시
<< Box Model - 3. Padding >>
※ 'Padding'은 Box model의 컨텐츠와 경계선과 사이의 공간을 뜻함.
-> padding-top / padding-bottom / padding-left / padding-right
(사이 공간 각각 개별적으로 지정할 때)-> padding
(한번에 상하좌우를 수정할 때)
- padding : ㅇpx (4면 전부)
- padding : ㅇpx ㅁpx (세로 / 가로)
- padding : ㅇpx ㅁpx ㄷpx (위쪽 / 중앙 / 아래쪽)
(거의 안씀!)- padding : ㅇpx ㅁpx ㄷpx ㅂpx (시계방향으로- 위/오른쪽/아래/왼쪽)
<< Box Model - 4. Margin (여백) >>
※ 해당 요소가 차지하고 남는 바깥 쪽의 여백.
(ex: div는 block 요소라서 옆으로 여백이 쭉 있음. 그게 Margin.
Inline 요소는 따로 지정하지 않는 한 margin이 없음.)
※ padding과 같이 개별적 or 4면 한번에 수정가능함.
-> margin-top / margin-bottom / margin-left / margin-right
-> margin★ 많은 사람들은 웹페이지 만들 때 'body'의 전체 margin 값을 '0'을 주고 시작함!
콘텐츠에 여분의 공간이 생기지 않도록 하기 위함임.
<< Display Property >>
- Inline : 다른 요소들 사이에 낀 'Inline' 요소
--> 'width'나 'height'를 키워도 무시된다. (다른 요소를 밀어내지 않음)
--> padding도 무시된다. (다른 요소를 밀어내지 않음)
--> margin은 '좌, 우' 로만 다른 요소를 밀어낸다 (상, 하는 무시 됨)
- Block : 한 줄을 차지하는 'block' 요소
-> 'width', 'height', 'padding', 'margin' 전부 설정하는대로 다른 요소를 밀어냄
- Inline-Block : 'Block' 요소를 'Inline' 처럼 쓰면서 inline이 당하는 제약은 받지 않음
- None : 화면에서는 사라지지만 소스코드에는 그대로 있음.
