목차
- width/height
- 블럭/인라인
2-1. display 속성
2-2. 블럭 레벨 요소
2-3. 인라인 레벨 요소 - 여백
3-1. padding border-content 사이 간격
3-2. margin 요소들간 간격 - 포지셔닝
4-1. box-sizing
4-2. position
4-3. visibility
4-4. z-index
4-5. float - flex
5-1. display: flex;
5-2. flex-direction
5-3. flex-wrap
5-4. justify-content 수평 방향 맞춤
5-5. align-items 수직 방향 맞춤 - grid
6-1. display: grid;
6-2. grid-template-columns
6-3. gap
6-4. grid-template-rows
6-5. start/end/area
1. width/height
선택자 {
width : 숫자(단위) or auto(default);
height: 숫자(단위) or auto(default);
}
- width 속성은 너비, height 속성은 높이에 대해 컨텐츠가 차지하고 있는 영역의 크기를 조절할 수 있다.
- 즉
margin, border line, padding과 같은 영역은 해당 사항이 아니며, width/height는 컨텐츠의 폭과 높이에 대해서만 지정하는 속성이다. - 기본값인 auto; 로 명시하거나, 숫자(단위)를 써서 원하는 크기로 지정 가능하다.
❗ 상대크기 단위(예. %)를 입력하면 창 크기에 따라 변경되지만, 절대크기 단위(예. px)를 사용하면 변화가 없다.
2. 블럭/인라인
2-1. display 속성
선택자 { display : 속성값 ; }
| none | (화면에 표현 X, 공간 차지 X) |
| block | block 레벨 요소로 변경 inline을 block처럼 배치 |
| inline | inline 레벨 요소로 변경 block을 inline처럼 배치 |
| inline-block | inline 레벨 + content는 block |
❗ 인라인(inline)은margin, width, height 설정이 이루어지지 않는다!
- display 속성은 화면 배치 방법을 지정한다.
- 박스 레벨과 인라인 레벨 요소를 변경 가능하게 해준다. 즉 기존 박스 레벨에서 인라인 레벨로, 혹은 인라인 레벨 요소를 박스 레벨로 변형해 사용하는 것이다.
A. display: inline;
<head>
<style>
.area1 { background : red;}
.area2 { background : orange;}
.area3 { background : yellowgreen;}
.area4 { background : green;}
.area5 { background : blue;}
.block-test {
display: inline;
}
</style>
</head>
<body>
<div class="block block-test area1">첫 번째 영역</div>
<div class="block block-test area2">두 번째 영역</div>
<div class="block block-test area3">세 번째 영역</div>
<div class="block block-test area4">네 번째 영역</div>
<div class="block block-test area5">다섯 번째 영역</div>
</body>
- 예시와 같이 <body> 태그 안에서 class는 띄어쓰기를 기준으로 여러 개 나열할 수가 있다.
- 블럭 레벨 요소인 <div> 태그에 대해 display: inline; 적용하면 기존에 적용돼 있던
width/height 속성 역시 무시된다. 블럭일 때 width와 height를 가질 수 있기 때문이다.
B. display: block;
<head>
<style>
.area1 { background : red;}
.area2 { background : orange;}
.area3 { background : yellowgreen;}
.area4 { background : green;}
.area5 { background : blue;}
.block-test {
display: inline;
}
</style>
</head>
<body>
<span class="block block-test area1">첫 번째 영역</span>
<span class="block block-test area2">두 번째 영역</span>
<span class="block block-test area3">세 번째 영역</span>
<span class="block block-test area4">네 번째 영역</span>
<span class="block block-test area5">다섯 번째 영역</span>
</body>
- 반대로 인라인 레벨 요소인 <span> 태그에 대해 display: block; 속성을 지정해본다.
- 결과적으로 블럭 형태로 노출되기에 width와 height 값을 별도로 지정 가능하게 된다.
C. display: inline-block;
<head>
<style>
.area1 { background : red;}
.area2 { background : orange;}
.area3 { background : yellowgreen;}
.area4 { background : green;}
.area5 { background : blue;}
.block-test {
display: inline-block;
}
</style>
</head>
<body>
<div class="block block-test area1">첫 번째 영역</div>
<div class="block block-test area2">두 번째 영역</div>
<div class="block block-test area3">세 번째 영역</div>
<div class="block block-test area4">네 번째 영역</div>
<div class="block block-test area5">다섯 번째 영역</div>
</body>
- 블럭 레벨 요소인 <div> 태그에 대해 display: inline-block; 지정한다.
- 인라인 영역에 따라 옆으로 나란히 올 수 있게 되지만, 각각의 블럭으로서 width/height 속성 설정 또한 가능하다.
- 다시 말해 inline에 block으로 들어간다는 의미를 갖는다.
2-2. 블럭 레벨 요소
✅ <div>, <p>, <h?>, <ul>, <ol>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
- 한 줄 전체를 차지하는 요소로, 박스 모델(box model)이라고 한다.
- 즉 한 줄에 여러 요소가 자리할 수 없다.
- 블럭 레벨 요소로는 <div>, <p>, <h?> 등이 있다.
2-3. 인라인 레벨 요소
✅ <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>
- 한 줄에서 일부분만 차지하는 요소이다.
- 따라서 같은 줄에 여러 요소가 올 수 있다.
- 인라인 레벨 요소로는 <img>, <input>, <span> 등이 있다.
3. 여백
3-1. padding border-content 사이 간격
선택자 { padding-[위치]: 숫자(단위); }
- 테두리(border)와 컨텐츠(content) 사이의 거리를 조절하는 padding 속성이다.
padding: 100px 70px 50px 30px;- top-right-bottom-left 시계 방향으로 사면에 대해 적용할 수 있다.
padding: 100px 200px;- 두 가지 속성값을 전달하면 top-bottom, left-right에 대해 적용된다.
- 예시에서는 위아래의 경우 100px씩, 양옆에 대해서는 200px씩 패딩 값이 주어진다.
padding: 100px;- 하나의 속성값이 명시되면 사면에 대해 일괄적으로 속성값이 부여된다.
- 위와 같이 기술한다면 top-right-bottom-left 모든 면에 대해서 100px씩 패딩 여백이 생겨난다.
padding-top : 50px;
padding-left: 100px;- padding-top, padding-left처럼 위치마다 다른 값을 설정할 수도 있다.
3-2. margin 요소들간 간격
선택자 { margin-[위치]: 숫자(단위); }
- margin 속성을 통해 박스(box) 레벨이나 인라인(inline) 레벨 요소들간 간격을 지정한다.
- margin 속성 역시 마찬가지로 ① 시계 방향으로 각각의 값을 부여하거나, ② 위아래/양옆에 대해 지정할 두 가지 속성값을 전달하거나, ③ 사면에 대해 일괄적으로 적용할 속성값 하나를 명시할 수 있다.
- margin-top, margin-left처럼 위치마다 설정도 가능하다.
4. 포지셔닝
- 박스(box) 모델, 인라인(inline) 모델 등 페이지 안 요소들을 원하는 위치에 배치하는 스타일 속성을 일컫는다.
- position 속성과 float 속성으로 나누어 볼 수 있다.
4-1. box-sizing
| content-box | 기본값, 컨텐츠 영역만 포함 |
| border-box | 테두리 영역까지 포함 |
- width 속성을 어떤 영역까지 포함해 적용할지 결정하는 속성이다.
4-2. position
| static | 기본값, 문서 흐름에 맞춰 배치 |
| relative | 문서 흐름에 맞춰 연결 배치 |
| absolute | 조상 요소에 따라 상대적 배치 |
| fixed | 지정한 위치에 고정 배치 |
static
<head>
<style>
.inline-block {
display: inline-block;
width : 100px;
height : 100px;
background : orange;
}
#first {
/* static이므로 아무런 변화가 없음 */
position: static;
top: 20px;
left: 20px;
}
</style>
</head>- 기본값으로서 일반적인 문서 흐름에 따라 배치한다.
top-right-bottom-left이 아무런 영향을 주지 못한다. 즉 아무런 값도 설정할 수가 없다.
ralative
<head>
<style>
#second {
/* position을 바꾸는 것만으로는 변화 없음. top, left 수치를 주면 위치 변화함 */
position: relative;
top: 20px;
left: 20px;
}
#third {
/* 크기만큼 밀려나 왼쪽 상단으로 이동한 모양새 */
position: relative;
bottom: 20px;
right:20px;
}
</style>
</head>- 일반적인 문서 흐름에 따라 배치되며, 이전 요소와 자연스럽게 연결된다.
- relative 설정만으로는
육안상 바뀌는 점은 찾아볼 수 없을 것이다. top, left 등 이동할 수치를 별도 지정해야 한다. - 자신 기준으로 top-right-bottom-left 값만큼 오프셋 적용한다. 즉 값 설정이 가능하다는 것이 앞서 기술한 static과의 차이점이다.
- 단, 다른 요소에는 영향을 주지 않아 공간 차지는 static과 같다.
absolute
<head>
<style>
.outer {
position: relative;
}
.positioning {
border : 1px solid black;
}
.first {
width: 300px;
height: 300px;
background: yellow;
}
.second {
width: 200px;
height: 200px;
background: yellowgreen;
/* absolute만 작성하면 3번째 박스가 얘한테 가려져서 안 보이게 됨 */
position:absolute;
/* 조상 없이 top, left 그냥 쓰면 body 기준으로 들어가 페이지 왼쪽 상단에 붙음 */
/* outer div의 포지션을 relative로 바꾸면 됨 */
/* 자리 차지하지 않는 absolute이기 때문에 겹칠 수 있는 것 */
top: 50px;
left: 50px;
}
.third {
width: 100px;
height: 100px;
background: red;
position : absolute;
top: 100px;
left: 100px;
}
</style>
</head>❗ 조상 요소에게 position: relative; 적용한 뒤 연결한다.
일반적인 문서 흐름에서 제외되며,공간을 차지하지도 않는다.- 가장 가까운 위치에 지정된 조상 요소에 맞춰 상대적으로 배치된다. 즉 조상 요소로부터 상대적으로 고정된다.
- top-right-bottom-left 값만큼 위치 결정이 가능하다.
fixed
.fixed-area {
width: 100px;
height: 100px;
position: fixed;
left: 0;
top: 0;
}- 위처럼 작성하면 왼쪽 상단에 딱 붙어서 출력되는 모습을 확인할 수 있다.
일반적인 문서 흐름에서 제외되며,공간도 차지하지 않는다. 이는 앞서 기술한 absolute와 공통점이다.- 스크롤을 오르내리는 동안 해당 요소가 모든 페이지의 같은 위치에 고정된다.
- 대표적인 예시로 클릭하면 맨 위로 올라가는 탑 버튼(top button)이 있다.
4-3. visibility
❗ display: none;과 visibility: hidden;간 차이점
: display: none; 속성은 페이지 공간을 차지하지 않고, visibility: hidden; 속성은 페이지 공간을 차지한다는 차이점이 있다. 즉 display: none;은 아예 자리를 빼버리는 것이고, visibility: hidden은 자리는 남아있지만 보이지 않게끔 만든다.
| visible | 기본값, 요소가 화면상에 보임 |
| hidden | 화면상에 보이지 않지만, 페이지의 공간은 차지 |
| collapse | 표의 행-열-행그룹-열그룹 등에서 지정하면 서로 겹치도록 만듦, 이외 영역에서는 hidden으로 처리 |
- 페이지에 특정 속성이 보이거나 보이지 않게끔 만드는 속성이다.
4-4. z-index
❗ x는 왼에서 오, y는 위에서 아래, z는 모니터로부터 사람의 시선에 맞닿는 입체적인 축을 말한다.
z-index: 3;
z-index: 2;
z-index: 1;
- 페이지 내 요소들을 순서대로 위로 쌓아올리는 속성이다.
- 속성값이 클수록 위로 올라오게 된다. 따라서 항상 맨 위에 위치해야 하는 요소에는 999 같은 큰 값을 부여하는 것도 방법이다.
- 속성값으로서 키워드 값, <integer> 값, 전역 값 모두 쓰일 수 있으며, 음수 값으로 우선순위를 낮출 수도 있다: MDN Web Docs z-index
4-5. float
❗ float는 사실 옛날에 많이 쓰이던 방식이므로 개념만 알아두는 데 그치고, 실사용을 위해서는 flex 속성을 활용하는 것이 좋다.float 속성은 옛날 사람 소리 듣기에 딱이다.
| right | 오른쪽 배치 |
| left | 왼쪽 배치 |
| none | 배치 값을 설정하지 않음 |
- 페이지 내 요소 위치를 왼쪽 또는 오른쪽으로 지정하는 속성이다.
- 스크롤바 위치와 비교해볼 수 있듯 float: right; 지정하자 5, 4, 3, 2, 1 순서로 요소1이 가장 오른쪽에서 시작되고 있다.
5. flex
- Flexible Box Layout Module을 의미한다.
이전에는 float 속성을 많이 사용해왔다면, 최근 들어서는 Flexbox로 대체되고 있다.
5-1. display: flex;
display: flex;- 부모 요소 display 속성값으로서 flex; 설정한다.
- 이를 통해 수평 정렬이 이루어진다.
5-2. flex-direction
/* 왼쪽에서 오른쪽으로 -- default 값 */
flex-direction: row;
/* 오른쪽에서 왼쪽으로 -- 1번이 가장 오른쪽 */
flex-direction: row-reverse;
/* 위에서 아래로 */
flex-direction: column;
/* 아래에서 위로 -- 8번이 최상단 */
flex-direction: column-reverse;- <div> 요소 여덟 개가 정렬된 예시로 살펴보자.
- flex-direction 속성은 배치 방향을 지정한다.
- 왼쪽에서 오른쪽으로 기본 정렬시키는 기본값 row;부터 그 반대로 적용하는 row-reverse;가 있다.
- 또, 위에서 아래로 정렬시키는 column;과 마지막 요소가 맨 위로 자리하기 만드는 column-reverse;가 존재한다.
5-3. flex-wrap
/* 줄바꿈 하지 않음 */
flex-wrap : nowrap;
- flex-wrap 속성 통해 줄바꿈에 대해 설정할 수 있다.
- nowrap의 경우는 줄바꿈을 진행하지 않는다.
/* 줄바꿈 여러 줄의 경우 -- 아래에서 위로 */
flex-wrap : wrap-reverse;- 창이 충분히 크다면 한 줄 수평으로 보이지만, 창 크기를 줄여가면서 살피면 연달아 쌓이는 모양새를 확인할 수 있다.
/* 줄바꿈 여러 줄의 경우 -- 위에서 아래로 */
flex-wrap : wrap;- wrap-reverse 속성값과 비교했을 때 시작 요소에 차이가 있다.
5-4. justify-content 수평 방향 맞춤
/* 오른쪽 맞춤 */
justify-content : flex-end;
/* 가운데 맞춤 */
justify-content: center;
/* 양쪽 끝에 붙이고 균등하게 맞춤 */
justify-content: space-between;
/* 균등하게 맞춤 */
justify-content: space-around;
/* 왼쪽 맞춤 -- 기본값 */
justify-content: flex-start;- justify-content 속성 통해 수평 방향을 맞춤 설정한다.
- space-between;의 경우는 끝 요소들이 양끝에 정렬되는 반면, space-around;는 가운데 맞춰진다는 차이를 보인다.
5-5. align-items 수직 방향 맞춤
❗ height: 100vh;
뷰 포트의 높이 기준 단위(vh)를 100vh로 지정하면, 창 크기 전체의 높이를 말한다.
/* 부모 요소의 높이 or 콘텐츠 많은 자식 요소 높이 맞춤 */
align-items: stretch;
/* 부모 요소의 윗 부분 배치 */
align-items: flex-start;
/* 부모 요소의 아랫 부분 배치 */
align-items: flex-end;
/* 중앙 배치 */
align-items: center;- stretch, flex-start, flex-end, center와 같은 속성값을 활용할 수 있다.
6. grid
6-1. display: grid;
- 그리드(grid)는 타일 형태 정렬을 진행한다.
- 2차원으로 수평, 수직에 대해 동시에 영역을 나눌 수 있는 속성이다.
6-2. grid-template-columns
grid-template-columns: 200px 200px 200px;
/* auto는 나머지 부분 전체 */
grid-template-columns: 100px 200px auto;- 한 컬럼당 크기, 즉 그리드될 아이템들의 너비에 대해 지정한다.
- 한 열에 그리드 아이템 여러 개 배치할 경우 필요한 그리드 아이템 수만큼 너비를 나열한다.
- 속성값 auto는 나머지 부분 전체를 말한다.
/* 고정 너비 사용 시
화면 너비가 넓어지면 공간 발생
화면 너비가 좁아지면 화면 잘림
그리드에서 사용하는 fr(fraction) 단위 사용 -- 1 : 1 : 1을 뜻함
*/
grid-template-columns: 1fr 1fr 1fr;- fr(fraction) 단위를 활용할 수 있다.
/* 반복되는 패턴이 있다면 repeat 사용 */
grid-template-columns: repeat(3, 1fr);- 반복되는 패턴이 존재한다면 repeat()을 쓸 수 있다.
- 예시에서는 1 : 1 : 1의 결과를 낳는다.
6-3. gap
row-gap: 20px;
column-gap: 10px;- 그리드 아이템간 여백을 조정하는 속성이다.
- row-gap 통해 행간, column-gap 통해 열간 간격을 각각 지정할 수 있다.
gap: 20px 10px;- row, col 순서로 두 개의 값을 전달해 일괄 반영 또한 가능하다.
gap: 20px;- 하나의 값만 쓰인다면 row, col 전부에 대해서 통일된 여백을 지정하는 것이 된다.
6-4. grid-template-rows
grid-template-rows: 200px 200px 200px;- 그리드된 아이템들의 높이를 다루는 속성이다.
- 여러 행을 만들 때는 위처럼 띄어쓰기로 구분하여 나열할 수 있다.
grid-auto-rows: 200px;- 한편, row 개수를 미리 알 수 없는 경우에는 일괄 설정이 가능하다.
- 예시에서는 모든 행에 대해 200px로 설정하였다.
grid-auto-rows: minmax(200px, auto);- mixmax()로 지정할 수도 있다. 위와 같이 작성해 최소 200px에서 최대 auto임을 명시한다.
6-5. start/end/area
.item:nth-child(1) {
/* 컬럼 시작/끝 설정 */
grid-column-start: 1;
grid-column-end: 3;
/* 컬럼 시작/끝 설정 한 번에 */
grid-column: 1/3;
grid-column: 1/span 2; /* 앞에 숫자를 2로 놓으면 첫 번째 자리가 빈 자리가 되고 div 1은 옆으로 밀려남 */
/* 로우 시작/끝 설정 */
grid-row-start: 1;
grid-row-end: 3;
grid-row: 1/3; /* 앞에 숫자를 2로 놓으면 div1 중간으로 내려감 */
grid-row: 1/span 2;
/* grid-area */
/* 로우시작/컬럼시작/로우끝/컬럼끝 */
grid-area: 1/1/3/3;
}
- row, col 시작/끝 영역에 대해 별도 설정할 수 있다.
'Frontend > CSS' 카테고리의 다른 글
| [CSS/수업 과제 practice] 개인 홈페이지 제작 (1) | 2022.02.15 |
|---|---|
| [CSS3] 애니메이션 | transition | transform | @keyframes (0) | 2022.02.14 |
| [CSS3] 테두리 스타일 | border-style | box-shadow (0) | 2022.02.12 |
| [CSS3] 색상 및 배경 스타일 | 이미지 | background (0) | 2022.02.11 |
| [CSS3] 목록 스타일 | 불릿 기호 변경/삭제 | list-style (0) | 2022.02.11 |
