HTML 태그
<head> 태그에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며, 이 정보들은 브라우저에 표시되지 않는다.
div : 줄바꿈, 한 줄을 차지.
span : 줄바꿈이 없는 content 컨테이너, 컨텐츠 크기만큼 차지
a 태그의 url을 새 창에서 열기
target="_blank"
input의 radio type은 하나만 선택가능(name을 같은 값으로 지정 시). (checkbox는 중복선택 가능)
시맨틱 태그 : 이름에 의미를 붙여 부르는 태그. ex) header, footer, nav, article, section, aside 등
block 박스와는 달리 inline 박스는 width, height 속성이 적용되지 않음.
overflow : 박스 크기가 콘텐츠 크기보다 작을 경우 auto값을 주면 스크롤을 생성, hidden값을 주면 초과값을 표시하지 않는다
박스 크기 측정기준
1. content-box : content의 크기를 기준으로 측정.
2. border-box : 여백과 테두리를 포함하여 박스크기 측정
크롬 개발자도구 : F12 또는 Ctrl + Shift + I
CSS 사이즈 단위
절대단위 : 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.
ex) px, pt 등
상대단위 : 특정 기준에 따라 유동적으로 바뀔 수 있는 값을 나타내는 단위이다.(%, vw, vh, rem 등)
em과 rem은 둘 다 CSS의 font-size 속성 값에 비례해 결정되지만, em은 해당 요소의 font-size 속성 값이 기준이 되고, rem은 최상위요소(html)의 font-size 속성 값이 기준이 된다.
font-family : 글꼴 속성
레이아웃
position 속성은 기본값이 static이다.
static인 상태에서는 left와 right속성을 주어도 움직이지 않음
relative : 원래 있던 자리를 기준으로 이동
absolute : 부모상자 안에서 이동
fixed : 윈도우 페이지 상에서 이동
sticky : 스크롤해도 같은 자리에 머문다
flex
속성은 container에 적용하는 속성과 내부 박스인 item에 들어가는 속성이 있다.
container 속성
flex-direction : items의 나열 방향을 설정. 기본값은 row이다.
justify-content : 중심축(수평방향)에서의 item 배치 방법을 결정해준다. 기본값은 flex-start이고, flex-end로 설정 시 item들이 오른쪽정렬된다.
align-items : 반대축(수직방향)에서의 item 배치방법 결정
flex-wrap 속성의 기본값은 nowrap이고, wrap으로 설정 시 해당 줄이 꽉 차면 자동으로 다음 라인으로 넘어감.
flex-flow 를 사용해 flex-direction과 flex-wrap 속성을 한 줄에 나열 가능.
items 속성
flex-grow : container의 크기가 커질 시 container를 채우기 위해 item의 너비(가로방향)가 늘어나는 정도를 설정하며, 기본값은 0이다.
flex-shrink : container의 크기가 커질 시 container를 채우기 위해 itme의 높이(세로방향)가 늘어나는 정도를 설정하며, 기본값은 1이다.
flex-basis : item들이 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기이다.
(width와 동시에 적용하는 경우에는 flex-basis가 우선적용 된다)
flex : 위의 세 개의 속성을 한 번에 지정할 수 있다.
align-self 속성은 align-items와 비슷하지만, 수직방향으로 item별로 정렬할 수 있음
flex의 강점 : block을 사용하면 한 줄을 다 차지해버리고, inline을 쓰면 자신의 크기만큼밖에 사용하지 못하기 때문에 생기는 디자인적인 어려움을 해결해줌
