[front 기초] CSS

Bzeromo·2023년 8월 1일

CSS

HTML/CSS/JavaScript

목록 보기

2/5

⚡ CSS

📌 CSS 속성

⭐ 단위

🔷 크기 단위

길이 값(length): px, cm, mm, in, em, rem 등의 길이 단위 사용

💡 em: 부모 엘리먼트의 font-size에 비례한 상대 사이즈(3em은 부모의 3배), 세부적으로 조정할 때 주로 사용
rem: html의 font-size에 비례한 상대 사이즈(em과 마찬가지로 배수), 유지보수하기가 편하고 예측이 쉬우며 전체적인 틀을 잡을 때 좋다.
백분율(%): 상위 block에 대한 백분율의 단위, 상위 block 크기가 바뀌면 자신의 크기도 자동으로 변경
auto(width): 100%, 자신의 상위 block이 허용하는 width 크기만큼 채운다.
auto(height): 0%, 높이를 결정하는 요인은 block box 속의 내용물의 크기

🔷 색상 단위

색상 키워드: 대소문자 구분 x

ex) red, blue...
RGB 색상: 16진수 표기법 혹은 함수형 표기법을 사용해서 특정 색을 표현하는 방식

HSL 색상: 색상, 채도, 명도를 통해 특정 색을 표현하는 방식

div{
	color: black;
   color: #000;
   color #ffffff;
   color: rgb(255, 0, 0);
   color: hsl(120, 100%, 0);
	color: rgba(0, 0, 255, 0.5);
   color: hsla(120, 100%, 0, 0.5);
}

⭐ font

속성	의미
font-family	글꼴 지정 (font name)
font-size	글자 크기 지정
font-style	글자 스타일 지정
font-variant	소문자를 작은 대문자(small-caps)로 변형
font-weight	글자 굵기 지정
font	font에 관한 속성을 한번에 지정하는 단축형(short hand)속성

⭐ Text

속성	의미
text-align	text 정렬 방식 지정
text-decoration	text 장식 지정
text-indent	Text-block안 첫 라인의 들여쓰기 지정
text-transform	text 대문자화
white-space	엘리먼트 안의 공백 지정
vertical-align	수직 정렬 지정
letter-spacing	문자 간의 space 간격을 줄이거나 늘림
word-spacing	단어 간의 간격 지정
line-height	줄(행) 간격 지정
color	text 색상 지정

⭐ background

속성	의미
background-color	배경색을 지정
background-image	배경을 이미지로 지정
background-attachment	배경 이미지를 고정하거나 scroll 여부를 지정
background-repeat	배경 그림의 반복 여부를 지정
background-position	배경 그림의 위치를 지정
background	배경 관련 속성을 한번에 지정 (font 속성과 달리 속성 값 순서에 구애 받지 않음)
background-size	배경 이미지 크기 조절
background-clip	배경 적용 범위 조절

⭐ box

🔷 box model

모든 HTML 요소는 box 형태로 되어있음.
margin: 테두리 바깥 외부여백
border: 테두리
padding: 테두리 안쪽 내부 여백
글이나 이미지 등 실제 내용은 가장 안쪽

🔷 margin

box의 마진영역의 너비를 지정
값 1개 -> 모든 면 적용
2개 -> {top, bottom}, {right, left}
3개 -> {top}, {right, left}, {bottom}
4개 -> top, right, bottom, left 순으로 적용

💡 margin: 0 auto 를 통해 가운데 정렬이 되도록 설정이 가능하다.

❗ 마진 상쇄 현상(마진끼리 겹쳐지는 현상)이 일어날 수 있다.

🔷 padding

box의 패딩 영역의 너비를 지정
값 1개 -> 모든 면 적용
2개 -> {top, bottom}, {right, left}
3개 -> {top}, {right, left}, {bottom}
4개 -> top, right, bottom, left 순으로 적용

🔷 border

border-style: 선의 모양
border-width: 선의 굵기
border-color: 선의 색상

💡 위의 세 속성을 줄여서 사용 가능하다
border-radius: 선의 모서리를 둥글게 만드는 속성
box-shadow: 그림자 효과

🔷 box-sizing

기본적으로 모든 요소의 box-sizing은 content-box
padding을 제외한 순수 contents 영역만을 box로 지정
border까지의 너비를 크기로 보기 원할 때: box-sizing: border-box

⭐ display

🔷 display: block

줄 바꿈이 일어나는 요소
화면 크기 전체의 가로 폭을 차지
블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있음.
대표적인 블록 레벨 요소
- div, ul, ol, li, p ,hr, form...

🔷 display: inline

줄 바꿈이 일어나지 않는 행의 일부 요소
content 너비만큼 가로 폭을 차지
width, height, margin-top, margin-bottom을 지정할 수 없음.
상하 여백은 line-height로 지정
대표적인 블록 레벨 요소
- span, a, img, input, label, b, e, i, strong...

🔷 display: inline-block

block과 inline 레벨 요소의 특징을 모두 갖는다.
inline 처럼 한줄에 표시 가능
block처럼 width, height, margin 속성 지정 가능

🔷 display: none

해당 요소를 화면에 표시하지 않는다. (공간 x, 화면 x)
visibility: hidden은 해당 요소 (공간 o, 화면 x)

⭐ position

static(기본) -> 일반적인 내용물의 흐름, 상단, 좌측에서의 거리를 지정할 수 없다.
relative -> HTML 문서에서의 일반적인 내용물의 흐름을 말하지만, top, left 거리를 지정
absolute -> 자신의 상위 box 속에서의 top, left, right, bottom 등의 절대적인 위치를 지정
fixed -> 스크롤(scroll)이 일어나도 항상 화면상의 지정된 위치에 있다.
float: 박스를 어느 위치에 배치할 것인지를 결정하기 위해 사용
- none: 기본 값
- left: 요소를 왼쪽으로 띄움
- right: 요소를 오른쪽으로 띄움
clear: float 속성이 가지고 있는 값을 초기화 하기 위해 사용
- left, right: 각각의 속성 값을 취소할 수 있다.
- both: 양쪽의 float 속성 값을 취소할 수 있다.
- none: 기본 값