어제까지는 배경지식을 쌓았다면 오늘부터는 본격적으로 책을 읽고 공부에 집중했다. HTML과 CSS의 경우 원래 어느 정도는 알고 있어서 책을 가볍게 훑으며 잊어버렸거나 몰랐던 내용만 한 번 더 파악했다.
HTML
<aside>
태그는 사이드 바 영역을 나타냄<storng>
, 단순히 글자만 굵게 표시할 때는 <b>
태그<em>
, 이탤릭체로 표시할 때는 <i>
<sup>
, 아래 첨자 <sub>
<ol>
태그의 type은 “1”(숫자, 기본값), “a”(영문 소문자), “A”(영문 대문자), “i”(로마 숫자 소문자), “I”(로마 숫자 대문자)
<dl>
, <dt>
(이름),<dd>
(값) 태그는 설명 목록을 만들 때 사용<table>
<caption>
태그<th>
태그로 제목 행에 셀을 만들어 진하게 표시되고 중앙에 배열<thead>
, <tbody>
, <tfoot>
태그로 표의 구조를 나누어 표시할 수 있고 구조를 지정하면 시각 장애인도 화면 낭독기를 통해 표를 쉽게 이해할 수 있음
<th>
와 <thead>
는 서로 대체될 수 없음<rowspan>
, <colspan>
<col>
, <colgroup>
으로 열을 묶고 스타일 설정할 때 활용
<caption>
태그 다음에 써야 함<object>
태그는 오디오 파일 뿐 아니라 비디오, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용<form>
<fieldset>
, <legend>
태그로 폼 요소를 그룹으로 묶음<label for="">
과 <input id="">
를 통해 두 태그가 떨어져 있어도 둘 사이를 쉽게 연결 할 수 있음CSS
캐스케이딩 스타일 시트
중요도가 가다면 스타일 적용 범위가 좁을 수록 우선순위가 높아짐
상대 크기(1em은 16px, 12pt와 같음)
16진수 색상 표현
#0000ff
처럼 두 자리씩 중복될 경우 #00f
로 줄여서 표기할 수 있음텍스트 표현
표
박스 모델
box-sizing에서 콘텐츠 영역만 너빗값 지정(content-box)이 기본값이나 border-box로 테두리까지 포함 가능
배경
linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, …]);
고급 선택자
자식 선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용
형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 인접 형제 선택자
모든 형제 요소에 적용되는 것이 혀제 선택자
속성값에 따라 원하는 요소를 선택할 때 사용하는 것이 [속성] 선택자
가상 클래스와 가상 요소
:link, :visited, :hover, :active, :focus
구조 가장 클래스
특정 위치의 자식 요소
:only-child, :first-chid, :last-child, :nth-child(n), …
가상 요소
트랜지션과 애니메이션
transition-timing-function
반응형 웹과 미디어 쿼리
뷰포트의 속성
뷰포트의 단위
미디어 쿼리
중단점: 화면 크기에 따라 서로 다른 CSS를 적용할 분기점
모바일 퍼스트 기법: 모바일을 먼저 고려하여 미디어 쿼리 작성
<link>
태그와 @import 문은 모두 외부에서 CSS 파일을 가져와 사용하는 방법
<link>
태그를 주로 사용그리드 레이아웃
웹 사이트의 레이아웃을 정할 때 사이트 전체 디자인이나 일관성을 유지하기 위해 그리드 레이아웃 사용
플렉스 박스: 수평 방향이나 수직 방향 중에 한쪽을 주축으로 정하고 박스를 배치
CSS 그리드 레이아웃: 수평과 수직 어느 방향이든 배치할 수 있음
그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 fr(fraction) 단위를 사용
JavaScript