패스트캠퍼스 챌린지 7일차 - Part 1. CSS 속성(1)

1. 개요

속성 (Properties)

1. 박스 모델
2. 글꼴, 문자
3. 배경
4. 배치
5. 플렉스(정렬) : 수평
6. 전환
7. 변환
8. 띄움 : 띄워서 다른 요소가 자연스럽게 흐를 수 있게
9. 애니메이션
10. 그리드 : 행과 열 가진 레이아웃
11. 다단
12. 필터

2. 너비(width, height)

width, height : 요소의 가로/세로 너비

• auto : 브라우저가 너비를 계산
• 단위 : px, em, vw 등 단위로 지정

인라인 요소 : width/height - 포함한 콘텐츠 크기만큼 자동으로 줄어듬

블록 요소 : width - 부모 요소의 크기만큼 자동으로 늘어남 / height - 포함한 콘텐츠 크기만큼 자동으로 줄어듬

max-width, max-height : 요소가 커질 수 있는 최대 가로/세로 너비

• none : 최대 너비 제한 없음
• 단위 : px, em, vw 등 단위로 지정

min-width, min-height : 요소가 작아 수 있는 최소 가로/세로 너비

• 0 : 최소 너비 제한 없음
• 단위 : px, em, vw 등 단위로 지정

3. CSS 단위

px 픽셀

% 상대적 백분율

em 요소의 글꼴 크기

rem 루트 요소(html)의 글꼴 크기

vw 뷰포트 가로 너비의 백분율 (1vw는 가로 너비의 100분의 1)

vh 뷰포트 세로 너비의 백분율

• html의 font-size는 16px이 기본

4. 외부 여백(margin)

margin : 요소의 외부 여백(공간)을 지정하는 단축 속성

• 0 : 외부 여백 없음
• auto : 브라우저가 여백을 계산 (가운데 정렬에 활용)
• 단위 : px, em, vw 등 단위로 지정

margin: 10px; 상하좌우

margin: 10px 20px; 상하 좌우

margin: 10px 20px 30px; 상 좌우 하

margin: 10px 20px 30px 40px; 상 우 하 좌

margin-방향 : 요소의 외부 여백을 지정하는 기타 개별 속성

음수 사용 가능 : 외부 여백이 줄어들어서 요소끼리 겹칠 수도 있게 함.

5. 내부 여백(padding)

padding: 요소의 내부 여백(공간)을 지정하는 단축 속성

• 0 : 내부 여백 없음
• 단위 : px, em, vw 등 단위로 지정
• % : 부모 요소의 가로 너비에 대한 비율로 지정

패딩만큼 요소의 크기가 커짐.

padding: 10px; 상하좌우

padding: 10px 20px; 상하 좌우

padding: 10px 20px 30px; 상 좌우 하

padding: 10px 20px 30px 40px; 상 우 하 좌

padding-방향 : 요소의 외부 여백을 지정하는 기타 개별 속성

6. 테두리 선(border)과 색상 표현

테두리

border: 선-두께 선-종류 선-색상; (단축 속성)

border: 4px solid black; /*border-width border-style border-color

border-width: 요소 테두리 선의 두께

• 단위 : px, em, vw 등 단위로 지정

style, color도 동일

border-style: 요소 테두리 선의 종류

• none : 선 없음
• solid : 실선
• dashed : 파선

border-color: 요소 테두리 선의 색상

• black : 선 없음
• 색상 : 선의 색상
• transparent : 투명

border-방향 / border-방향-속성

border 속성은 요소의 크기 커짐

색상 표현

색상 이름 - 브라우저에서 제공하는 색상 이름

Hex 색상코드 - 16진수 색상 #000, #FFFFFF

RGB - 빛의 삼원색 rgb(255, 255, 255)

RGBA - 빛의 삼원색 + 투명도 rgba(0, 0, 0, 0.5)

7. 모서리 둥글게(border-radius)

border-radius: 요소의 모서리를 둥글게 깎음

• 0 : 둥글게 없음
• 단위 : px, em, vw 등 단위로 지정

border-radius: 0 10px 0 0;

8. 크기 계산(box-sizing)

box-sizing: 요소의 크기 계산 기준을 지정

• content-box : 요소의 내용(content)으로 크기 계산
• border-box : 요소의 내용 + padding + border로 크기 계산

9. 넘침 제어(overflow)

overflow: 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

• visible : 넘친 내용을 그대로 보여줌
• hidden : 넘친 내용을 잘라냄
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

overflow-x / overflow-y

10. 출력 특성(display)

display: 요소의 화면 출력 특성

• block : 상자(레이아웃) 요소
• inline : 글자 요소
• inline-block : 글자 + 요소요소
• hiddenflex : 플렉스 박스 (1차원 레이아웃)
• grid : 그리드 (2차원 레이아웃)
• none : 보여짐 특성 없음, 화면에서 사라짐
• 기타 : table, table-row, table-cell 등

11. 투명도

opacity: 요소의 투명도

• 1 : 불투명
• 0~1 : 0부터 1사이의 소수점 숫자

12. 글꼴

font-size: 글자 크기

• 16px : 기본 크기
• 단위 : px, em, vw 등 단위로 지정

font-weight: 글자 두께

• normal, 400 : 기본 두께
• bold, 700 : 두껍게
• 100~900 : 100단위의 숫자 9개, normal과 bold 이외 두께

font-style: 글자 기울기

• normal : 기울기 없음
• italic : 기울어진 글자

line-height: 한 줄의 높이, 행간과 유사

• normal : 브라우저의 기본 정의를 사용, reset하면 1됨
• 숫자 : 요소의 글꼴 크기의 배수로 지정 ex)1.4 쓰면 글자 크기의 1.4배 됨
• 단위 : px, em, vw 등 단위로 지정

font-size: 16px;
line-height: 32px;
/* 동일하게 출력 */
/* line-height: 2; */
/* line-height: 200%; */

font-family: 글꼴1, “글꼴2”, … 글꼴계열;

앞에서부터 사용할 수 있는 글꼴 찾다가 전부 안 되면 마지막 글꼴계열에서 맞는거 적용

serif 바탕체 계열 / sans-serif 고딕체 계열 / monospace 고정너비 글꼴 계열(정렬 용이→코드)

13. 문자

color: 글자 색상

• rgb(0, 0, 0) : 검정ㅇ색
• 색상 : 기타 지정 색상

text-align: 문자 정렬 방식

• left : 왼쪽 정렬
• right : 오른쪽 정렬
• center : 가운데 정렬

text-decoration: 문자 장식(선)

• none : 장식 없음
• underline : 밑줄 (a태그는 이게 디폴트)
• line-through : 중앙 선

text-indent: 문자 첫 줄의 들여쓰기 (음수 사용 가능)

• 0 : 들여쓰기 없음
• 단위 : px, em, vw 등 단위로 지정

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.