📖학습목표
HTML
CSS
✍HTML(HyperText Markup Language)
웹을 구성하는 가장 기초적인 구성 요소로, 웹 콘텐츠의 틀이나 구조를 정의할 때 사용한다.
웹 페이지를 다른 페이지로 연결하는 링크를 "Hypertext(하이퍼텍스트)"라고 한다. 웹은 수많은 링크로 이루어져 페이지와 페이지간의 정보 전달을 가능하게 하고, 다른 사람이 만든 페이지로 링크함으로써 특정 콘텐츠를 찾는 것을 더 쉽게 한다.
HTML 태그요소
태그는 웹 페이지의 영역을 구분하거나 콘텐츠의 특성을 나타내주는 역할을 한다. HTML을 좀 더 구조적으로 표현해 개발자와 사용자 모두의 편의를 도울 수 있다.
- head
- title
- body
- header
- footer
- article
- section
- p
- div
- span
- img
- nav
- ul
- ol
- li
커다란 태그만 보자면,
head: 사용자에게는 보이지 않지만 검색 결과 노출 키워드, 페이지 설명, CSS 스타일 등 HTML 페이지의 모든 내용, metadata를 담고 있다. head는 같은 페이지나, CSS의 링크, 파비콘(favicon)을 포함한다.
title: 페이지 제목을 설정하는 태그로, 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용된다. title은 페이지가 책갈피 될 때 페이지를 설명하는 데에도 사용된다.
body: 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함된다.
👉블록 태그 vs 인라인 태그
블록 태그
블록 태그는 웹페이지 상에 블록을 만드는 요소이다. 블록 태그는 한줄 전체를 차지하여 새로운 줄을 만든다. 즉 블록 태그 이전과 이후 요소사이의 줄을 바꾼다. 블록 태그는 일반적으로 페이지의 구조적 요소를 나타낼 때 사용된다. 단락, 목록, 네비게이션 메뉴 등이 이에 해당한다.
<p>one</p><p>two</p><p>three</p>인라인 태그
인라인 태그는 새로운 줄을 만들지 않는다. 즉 인라인 태그를 작성하면 그것을 작성한 단락에만 적용된다. 인라인 태그에는 하이퍼링크를 정의하는 요소인 a, 텍스트를 강조하는 요소인 em, strong 등이 있다.
<em>four</em><em>five</em><em>six</em>✍CSS
웹 페이지의 모양이나 표현과 같은 디자인적인 요소를 다룰 때 사용한다.
웹 페이지의 콘텐츠 각각의 글꼴, 색상, 크기 및 간격을 변경하거나 가로 또는 세로로 분할할 수 있다. 애니메이션 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용된다.
h1 {
color: red;
font-size: 5em;
}속성(Attributes)
추가적인 내용을 담고 싶을 때 사용하는데, 아래 내용을 지켜야 한다.
- 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 한다.
- 속성 이름 다음엔 등호(=)가 붙는다.
- 속성 값은 열고 닫는 따옴표로 감싸야 한다.
👉CSS를 HTML문서에 적용하는 방법(3가지)
- 인라인 스타일 - 같은 줄에서 스타일을 적용
- 외부 스타일 시트 - link rel="stylesheet" href="styles.css"
- head 태그의 자식으로 위 문장을 작성하면 된다.
- HTML head 안에 포함된 style 요소 내부에 CSS를 배치한다.
- 내부 스타일 시트 - CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style태그 내에 작성
👉선택자 (Selectors)
선택자는 스타일을 적용하기 위한 대상으로, HTML 문서에 있는 태그를 지정한다.
우선 순위
- 속성 값 뒤에 !important 를 붙인 속성
- HTML에서 style을 직접 지정한 속성
- #id로 지정한 속성
- .클래스로 지정한 속성
- 태그이름 으로 지정한 속성
p { //일반 HTML태그로 css작성한 경우
color: blue;
}
.special { //class는 .클래스명으로 css작성한 경우
color: red;
}
p, li { //일반 HTML태그를 여러개를 한꺼번에 css작성한 경우
color: green;
} 