HTML과 CSS에 대해 공부하는 시간을 가졌다.
기본적인 내용들은 이미 알고 있긴했지만 Semantic tag와 flexbox, grid에 대해 더 상세히 공부할 수 있는 시간이었다.
아래는 추가로 공부한 내용
W3S와 드림코딩 by 엘리 유튜브를 보며 정리했다..
- Semantic Tags (의미가 있는 태그)
브라우저와 개발자 모두에게 의미를 명확하게 설명하기 위한 태그
div, span과 같은 아무 의미 없는 태그와 id, class를 사용해 나타내는 것 대신에 태그로 명확하게 표현ex) <div class=“nav”> </div> <div class=“header”> </div> <div class=“footer”> </div> 대신에 <nav> </nav> <header> </header> <footer> </footer> 종류 - <article> : 반복되는, 재사용 가능한 것 - <aside> - <details> - <figcaption> - <figure> - <footer> ★ - <header> ★ - <main> ★ - <mark> - <nav> ★ - <section> - <summary> - <time>
드림코딩 by 엘리 참고
- BOX MODEL로 생각하기
-
사용자에게 보여지지 않는 BOX와 보여지는 ITEM
BOX - header, footer, nav, aside, main, section, article, div, span, form
ITEM - a, button, input, label, img, video, audio, map, canvas, table -
Block : 한 줄을 모두 차지
Inline : 자기 크기 만큼만 공간을 차지<Opening tag> Content </Closing tag> -> 이렇게 한 세트를 Element 라고 함태그 안에는 Attribute(속성)가 들어감
-
- CSS
selectors
- Universal : *
- type : Tag
- ID : #id
- Class : .class
- State : :
- Attribute : [ ]selector { property : value; } 구체적으로, 태그에 가깝게 설정할수록 우선순위가 높아짐
Selector 연습
Flexbox 연습
Grid 연습
display: block; - block 속성으로 바꿔줌
display: inline-block; - 컨텐츠 크기에 상관 없이 inline 속성으로
display: inline; - 컨텐츠 자체만을 꾸며주는 inline 속성으로
position: static; -> 기본값 -> 입력하는 값으로 이동할 수 있는 상태로 바꿔야함
-> relative, absolute, fixed, sticky
position: relative;
-> 원래 있어야하는 자리에서 상대적으로 이동
position: absolute;
-> item이 담겨있는 상자 안에서 이동
position: fixed;
-> 담겨있는 상자에서 완전히 벗어나서 이동
position: sticky;
-> 원래 있어야하는 자리에 있으면서 스크롤링을 해도 계속 그자리에 고정
- flexbox (box와 item을 자유자재로 배치)
- position, float, table의 한계를 극복
- 핵심
- container와 item에 적용할 수 있는 속성 값들이 있다
- 중심 축(수직 or 수평)과 반대축(수평 or 수직)이 있다
- container의 속성
- display: flex;
- flex-direction: row; (기본값 수평축-왼쪽에서 오른쪽)
- flex-direction: row-reverse; (오른쪽에서 왼쪽)
- flex-direction: column; (수직축-위에서 아래로)
- flex-direction: column-reverse; (아래에서 위로)
- flex-wrap: nowrap; (모두 한 줄에 표현)
- flex-wrap: wrap; (자리가 부족하면 줄 바꿈)
- flex-wrap: wrap-reverse; (반대로)
- flex-flow: row nowrap; (direction warp 을 한번에 표현)
- justify-content: flex-start; (기본값 - 왼쪽에서 오른쪽, 위에서 아래로)
- justify-content: flex-end; (순서는 유지하되 오른쪽에서 붙도록)
- justify-content: center; (가운데 정렬)
- justify-content: space-around; (박스를 둘러싸는 space를 모두 입혀줌)
- justify-content: space-evenly; (똑같은 간격을 넣어줌)
- justify-content: space-between; (왼쪽과 오른쪽 끝은 딱 붙고 중간에만 공간이 들어감)
- align-items: center; (반대축을 기준으로 가운데 정렬)
- align-items: baseline; (텍스트를 기준으로 정렬)
- (justify-content는 중심축에 대한 속성이라면 align-items는 반대축에 대하여 item을 정렬)
- align-content: (justify-content와 동일한 내용을 쓸 수 있음)
- (justify-content의 반대축에 대하여 정렬)
- item의 속성
- order: 0; (기본값)
- order: number; (order에 맞춰서 순서가 바뀜)
- flex-grow: 0; (기본값)
- flex-grow: 1; (지정한 아이템이 라인을 모두 채우기 위해 늘어남)
- flex-shrink: 0; (기본값)
- grow, shrink -> 컨테이너의 사이즈가 변할 때 아이템들이 어떻게 줄어들고 늘어날지 정해준다
- flex-basis: n%; (grow, shrink와는 다르게 일정 비율 유지)
- align-self: center; (아이템별로 정렬가능, 컨테이너에 지정된 것을 벗어날 수 있음)
- grid ( https://cssgridgarden.com/#ko )
-
display: grid;
-
grid-template-columns: 20% 20% 20% 20% 20%;
-
grid-template-rows: 20% 20% 20% 20% 20%;
-> 5*5 그리드 생성 -
grid-column-start: 1; (1번째 열)
-
grid-column-end: 5; (start번째부터 end-1번째 열까지 확장)
-
end를 먼저 써서 역으로 확장할 수도 있음 (end-1번째 부터 start번째까지)
-
값을 음수로 할 수도 있음 (end: -1이면 뒤에서 1번째, start는 -1이면 왼쪽으로 한칸가서 범위를 넘어갔다가 -2부터 맨 뒷칸에서 나타남)
-
grid-column-end: span 2; (start로 부터 2칸 지정하기)
-
grid-column-start: span 3; (end-1번 부터 앞으로 3칸 지정하기)
-
grid-column: 4 / 6; (start와 end를 한번에 지정, 4번부터 5번까지)
-
grid-column: 2 / span 3; (2번부터 3칸 지정)
-
grid-row 도 같은 방식으로 작동
-
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
-
order: 0; (기본값, 숫자를 적어 순서 지정)
-
grid-template-columns: repeat(5, 20%);
-
grid-template-columns: 20% 20% 20% 20% 20%;
-> 동일한 결과
-
%단위 말고도 px, em과 같은 길이 단위도 사용 가능
-
fr (fractional) : 일정 비율로 나눠줌
-
grid-template-columns: 1fr 5fr; (grid공간을 1:5 비율로 나눔
-
grid-template-columns: 50px repeat(3, 1fr) 50px; (양 끝은 50px씩 차지하고 가운데 남은 부분을 1:1:1 로 나누어 차지)
-
grid-template: rows / columns; (row, columns을 한번에 설정)
-
grid-template: 1fr 50px / 20% 1fr; (맨 아래 50px 차지, 맨 왼쪽 20% 차지, 총 4칸짜리 grid)
-
