CSS 는 속성이 참 다양해서 정리 할 것이 많다. 어렵다기 보다 내용이 많아서 기억 해야 할 것이 많은 느낌이다.
< CSS >
1. 폰트
| Font | ||
| font-weight | 글자의 두께(가중치) | normal : 기본 두께 bold : 두껍게 bolder : 상위(부모)요소보다 더 두껍게 lighter : 상위(부모)요소보다 더 얇게 100~900 : 100단위 숫자 9개, normal 과 bold 이외의 두께 |
| font-size | 글자의 크기 | 16px = 기본 크기 px / em / rem 등 단위로 지정 % : 부모 요소 폰트 크기에 대한 비율 smaller : 상위(부모) 요소보다 작은 크기 larger : 상위(부모) 요소보다 큰 크기 xx-small ~ xx-large : 가장 작은 크기 ~ 가장 큰 크기까지 7단계의 크기를 지정 |
| line-height | 한 줄의 높이, 행간과 유사 ( 상하 글자간의 폭 ) |
normal : 브라우저의 기본 정의를 사용 px / em / rem 등의 단위로 지정 숫자 : 요소의 글꼴 크기의 배수로 지정 % : 요소의 글꼴 크기 비율로 지정 |
font-family |
글꼴(서체) 지정 | serif : 바탕체 sans-serif : 고딕체 monospace : 고정너비 글꼴 cursive : 필기체 fantasy : 장식 글꼴 - 띄어쓰기 등 특수문자가 포함된 글꼴명은 큰 따옴표로 묶어야 함 |
구글 폰트 사용법
- 링크 방식 + 폰트 패밀리
- https://fonts.google.com/?subset=korean
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
1 ) 원하는 폰트 선택 후 "Select Regular 400 + " 선택
2 ) Use on the web 의 링크 복사 후, html 파일의 <head> 에 삽입
3 ) 폰트 패밀리 복사 후 , 원하는 클래스의 CSS 속성으로 넣어주기
 |
 |
눈누 폰트 사용법
- font-face + 폰트 패밀리
- https://noonnu.cc/
눈누
상업용 무료한글폰트 사이트
noonnu.cc
1 ) 눈누 폰트 사이트에서 원하는 폰트 선택 후 " 웹폰트로 사용 " 의 font-face 복사하기
2 ) 해당 코드 붙여넣고, 코드의 font-family 만 클래스의 CSS 속성으로 넣어주면 끝
 |
 |
2. 문자에 대한 속성
| 문자 | ||
| color | 글자의 색상 | rgb(0,0,0) 색상명 #색상코드 |
| text-align | 문자의 정렬 방식 | left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 |
| text-decoration | 문자의 선 장식 | none : 장식 없음 underline : 밑줄 overline : 윗줄 line-through : 중앙선 |
➡️ text-decoration 은 하이퍼링크의 밑줄을 없앨때 none 값을 줘서 쓰면 유용
3. 박스 모델
inline 요소
- 요소가 줄바꿈 없이 수평으로 쌓임
 |
 |
➡️ 줄바꿈 없이 요소의 크기만큼 가로로 쌓이는 모습
- span 태그는 대표적인 인라인 요소
➡️ 가로 너비를 지정하는 weight 와 세로 너비를 지정하는 height 값을 줘도 반응 X
- 인라인 요소 안에 블록 요소를 삽입 할 수 없음. 인라인 요소 안에 인라인 요소 삽입은 가능
➡️ <span><div></div></span> 불가능 !! ( div 는 블록 요소 )
➡️ <span><span></span></span> 가능 !!
block 요소
- 요소가 수직으로 쌓임
 |
 |
- 블록 요소 안에는 블록 요소와 인라인 요소 모두 삽입 가능
inline-block
- block 요소가 수직으로만 쌓이는 문제점을 해결하고자 나온 개념
- 디자인이 중요시 되면서 block 요소를 가로로 나열하는 경우가 많이 생겼는데,
span 태그는 inline 요소라서 해당 구역을 꾸미기 어려움
➡️ 따라서, 둘의 특징을 합쳐서 만든 inlin-block
- display : inline-block 으로 지정 가능
4. margin 과 padding
| margin 과 padding | ||||
| 단축 속성 | 개별 속성 | |||
| margin | 요소의 외부 여백 공간을 지정 |
0 : 외부 여백 없음 auto : 브라우저가 여백을 계산 -> 가로/세로 너비가 있는 요소의 가운데 정렬에 사용 단위 = px / em/ vw 등 % : 부모 요소의 가로 너비에 대한 비율 음수 사용 가능 |
 |
 |
