html은 웹페이지의 구조를 결정하고 css는 웹페이지의 스타일을 설정한다.
자주 쓰이는 html 태그
- div
- p
- span
div와 p는 한 줄을 차지하는 반면(block), span은 content의 크기만큼 공간을 차지한다. 줄바꿈이 일어나지 않는다. (inline)- ul, ol, li
(unorderd list, ordered list, list item)- input
- textarea
- button
- img
하나의 태그당 하나의 이미지를 삽입한다.- a
다른 페이지로 이동하는 링크를 삽입한다.
id를 이용하여 같은 페이지내에서 이동할 수도 있다.
_blank 속성을 통해서 새 창에서 링크를 띄울 수 있다.- link
외부 파일을 연결한다. rel 속성은 연결하고자 한 파일의 역할, 특징을 나타낸다.
- img나 input 태그는 다른 태그들과는 다르게 닫는 </~~> 태그가 없다.
- input의 type에는 text, radio, check box 등이 있다.
- header, main, nav, aside, footer와 같은 태그는 시맨틱 태그로 작성자에게 문서의 구조를 보기 좋게 한다.
CSS
content의 layout을 디자인한다.
- 기본적인 구조는 다음과 같다.
셀렉터 { 속성명1: 속성값1; 속성명2: 속성값2; }
- 셀렉터는 Id나 클래스, 태그를 의미한다.
셀렉터로 *를 사용하면 모든 요소를 의미한다.- Id는 # 으로 선택하며 한 문서에서 한 요소에만 사용한다.
- class는 . 으로 선택하고 동일한 기능을 하는 여러 CSS요소에 사용한다.
- CSS를 추가하는 방법은 세 가지가 있다.
- 인라인 스타일 - 같은 줄에 추가한다.
- 내부 스타일시트 - style 태그를 작성해 추가한다.
- 외부 스타일시트 - CSS파일을 link태그로 연결한다.
단위
- 절대 단위 : px, pt 등
- 상태 단위 : %, em, rem, ch, vw, vh
em : 상위 요소에 상대적인 값이다. 1em이면 상위요소와 동일한 크기를 의미한다.
rem : 브라우저 기본 글자 크기 1rem을 기준으로 한다.
vw, vh는 viewport width, viewport height를 의미한다. - 반응형 웹은 px를 기준으로 디바이스의 크기별 CSS를 달리 적용해야 한다.
자주 사용하는 CSS 속성
-
가로로 정렬 - text-align
속성값으로 left, right, center, justify가 있다. -
세로로 정렬할 때는 vertical-align을 사용한다.
이 속성은 부모 요소의 display 속성값이 tabel-cell이어야만 한다. -
텍스트 굵기 - font-weight
-
글씨 크기 - font-size
-
밑줄 가로줄 - text-decoration
-
글자 색 - color
-
배경 색 - background-color
-
자간 - letter-spacing
-
행간 - line-height
-
글꼴 - font-family
,를 통해서 fall back 글꼴을 추가할 수 있다. (사용자에게 없는 글꼴을 대비) -
background - 배경색, 이미지, psoition등의 다양한 속성을 설정 가능하다.
-
padding(안쪽여백)과 margin(바깥여백) - 순서대로 top left bottom left의 여백을 설정할 수 있다.
하나의 값만 설정시 모든 방향이 그 값으로 설정되고 두개의 값을 설정시 위아래, 왼쪽과 오른쪽의 값이 설정된다.
음수값을 설정하여 겹치거나 사라지게 만들 수도 있다. -
그밖에도 justify-content나 align-item등을 사용하여 content의 배치를 조절할 수 있다.
-
body > button 과 같이 자식 선택자를 통해서 body의 자식 중 button을 선택할 수 있다.
🙌🙌🙌🙌