반정형데이터 (1) - HTML, CSS
1. 웹에서 쓰이는 기술들
HTML, CSS, JS의 분리 (=웹표준화)
- HTML : Markup Language. 구조와 내용.
- CSS : Style sheet Language. 표현.
- JS : Programming Language. 동작.
HTML에서 Inline Style을 사용한다던지, 표현을 위한 속성을 사용한다던지, Inline Javascript를 사용한다던지 하는 행위는 하지 않는 것이 좋다.
웹표준화의 장점
- 접근성 향상
- SEO (Search Engine Optimization)
- 수정 용이
- 코드 가독성 향상
- 코드 / 데이터의 재사용성 향상
2. HTML
HTML(Hyper Text Markup Language)는 마크업으로 웹페이지의 구조를 표현하고, HTML 요소들은 태그로 표현된다. 브라우저는 이러한 HTML 태그를 보여주지는 않지만, 페이지 내용을 렌더링하는 데에 태그를 사용한다.
HTML5
- 새로 추가된 요소들
- Semantics : section, article, aside, hgroup…
- 이전에는 어떤 기능이든 div로만 했었음
- Multimedia : video, audio, embed, canvas
- Wigets : progress, meter, command, details…
- Semantics : section, article, aside, hgroup…
- 단순화된 doctype
HTML5 Content Model
- Metadata (메타데이터) : CSS 설정, script 설정, 문서간의 관계 설정 등의 정보
- base, command, link, meta, noscript, script, style, titleS
- Flow (플로우) : body 내의 요소 대부분은 플로우 컨텐츠로 분류
- Sectioning (구역) : 문서의 내용을 분류하는 구역을 생성
- article, aside, nav, section
- Heading (머리말) : 각 세션의 머리말 정의. 섹션 요소가 없는 경우 Heading이 섹션을 만들게 됨
- Phrasing (구문) : 문단의 구송요소. 구문이 모여 문단이 됨
- Embedded (임베디드) : 다른 자원(미디어, 문서, 그래픽 등)을 문서에 삽입
HTML 기본구조
<!doctype html>
<!-- 시각장애인을 위하 음성으로 읽을 때 한국어라는 뜻 -->
<html lang="ko">
<!-- head 부분은 title 말고는 화면에 표시되지 않는다. -->
<head>
<meta character="utf-8">
<title>Title</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
3. CSS
CSS(Cascading Style Sheets)는 웹페이지에서 스타일을 정의하는 표준언어이다. HTML 요소들이 나타나는 방식을 표현한다.
예시
h1 { color:blue; font-size:12px}
- 모든 h1태그(Selector)에 대해 중괄호 안의 속성들을 적용한다.
Box Model
Position
- STATIC
- RELATIVE
- ABSOLUTE
- FIXED
Z-index
드롭다운 메뉴 만들 때 사용할 수 있다.
Leave a comment