| padding | 요소의 내부 여백 공간을 지정 |
0 : 내부 여백 없음 단위 = px / em /vw 등 % : 부모 요소의 가로 너비에 대한 비율 |
 |
 |
➡️ html 의 body 에는 기본 마진이 8px 정도 들어있기 때문에 없애고 싶으면 body 에도 margin 값을 0 으로 줘야 함
% 와 vw의 차이 ? vw는 스크롤바 포함한 크기 계산.( 창넓이 계산이기 때문에 스크롤바 포함됨) → 창 크기에 따라 요소의 크기가 달라짐 → min/max-width 주면 제한 크기를 둘 수 있음 ➡️ 즉, vw = 스크롤바 포함 크기 계산 % = 스크롤바 불포함 크기 계산 |
5. width 와 height
| width 와 height | ||
width height |
요소의 가로 / 세로 너비 | auto : 브라우저가 너비를 계산 단위 = px / em / vw 등 |
max-width max-height |
요소가 커질 수 있는 최대 가로 / 세로 너비 | none = 최대 너비 제한 없음 auto = 브라우저가 너비를 계산 단위 = px / em / vw 등 |
min-width min-height |
요소가 작아질 수 있는 최소 가로 / 세로 너비 | 0 : 최소 너비 제한 없음 auto : 브라우저가 너비를 계산 단위 = px / em /vw 등 |
line-height = 영역 요소 내부 컨텐츠 글자의 줄 높이 ➡️ font 와 box model 의 크기 단위 적용 가능 ➡️ 컨텐츠가 1줄인 경우 Box height 와 line height 를 동일하게 하면 중앙 정렬 효과가 있음 |
Calc() = 사용자가 원하는 크기 값을 계산하여 적용 ➡️ 덧셈과 뺄셈은 좌우공백이 있어야 인식 됨 Ex. Cal(100vh - 20vw) |
6. Border
| border | |||
| 단축 속성 정리 | |||
border-width |
요소 테두리 선의 두께 | medium : 중간 두께 thin : 얇은 두께 thick : 두꺼운 두께 단위 = px / em / % 등 |
 |
border-style |
요소 테두리 선의 종류 | none : 선없음 silid : 실선 ( 일반 선 ) dotted : 점선 dashed : 파선 double : 두 줄 선 groove : 홈이 파여있는 모양 ridge : 솟은 모양 ( groove의 반대 ) inset : 요소 전체가 들어간 모양 outset : 요소 전체가 나온 모양 |
 |
border-color |
요소 테두리 선의 색상 | black : 검정색 색상 명 : 선의 색상 transparent : 투명 |
 |
border-방향 border-방향-속성 |
요소 테두리 선 지정하는 기타 속성들 |
 |
|
border 의 단축 속성  |
7. border-radius
| border-radius | 요소의 모서리를 둥글게 깎음 | 0 : 둥글게 깎음 단위 = px / em / vw 등 |
 |
||
8. box-sizing
| box-sizing | 요소의 크기 계산 기준을 지정 | content-box : 요소의 내용(content)로 크기 계산 border-box : 요소의 내용 + padding + border 로 크기 계산 |
| content box | border box |
 |
 |
9. opacity
| opacity | 요소의 투명도 | 1 : 불투명 0~1 : 0 부터 1 사이의 소수점 숫자 |
10.visibility
| visibility | 요소의 모습과 속성을 숨김 | visibility : hidden |
요소를 숨기는 3가지 방법? 1️⃣ opacity : 0; -> 투명하게 만들기 -> 모습만 숨기는 방법 / 속성은 남음 / 자리 차지 O 2️⃣ visibility : hidden -> 모습과 속성을 숨기는 방법 / 자리 차지 O / 속성 존재 X 3️⃣ display : none -> 그냥 없애버리는 방법 / 자리도 사라짐 = 자리 차지 X / 속성 존재 X |
11. overflow
| overflow | ||
overflow |
요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성 |
visible : 넘친 내용을 그대로 보여줌 hidden : 넘친 내용을 잘라냄 scroll : 넘친 내용을 잘라내고 스크롤바 생성 auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 |
➡️ overflow-x 와 overflow-y로 개별 속성을 줄 수도 있음
'개발 > HTML,CSS,JS' 카테고리의 다른 글
| [JS] JavaScript(1) - 개념 / 변수 /자료형 / 형변환 / 연산자 (0) | 2023.07.16 |
|---|---|
| [CSS] CSS(4) - transform / transition / animation (0) | 2023.07.16 |
| [CSS] CSS(3) - position / background / display (0) | 2023.07.16 |
| [CSS] CSS (1) - 선택자 (0) | 2023.07.16 |
| [HTML] HTML 시작하기 (0) | 2023.07.07 |
