📝 CSS 레이아웃 스타일, FLEX
#230214
📌 요소의 영역(여백) 관련 속성
✔️ HTML 요소
총 4가지 영역으로 구성
1. content 영역
요소의 내용이 작성 되어지는 영역
보통 width/height 크기 설정함.
(시작태그와 종료태그 사이에 작성되는 내용을 생각하면 됨)
2. padding 영역
content 영역과 border 영역 사이
3. border 영역
요소의 테두리가 지정되는 영역
content보다 바깥쪽에서 content를 감싸고 있음
4. margin 영역
다른 요소와의 간격을 나타내는 영역
content 영역
.content { width: 150px;
height: 150px; }
border 영역
.border { border: 10px solid red; }
padding 영역 : 내용과 테두리 사이 간격을 상하좌우 30px씩 벌림
.padding { padding: 30px;}
margin 영역 : 타 요소와의 간격을 상하좌우 50px 벌림
.margin { margin: 50px; }
#m1 { 순서 : ===상=== 하=== 좌==== 우===
margin: 100px 100px 100px 100px; }
--------------------------------------------------------------------
<div class="box content border padding margin">내용입니다.</div>
<div class="box content border padding margin" id="m1">내용입니다.</div>🏷️ padding, border, margin의 방향성
padding, border, margin은 방향에 따라 크기를 지정할 수 있다
[각 속성 설정값 예시]
OOO-tap
OOO-botton
OOO-left
OOO-right
✔️ padding의 속성
작성법에 따라서 padding 특정 방향에 따라서 크기를 지정할 수 있음
1) 값 1개 : 상하좌우
padding : 30px;
2) 값 2개 : 상하, 좌우
padding : 50px 100px;
3) 값 3개 : 상, 좌우, 하 (위->아래)
padding 10px 50px 100px;
4) 값 4개 : 상, 우, 하 좌 (상 기준 시계방향)
padding : 10px 20px 30px 40px;
.padding-test {
padding-top : 20px;
padding-bottom : 50px;
padding-left : 30px;
padding-right: 30px; }
-------------------------------------------------
<div class="box padding-test"> 내용입니다.</div>✔️ border의 속성
border 속성은 상하좌우 방향을 별도 지정할 수 없다(?)
다른 속성처럼 한 번에 이런식으로 쓸 수 없음
border : 1px 2px 3px 4px한번에 쓰고 싶으면
border-width라는 속성을 이용하여 쓸 수 있다.ex) border-width : 20px 10px 5px 2px;
값1개 : 상하좌우
값2개 : 상하, 좌우
값3개 : 상, 좌우, 하 ( 위 -> 아래)
값4개 : 상, 우, 하, 좌 (상 기준 시계방향)
border : 4px solid red; : 상하좌우 4px로 보더위치 빨간선으로 표시
border-top: 1px solid black; 보더위치 위에 1px 검정선으로 표시
border-bottom: 5px dashed magenta; 보더위치 아래에 5px 마젠타색 절취선으로 표시
border-left: 10px dotted blue; 보더위치 왼쪽에 10px 파란색 점선으로 표시
border-right: 7px double orange; 보더위치 오른쪽에 7px 주황색 두줄로 표시
✔️ margin의 속성
margin : 100px : 상하좌우 10px 간격 동일하게 설정
margin-top : 100px; : 위에 마진간격 100px 주기
margin-bottom : 100px; : 아래 마진간격 100px 주기
margin-left : 100px; : 왼쪽 마진간격 100px 주기
margin-right : 100px; : 오른쪽 마진간격 100px 주기
margin: auto; : 좌우 요소간의 간격을 자동으로 지정하여 가운데 정렬
.margin-auto {
margin : auto;
margin-top: 100px;
-------------------------------------------------------------------
<div style=" width: 500px; height: 300px; border: 2px solid black;">
<div class="box margin-auto"></div>갑자기 margin-top이 무시됐다.. 왜?
- margin 속성 자체가 상하좌우 동시 지정하는 속성이라
상(top) 부분에도 auto가 지정되어 있음.- 이전 100px 내용을 덮어쓰기함.
-> 해결방법 : margin-top을 auto 밑에 작성하여 auto 덮어씌움 (위 예시처럼)
✔️ box-sizing 속성 (공부하고 작성하기)
요소의 영역 중 실제로 화면상에 보여지는 부분인
content, padding, border는 각각 크기를 지정할 수 있음.
-> 이 때 각각의 크기를 따로 지정하다 보니
전체적인 크기를 한눈에 파악하고 설정하기 힘들다.
content box
- 모든 CSS의 기본 설정값
- 지정한 CSS width 및 height를 컨텐츠 영역에만 적용
- border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있음.
border box :
- 대부분 실무에서 사용함
- 지정한 CSS width 및 height를 전체 영역에 적용
- border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있음.
