flex 정렬
flex-wrap
flex할 item이 여러 개일때 item의 줄바꿈 허용유무 결정
↑ display:flex, flex-direction:row 를 준 상태로 실제 주황 박스의 너비로는 부모박스에 3칸밖에
안 들어가지만 가로로 정렬한 상태이기에 억지로 끼워져 있는 상태
↑ 여기서 flex-wrap:wrap 를 주면 박스의 너비만큼만 맞춰 들어가고 그 이후로는 다음 줄로 자연스레 넘어가게 됨
주의점!! [align-item 과 align-content]
align-items=> flex로 정렬한 아이템들이 한 줄로 나열되어 있을 때 우선 적용align-content=> flex로 정렬한 아이템들이 두 줄 이상일 때 적용
+a)align-content는space-between, space-around, space-evenly속성 적용 가능
그러므로 한 줄로 나열 되었느냐, 두 줄 이상이냐에 따라 그에 맞는 속성을 써야 함!
flex-flow
flex-direction,flex-wrap 을 합쳐놓은 속성
- ex.
flex-direction:row, flex-wrap:wrap=>flex-flow:row wrap
flex-item
-기본적으로 flex는 아이템을 담고있는 상위 박스에 속성을 줄 수 있음
-flex-item을 사용하면 아이템 자체에 flex로 여러 속성을 줄 수 있음
CSS 상속
CSS는 상속되는 속성이 있고, 상속되지 않는 속성이 있음
웹 폰트
사용자가 로컬(내 컴퓨터)에 폰트를 설치하지 않아도, 특정 서버에 위치한 폰트를 다운받아 웹페이지에 표시해 주는 것
font-family => HTML 요소의 글씨체를 바꿀 때 사용하는 속성
웹폰트 사용방법
@font-face 이용법
- 웹 폰트 파일 준비
- css 문서에서
@font-face를 이용해 파일 불러오고, 해당 폰트 파일을 어떤 font-family로 지정할 것인지 설정
@import 이용법
- google fonts 사이트 접속 후, 원하는 폰트 옆의 [select this style] 클릭
- [import] 선택 후 해당 import 구문을 css파일 내에 입력
- 사이트에 있는 [css rules to specify families]를 참고하여 font-family 적용
폰트 속성
font-size=> 텍스트 크기 지정
font-weight=> 텍스트 두께 지정
font-style=> 글자 기울임 지정
text-decoration=> 텍스트에 장식용 선 추가 [underline | overline | line-through]
color=> 텍스트 색상 지정
line-height=> 텍스트 행간 지정 (높이)
letter-spacing=> 텍스트 자간 지정 (text와 text간의 공간)
word-spacing=> '단어' 간의 간격 지정
text-align=> (블록, 표 안의) 텍스트 가로 정렬방식 지정 [center | left | right | justify]
-(블록박스 안의) inline 요소만 정렬 가능
vertical-align=> (인라인, 표 안의) 텍스트 세로 정렬방식 지정 [top | middle | bottom]
-(vertical-align)적용예시
↑ 1. 가장 큰 Verticalspan태그가 다른 Verticalspan태그를 감싸는 상태
2. Vertical 부모태그의 line-height을 3으로 지정하고 아무런 설정이 없는 상태로 3개의 Vertical이 모두 부모의 Baseline에 똑같이 위치하고 있음
↑vertical-align:middle설정 상태
-각 요소들이 부모의 중앙 line에 맞춰 정렬되어 있음
↑vertical-align:top설정 상태
-각 요소들이 부모가 차지하는 line 박스의 상단을 기준으로 정렬되어 있음
↑vertical-align:text-top설정 상태
-부모의 실질적인 텍스트 영역에 해당하는 박스의 상단을 기준으로 정렬되어 있음
text-indent=> 텍스트 들여쓰기 설정 (+값 = 들여쓰기 | -값 = 내어쓰기)
text-transform=> 영문 텍스트의 대소문자를 바꿈 [capitalize | uppercase | lowercase]
word-break=> 텍스트가 콘텐츠박스 밖으로 넘칠 때, 어떤 식으로 줄을 바꿀지를 지정 [keep-all | break-all]
[keep-all] = 띄어쓰기(단어)를 기준으로 줄 바꿈(한,중,일 text에만 적용됨)
[break-all] = 텍스트 한 개를 기준으로 줄 바꿈(한 글자)
overflow-wrap=> 단어가 콘텐츠박스 밖으로 넘칠 때, 어떤 식으로 줄을 바꿀지를 결정
[break-word] = 텍스트가 길어서 박스영역 넘게 되면 띄어쓰기(단어)를 기준으로 줄 바꿈(영어권 text에만 적용됨)
overflow
콘텐츠가 커서 요소 안에서 내용을 전부 보여주기 힘들 때 어떤 식으로 보여줄 지를 설정
overflow: hidden=> 콘텐츠의 넘치는 부분을 잘라서 안 보이게 함
overflow: scroll=> 콘텐츠가 넘칠 경우 스크롤바를 생성
*콘텐츠 규격이 작을 경우 스크롤바는 작동하지 않으나 스크롤바가 자동으로 생성되는 문제 발생
↓↓↓
overflow: auto=> 콘텐츠의 규격을 인식 후 스크롤 바의 노출 여부를 결정
text-overflow
줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표기할 것인지를 설정
text-overflow:ellipsis => 요소 밖으로 넘칠 경우 '...' 형태로 표시
text-overflow 사용을 위한 [선행조건]
white-space:nowrap=> 줄 바꿈을 하지 않고, 한 줄에 모두 입력되도록 강제함overflow:hidden=> 박스 영역을 넘치는 경우 숨김
단위
절대단위
외부 요인의 영향을 받지 않고 절대적인 값을 지니는 단위
px=> 화면을 구성하는 가장 기본이 되는 단위pt=> 포인트, 인쇄를 위한 단위로 웹에서는 잘 사용하지 않음
상대단위
외부 요인의 영향을 받아 유동적인 값을 지니는 단위
%=> 부모 요소의 속성값에 비례하여 지정한 %(비율 값) 적용em=> 본인 요소의 font-size 속성값에 비례하여 지정한 em(비율값) 적용rem=> 최상위 HTML 요소의 font-size 속성값에 비례하여 비율값 적용vw,vh=> 요소의 규격을 viewport의 너비값, 높이값에 비례해 결정
*viewport = 브라우저 안에서 실제로 화면이 그려지는 영역
