CONTENTS
Section2 CSS3 박스 속성
CSS flexbox Game & review
Section4 CSS단위
Section5 CSS 글자 속성
참고사이트) Google Fonts
------------------------------------------------------------------
Section2 CSS3 박스 속성
◎ dispaly:flex
-flex: 가로, 세로의 축을 바꿈
1)dispaly:flex의 장단점
-장점: 부모가 요소의 높이 인식, 계산미흡으로 인한 무너짐 없음
-단점: ie10이하에서는 실행되지 않음
2)용어정리
-flex-container: 블록레벨요소, flex-items를 감싼 부모요소
-flex-item: 블록레벨요소, flex-container의 자손 요소들
3)사용법
| flex-containe { display:flex; } |
4)flex-container에 주는 속성
| 속성 | 내용 |
| flex-direction | flex-container 내의 item을 배치할 때 사용할 주축, 방향(정방향, 역방향)을 지정 |
| flex-wrap | flex 받은 자손 요소들의 크기가 부모요소 크기보다 클 때, 자손 요소들을 강제로 한줄에 배치할 것인지, 여러행으로 나누어 표현 할 것인지 결정하는 속성 |
| flex-flow | flex 관련 속성을 속기법으로 값을 작성하는 속성 |
| justify-content | flex 받은 자손 요소들을 가로(기본축) 정렬하는 속성 |
| align-items | flex 받은 자손 요소들을 부모영역에서 세로 정렬하는 속성 |
| align-content | flex 받은 자손 요소가 여러 줄일 때, 부모영역에서 세로 정렬하는 속성 |
*위와 같은 display:flex의 하위 속성들은 display:flex가 먼저 선행되어야하고 flex-container에 속성을 주어야함
◎ flex-direction
-자손 요소들이 배열되어 있는 주축을 바꿈
-가로/세로, 정방향/역방향
| 속성값 | 내용 |
| row | 기본값, 자손 요소들을 수평나열 시킴 |
| row-reverse | 자손 요소들이 수평나열되지만, 요소 순서가 뒤집힘 |
| column | 자손 요소들을 수직나열 시킴 |
| column-reverse | 자손 요소들을 수직나열되지만, 요소 순서가 뒤집힘 |
◎justify-content
-자손요소 기본축 정렬 속성
| 속성값 | 내용 |
| flex-start | 기본값, 자손 요소를 부모영역의 시작부분에 배치 |
| flex-end | 자손요소를 부모영역의 끝에 배치 |
| center | 자손을 부모영역의 중앙에 배치 |
| space-btween | 첫 요소와 끝 요소를 양쪽 끝으로 붙이고 나머지 요소들과 균등 배분 |
| space-around | 자손 요소들이 부모의 공간을 동일하게 여백을 갖고 정렬, 자손 요소들 좌우로 동일한 여백을 가지고 있음 |
| space-evely | 자손요소 간의 동일한 여백 설정 |
◎align-items
-자손 요소들을 교차축을 따라 정렬하는 속성
| 속성값 | 내용 |
| stretch | 기본값, 자손 높이가 부모영역을 꽉 채움 |
| flex-start | 자손을 부모영역의 시작 부분에 배치 |
| flex-end | 자손을 부모영역의 끝 부분에 배치 |
| center | 자손을 부모영역의 중앙에 배치 |
| baseline | 자손을 부모의 기준선에 배치 |
◎flex-wrap
-자손 요소들을 한줄 배치할지, 여러 행으로 배치할지 정함
| 속성값 | 내용 |
| nowrap | 기본값, 자손 요소들이 부모요소 영역을 벗어나도 한줄에 배치 |
| wrap | 여러 행에 걸쳐서 배치 |
| wrap-reverse | 여러 행에 걸쳐서 배치되나 요소가 나열되는 시작점과 끝점의 기분이 반대로 배치 |
CSS flexbox Game & review
문제풀기
CSS flexbox
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
| 정답 1. justify-content: flex-end; 2. justify-content: center; 3. justify-content: space-around; 4. justify-content: space-between; 5. align-items: flex-end; 6. justify-content: center; align-items: center; 7. justify-content: space-around; align-items: flex-end; 8. flex-direction: row-reverse; 9. flex-direction: column; 10. flex-direction: row-reverse; justify-content: flex-end; 11. flex-direction: column; justify-content: flex-end; 12. flex-direction: column-reverse; justify-content: space-between; 13. flex-direction: row-reverse; justify-content: center; align-items: flex-end; 14. order:2; 15. order:-1; 16. align-self:flex-end; 17. order:3; align-self:flex-end; 18. flex-wrap: wrap; 19. flex-wrap: wrap; flex-direction: column; 20. flex-flow:column wrap; 21. align-content: flex-start; 22. align-content: flex-end; 23. flex-direction: column-reverse; align-content: center; 24. flex-wrap: wrap-reverse; flex-direction:column-reverse; justify-content:center; align-content:space-between; |
Section4 CSS 단위
1.PX, %
-픽셀은 고정된 사이즈를 말하며 자식은 각 부모로부터 크기에 영향을 받음, 퍼센트로 크기를 지정하면 부모의 n%로 크기가 지정됨
2.EM, REM
-em은 자기자신의 글자 크기에 영향을 받음, 부모 요소에 따라 상대적으로 변함
-rem은 html 태그에서 적용된 글자 사이즈만을 참조, 상대적으로 변함
3.VW, VH
-브라우저의 크기가 변경 될 때마다 값이 바뀐다는 의미에서 진정한 리스폰시브(반응형) 단위라고 할 수 있음
-CSS Viewport를 기준으로 한 단위가 4개(vh, vw, vmin, vmax)
-Viewport Height(vh): viewport의 높이에 근거, 1vh는 viewport의 높이 1%와 같음
-Viewport Width(vw): viewport의 폭에 근거, 1vw는 viewport의 넓이 1%와 같음
-Viewport Minimum(vmin): viewport의 (높이와 너비 중) 작은 쪽의 치수에 기초, viewport의 높이가 폭보다 작은 경우 1vmin는 viewport의 높이의 1%에 해당, 마찬가지로 viewport의 폭의 높이보다 작은 경우 1vmin는 viewport의 넓이의 1%와 같음
-Viewport Maximum(vmax): viewport의 (높이와 너비 중) 큰 쪽의 치수에 기초, viewport의 높이가 폭보다 큰 경우 1vmax는 viewport의 높이의 1%에 해당, 마찬가지로 viewport의 폭의 높이보다 큰 경우 1vmax는 viewport의 넓이의 1%와 같음
Section5 CSS 글자 속성
◎font
-글자 관련 속성들을 지정
- 단축 속성을 사용하려면 font-size와 font-family를 필수로 입력해야함
| 속성 값 | 의미 | 기본값 |
| font-style | 글자 기울기 지정 | normal |
| font-weight | 글자 두께 지정 | normal |
| font-size | 글자 크기 지정 | medium(16px) |
| line-hight | 줄 높이(줄 간격) 지정 | normal(Reset.css 적용시1) |
| font-family | 글꼴(서체) 지정 | 운영체제(브라우저)에 따라 달라짐 |
font
◎font-weight
-글자 두께(가중치)를 지정함
-normal과 bold만 자원하는 글꼴일 경우, 100~500은 normal을 의미하고 600~900은 bold를 의미
| 속성 값 | 의미 | 기본값 |
| normal | 기본 글자 두께, 400과 동일 | normal(400) |
| bold | 글자 두껍게, 700과 동일 | |
| bolder | 부모(상위) 요소보다 더 두껍게(bold 보다 두껍다는 개념이 아님) | |
| lighter | 부모(상위)요소보다 더 얇게 | |
| 숫자 | 100부터 900까지의 100단위의 숫자 9개, normal과 bold이외의 두께를 제공하는 글꼴을 위한 설정 |
◎line-height
-줄 높이(줄 간격)을 지정(패딩과 유사함)
| 속성 값 | 의미 | 기본값 |
| normal | 브라우저의 기본 정의를 사용 (1~1.4) | normal |
| 숫자 | 요소 자체 글꼴 크기의 배수로 지정 | |
| 단위 | px, em, cm 등 단위로 지정 | |
| % | 요소 자체 글꼴 크기의 비율로 지정 |
line-height
◎font-family
-글꼴(서체) 지정
| 글꼴 계열 | 의미 |
| serif | 바탕체 계열 |
| sans-serif | 고딕체 계열 |
| monospace | 고정나비(가로폭이 동등한) 글꼴 계열 |
| cursive | 필기체 계열 |
| fantasy | 장식 글꼴 계열 |
font-family: [글꼴 후보1, 글꼴 후보2...], 글꼴 계열;
글꼴 계열은 마지막에 필수로 입력해야 함
font-family
◎color
-문자의 색상을 지정
| 색상표현 | 의미 | 예시 |
| 색상이름 | 브라우저에서 제공하는 색상이름 | red, blue |
| Hex색상코드 | 16진수 색상(Hexadecimal Colors) | #000000 |
| RGB | 빛의 삼원색 | rgb(255,255,255) |
| RGBA | 빛의 삼원색, 투명도 | rgba(255,0,0, .5) |
| HSL | 색상, 채도, 명도 | hsl(120,100%,50%) |
| HSLA | 색상,채도,명도,투명도 | hsla(120,100%,50%,0.3) |
◎text-align
-문자 정렬 방식을 지정
| 속성 값 | 의미 | 기본값 |
| left | 왼쪽 정렬 | default |
| right | 오른쪽 정렬 | |
| cemter | 가운데 정렬 | |
| justify | 양쪽 맞춤 | 한줄에서는 동작하지 않음 |
◎text-decoration
-문자 장식(line)을 설정
| 속성 값 | 의미 | 기본값 |
| none | 선없음 | none |
| underline | 밑줄을 지정 | |
| overline | 윗줄을 지정 | |
| line-through | 중앙 선(취소선)을 지정 |
◎text-indent
-문단의 시작섬에 들여쓰기를 지정
-text-indent: 10px; 10px만큼 들여쓰기가 됨, -10px하면 내어쓰기가 됨
◎ letter-spacing
-문자의 자간(글자 사이 간격)을 설정
-letter-spacing: 10px; 글자사이간격이 10px만큼 벌어짐
◎ word-spacing
-단어 사이(띄어쓰기)의 간격을 설정
-word-spacing: 10px; 단어사이의 간격이 10px만큼 벌어짐
◎white-space
-요소가 공백 문자를 처리하는 법을 지정
참고사이트)
<구글폰드사용>
Google Fonts
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
*원하는 글꼴 검색->우측 상단의 [Get font] 클릭->우측에 [Get embed code] 클릭->왼쪽에 필요한 Weight(글꼴 두께 클릭)
방법1) <link> 체크 : 해당 링크 태그 전체 복사해서 html파일의 <head></head> 영역에 붙여넣기
방법2) @import 체크 : 해당 코드 복사 (style태그 지움), css파일 제일 상단에 붙여넣기
css파일 > 해당 글꼴 필요한 요소 지정(선택자 활용)하고 Roboto: CSS classes에 있는 코드 전체 복사 붙여넣기
'웹프로그래밍 > CSS' 카테고리의 다른 글
| 프로그래밍 언어 활용 11일차 (24/11/25) (0) | 2024.11.25 |
|---|---|
| 프로그래밍 언어 활용 10일차 (24/11/22) (0) | 2024.11.22 |
| 프로그래밍 언어 활용 8일차(24/11/20) (2) | 2024.11.20 |
| 프로그래밍 언어 활용 7일차(24/11/19) (2) | 2024.11.19 |
| 프로그램 언어 활용 6일차(24/11/18) (4) | 2024.11.18 |