[CSS] 기초(03/23)
CSS의 특성: 폭포수, 상속, 우선순위
- CSS는 Cascading Style Sheets의 약어입니다. Cascade란 폭포란 뜻인데 이것에서 유추가 가능합니다.
- CSS는 폭포수가 아래로 떨어질 때처럼 CSS에서 스타일이 적용될 때는 우선순위를 가지고 적용이 되기 때문에 이 모습이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙었습니다.
- 같은 태그에 대한 규칙이 있는 경우 -> 마지막으로 작성된 규칙이 적용됩니다.
Inheritance(상속)이란?
- 부모 요소의 css 규칙을 자식 요소가 상속하여 적용하는 것입니다.
- 자식 요소가 css 규칙을 가지고 있다면 이를 우선하여 적용합니다.
Specificity란?
- css 규칙이 서로 충돌할 때 어떤 것을 적용할지 결정합니다.
- 표에서 위로 갈수록 우선시되는 것입니다.
| HTML 요소의 style 속성 | 1000 |
| id로 선택된 요소 | 100 |
| class로 선택된 요소 | 10 |
| 태그의 이름으로 선택된 요소 | 1 |
- HTML 요소의 style 속성 vs 태그의 이름으로 선택된 요소
- class로 선택된 요소 vs 태그의 이름으로 선택된 요소
CSS Box란? Inline Box , Block Box, Inline-block Box
- CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다.
(1) Inline Box
- 먼저 Inline Box에 대해 알아보겠습니다.
- Inline Box는 한줄에 표시됩니다.<a>, <img>, <span>이 있습니다.태그로 감싸진 내용만큼만 영역을 차지합니다.
- width와 height로 요소의 크기를 조절할 수 없습니다.inline은 좌우 margin, padding만 적용 가능합니다.
(2) Block Box
- 다음은 Block Box에 대해 알아보겠습니다.
- display:block;개별 요소마다 줄을 바꿉니다.<h1>, <p>, <div> 태그가 있습니다.
- width와 height로 요소의 크기를 조절합니다.내용과 별개로 자신의 영역을 가집니다.
- Block은 가지지만 lnline은 가지지 못한 것: width, height, margin, padding
-> line도 margin과 padding이 가능하지만 좌우에 대해서만 적용이 가능합니다.
(3) Inline-Block Box
- display: inline-block;
- inline과 block의 특징을 모두 포함합니다.
- 줄을 바꾸지 않습니다.
- block처럼 width와 height를 가집니다.
- 상하 margin, padding이 레이아웃에 유효합니다.
Box Model이란?
- Block Box가 가지는 기본 모델입니다.
- Margin: 테두리로부터 다른 요소까지의 거리
| div{margin:20px;} | 상하좌우에 모두 같은 값 적용합니다. |
| div{margin:20px 30px;} | 상하 20px, 좌우 30px 값 적용합니다. |
| div{margin:20px 10px 20px 10px;} | 상 우 하 좌 순서!( 위쪽부터 시계방향으로 이동합니다.) div{margin-top:20px; margin-right:10px; margin-bottom:20px; margin-left:10px;} 과 동일합니다. |
- Border: 내용을 둘러싼 테두리
- Padding: 내용으로부터 테두리까지의 거리
| div{padding:20px;} | 상하좌우에 모두 같은 값 적용합니다. |
| div{padding:20px 30px;} | 상하 20px, 좌우 30px 값 적용합니다. |
| div{padding:20px 10px 20px 10px;} | 상 우 하 좌 순서!( 위쪽부터 시계방향으로 이동합니다.) |
- Box-sizing: 박스에 적용된 사이즈의 기준 정하기
div{box-sizing:content-box;} -> 요소 사이즈에 패딩과 테두리 포함 x
div{box-sizing:border-box;} -> 요소 사이즈에 패딩과 테두리 포함 o
css 단위: 스크린 환경에 적합한 단위
px -> 스크린을 구성하는 작은 점
% -> 부모 요소를 기준으로 크기 설정
em/rem -> 부모 요소의 폰트 크기/루트 요소의 폰트 크기(root em)
-> 상위 요소의 크기 값에 em값을 곱하기
요소 간 복잡한 위계 관계가 있으므로 상위 요소를 일일이 정하는 것은 어렵습니다.
-> 최상위 요소인 <html>의 폰트 사이즈를 기준으로 크기를 설정해야 합니다.
CSS의 태그
<img> 태그 -> 이미지 넣을 때
<alt> 태그 -> 이미지 소스가 존재하지 않을 때 대체하는 텍스트
overflow
주어진 공간을 넘어가는 컨텐트를 어떻게 보여줄지를 제어합니다.
폰트 꾸미기: 텍스트 속성
테두리 꾸미기
요소 정렬하기
대표적인 중앙정렬 속성
margin: 0 auto; -> 위아래 여백은 없고 가로 중앙에 배치한다.
text-align: center; -> 부모 요소가 block이고 정렬하려는 자식 요소가 inline일 때
위치 속성으로 HTML 요소 배치하기: position, float, clear
1. position
1. 기준을 잡는다. position
2. 이동시킨다. top | bottom | left | right
top | bottom | left | right
| top | 요소의 position 기준에 맞는 위쪽에서의 거리(위치)를 설정 |
| bottom | 요소의 position 기준에 맞는 아래쪽에서의 거리(위치)를 설정 |
| left | 요소의 position 기준에 맞는 왼쪽에서의 거리(위치)를 설정 |
| right | 요소의 position 기준에 맞는 오른쪽에서의 거리(위치)를 설정 |
position 속성
static -> 기준이 없습니다. (배치 불가능/기본값)
relative -> 요소 자기 자신을 기준으로 배치합니다. 기준점은 (원래 위치의) 요소의 왼쪽 위 모서리입니다.
absolute -> 부모(조상)요소를 기준으로 배치합니다. 기준점이 브라우저의 왼쪽 위 모서리입니다.
fixed -> 뷰포트 기준으로 배치합니다. 지정된 위치에 고정합니다.
위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않습니다.
sticky -> 스크롤 영역 기준으로 배치합니다. 브라우저 화면을 스크롤링할 때 따라붙습니다.
2. float
자식이 부모로부터 떠오릅니다. => margin을 없애버립니다.
float 속성을 갖는 요소는 html 문서에서 공간은 차지화되 다른 요소의 배치에 영향을 안 주는 요소가 됩니다.
float 속성을 사용하면서 가장 주의해야 할 점은 float 속성을 통한 정렬 후 항상 float에 대한 해제(clear)가 이루어져야 정상적으로 container에 item들이 정렬된 상태로 포함되어진다.
| none | float 속성 x |
| left | 대상 요소를 공중에 띄워 왼쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치합니다. |
| right | 대상 요소를 공중에 띄워 오른쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치합니다. |
| clear | float 속성을 해제할 때 사용하는 속성입니다. |
예시 1) float:left or right
div안의 복수개의 div는 수직정렬입니다. 이것을 수평정렬로 바꿉니다. 그리고 ul li태그로 생성된 수직 정렬 목록을 수평목록으로 바꿉니다.
예시 2)
이미지에 float="left"속성을 주면 이미지는 왼쪽으로 배치되고 뒤따르는 텍스트는 이미지를 감싸며 배치됩니다.
object-fit 속성
요소의 크기에 맞게 <img> 태그와 <video> 태그의 크기를 조정하는 방법으로 사용되는 속성입니다.
| fill | 기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 늘어나거나 찌그러집니다. |
| contain | 요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다. |
| cover | 요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다. |
| none | 크기가 조정되지 않고 원본사이즈로 처리됩니다. 크면 잘리고, 작으면 남습니다. |
| scale-down | 크기를 아무것도 지정되지 않거나 혹은 contain이 지정되어 있는 것처럼 변경됩니다. 이는 원본 크기보다 작아지는 결과를 보여줍니다. |
배경 이미지 관련 속성: background-image, background-repeat, background-position
background-image
background-image: none | url | initial | inherit| none | 이미지를 배경으로 사용하지 않습니다. |
| url | 이미지의 URL을 입력합니다. |
| initial | 기본값으로 설정합니다. |
| inherit | 부모 요소의 속성값을 상속받습니다. |
background-repeat
배경 이미지의 반복 여부와 반복 방향을 정합니다.
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inheritrepeat : 가로 방향, 세로 방향으로 반복합니다.
repeat-x : 가로 방향으로 반복합니다.
repeat-y : 세로 방향으로 반복합니다.
no-repeat : 반복하지 않습니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
background-position
background-position:0% 0%;
왼쪽 중단
background-position:0% 50%;
왼쪽 하단
background-position:0% 100%;
background-position:50% 0%;
background-position:50% 50%;
background-position:50% 100%;
background-position:100% 0%;
background-position:100% 50%;
오른쪽 하단
background-position:100% 100%;
z-index 속성
position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다.
[추가 학습 가이드]
1. 이미지 object-fit 속성
2. 배경 이미지 관련 속성 background-image, background-repeat, background-position 등
3. z-index 속성
4. float/clear 속성 예제 찾아서 실습해보기