CSS의 속성(Properties)
HTML과 비슷하게, CSS도 특정한 기능을 하는 속성들이 미리 정의되어 있으며, 이를 활용하여 태그의 스타일을 정의 할 수 있다.
속성의 종류는 매우 많지만 중요한 속성들은 다음과 같다.
- 박스 모델
- 글꼴, 문자
- 배경
- 배치
- 플렉스(정렬)
- 전환
- 변환
- 띄움
- 애니메이션
- 그리드
- 다단
- 필터
먼저 HTML과 CSS에서 사용하는 단위는 다음과 같다.
단위 | 설명 |
---|---|
px | 픽셀 |
% | 상대적 백분율 |
em | 요소의 글꼴 크기 |
rem | 루트 요소(html)의 글꼴 크기 |
vw | 뷰포트 가로 너비의 백분율 |
vh | 뷰포트 세로 너비의 백분율 |
박스 모델
CSS의 박스 모델은 HTML의 요소를 상자(박스)로 생각하고, 이 박스의 크기와 여백을 지정하는 속성들이다.
크기와 레이아웃
- width, height
- 요소의 가로/세로 너비
- 기본값: 브라우저 자동 계산
- max-width, max-height
- 요소의 최대 가로/세로 너비
- 기본값: 제한 없음
- min-width, min-height
- 요소의 최소 가로/세로 너비
- 기본값: 0
여백과 내부 여백
- margin
- 요소의 외부 여백(공간) 지정
- 기본값: 0
- padding
- 요소의 내부 여백(공간) 지정
- 기본값: 0
- 요소의 크기가 증가한다!!!
테두리와 모양
- border
- 요소의 테두리 선 지정
- border: 선-두께 선-종류 선-색상 (border-width, border-style, border-color)
- 요소의 크기가 증가한다!!!
- border-style
- 테두리 선 종류
- 기본값: none
- solid: 실선
- dashed: 파선(점선)
- border-color
- 요소 테두리 선 색상 지정
- 기본값: black
- border-radius
- 요소 모서리 둥글게 깎음
- 기본값: 0
크기 계산과 내용 넘침
- box-sizing
- 요소 크기 계산 기준 지정
- 기본값: content-box
- content-box: 내용으로 크기 계산
- border-box: 요소의 내용(content) + 여백(padding) + 테두리(border)까지 포함하여 크기 계산
- border-box로 지정하면, 내가 원하는 크기의 박스를 얻고 싶을 때 유용
- overflow
- 내용이 요소 크기를 넘어설 때 보여짐 제어
- 기본값: visible
- visible: 넘친 내용을 그대로 보여줌
- hidden: 내용 잘라냄
- scroll: 잘라내고 스크롤바
- auto: 내용 있을 때 잘라내고 스크롤바
화면 출력 특성
- display
- 요소의 화면 출력(보여짐) 특성 (각 요소에 이미 지정되어 있음)
- 각 요소들의 기본값을 벗어나서, 내가 원하는 화면 출력 특성을 부여할 수 있다.
- 기본값: block, inline, inline-block
- block: 상자(레이아웃) 요소
- inline: 글자 요소
- inline-block: 글자 + 상자 요소
- flex: 플렉스 박스 (1차원 레이아웃, 수평정렬에 용이함)
- grid: 그리드 (2차원 레아이웃)
- none: 보여짐 특성 없음, 화면에서 사라짐
- 기타: table, table-row, table-cell 등
투명도
- opacity
- 요소의 투명도
- 기본값: 1 (불투명)
- 0~1 사이 값으로 지정
글꼴, 문자
font-style
- 글자의 기울기
- 기본값: normal
font-weight
- 글자의 두께(가중치)
- 기본값: normal, 400
- bold, 700
- 100 ~ 900
font-size
- 글자의 크기
- 기본값: 16px
font-family
- 글꼴 지정
line-height
- 한 줄의 높이, 행간과 유사
- 기본값: normal
- 요소의 글꼴 크기의 배수로 지정
color
- 글자의 색상
- 기본값: rgb(0, 0, 0) , 검정색
text-align
- 문자의 정렬방식
- 기본값: left
text-decoration
- 문자의 장식(선)
- 기본값: none
- underline, line-through
text-indent
- 문자 첫 줄의 줄여쓰기
- 기본값: 0
배경
background-color
- 요소의 배경 색상
- 기본값: transparent (투명함)
background-image
- 요소의 배경 이미지 삽입
- 기본값: 이미지 없음
- url(”경로”)
background-repeat
- 요소의 배경 이미지 반복
- 기본값: repeat
background-position
- 요소의 배경 이미지 위치
background-size
- 요소의 배경 이미지 크기
background-attachment
- 요소의 배경 이미지 스크롤 특성
- 기본값: scroll
- scroll: 이미지가 요소를 따라서 같이 스크롤
- fixed: 이미지가 뷰포트에 고정, 스트롤 X
배치
position
- 요소의 위치 지정 기준
- top, bottom, left, right, z-index (모두 음수 가능)
- 기본값: static
- static: 기준 없음 (그냥 원래 있는 자리에 있음)
- relative: 요소 자신을 기준
- 본인이 원래 있었던 그 자리 기준!
- 배치 전 자리는 비어 있다 (그 자리에 다른 요소가 채워지지 않는다)
- 그래서 자기 자신을 기준으로 배치하지는 않는다.
- 보통은 position absolute의 구조상의 부모요소가 위치상의 부모요소가 될 수 있도록 포지션을 부여하는 용도로 쓰임
- absolute: 위치 상 부모 요소를 기준 (위치 상 부모 요소를 반드시 확인!)
- 배치에서 가장 많이 사용됨
- 부모 기준으로 배치가 되니, 원래자리는 없어짐. 즉, 원래 있던 자리에 다른 요소가 채워짐
- 위치상의 부모요소의 position을 relative를 줘야 함
- fixed: 뷰포트(브라우저)를 기준
top, bottom, left, right
- 요소의 각 방향별 거리 지정
- 기본값: 브라우저가 계산
요소 쌓임 순서(Stack order)
어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
- 요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외)
- 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
- 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임. (더 늦게 선언되었을 수록)
z-index
- 요소의 쌓임 정도를 지정
- 기본값: 0
- 포지션 속성이 없을 경우, z-index가 아무리 높아도 밑에 있음
요소의 display가 변경됨!
position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨.
플렉스(정렬, 1차원 레이아웃)
block 속성의 박스에 display값을 flex를 주면,
- 이때부터 해당 박스는 flex container가 되며, (자식 요소들은 flex items 라고 부름)
- 자식 요소들이 수평 정렬된다.
이때, flex container와 flex items에 부여할 수 있는 속성들이 나뉘는데, 다음과 같다.
- flex container 속성들 : display, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items
- flex items 속성들: order, flex, flex-grow, flex-shrink, flex-basis, align-self
flex container 속성들
display
- flex container의 화면 출력(보여짐) 특성
- flex: 블록 요소와 같이 flex container 정의
- inline-flex: 인라인 요소와 같이 flex container 정의
flex-direction
- 주 축을 설정
- 기본값: row
- row: 좌 → 우
- row-reverse: 우 → 좌
- column: 위 → 아래
- column-reverse: 아래 → 위
flex-wrap
- flex items 묶음(줄 바꿈) 여부
- 기본값: nowrap
- nowrap: 묶음(줄 바꿈) 없음
- wrap: 여러 줄로 묶음 (줄 바꿈 있음)
justify-content
- 주 축의 정렬 방법
- 기본값: flex-start
- flex-start: flex items를 시작점으로 정렬
- flex-end: flex items를 끝점으로 정렬
- center: flex items를 가운데 정렬
- space-between: 각 flex item 사이를 균등하게 정렬
- space-around: 각 flex item의 외부 여백을 균등하게 정렬
align-content
- 교차 축의 여러 줄 정렬 방법 (두 줄 이상이라 별로 안씀)
- 기본값: stretch
- stretch: flex items를 시작점으로 정렬
- flex-start: flex items를 시작점으로 정렬
- flex-end: flex items를 끝점으로 정렬
- center: flex items를 가운데 정렬
- space-between: 각 flex item 사이를 균등하게 정렬
- space-around: 각 flex item의 외부 여백을 균등하게 정렬
align-items
- 교차 축의 한 줄 정렬 방법 (이걸 더 많이 씀)
- 기본값: stretch
- stretch: flex items를 시작점으로 정렬
- flex-start: flex items를 시작점으로 정렬
- flex-end: flex items를 끝점으로 정렬
- center: flex items를 가운데 정렬
flex items 속성들
order
- flex item의 순서
- 기본값: 0
- 숫자가 작을수록 먼저 배치
flex-grow
- flex item의 증가 너비 비율
- 기본값: 0
- 숫자로 증가비율을 부여
flex-shrink
- flex item의 감소 너비 비율
- 기본값: 1
- 0을 입력하면 감소가 없는 것
flex-basis
- flex item의 공간 배분 전 기본 너비
- 기본값: 요소의 Content 너비
- 0을 입력하면 기본 컨텐츠 너비를 0으로 설정함
- flex-grow와 함께 사용하여, 원래 컨텐츠 너비는 무시하고, 비율대로 배분하고 싶을 때 사용함
'Boostcamp' 카테고리의 다른 글
HTML 시멘틱 태그 (0) | 2023.08.31 |
---|---|
CSS 공부 (0) | 2023.08.29 |
멤버십 시작! (0) | 2023.08.29 |
부스트캠프 웹・모바일 8기 챌린지 과정 회고 (1) | 2023.08.08 |
챌린지 마지막 과제 (0) | 2023.08.03 |