아무이유없이 새벽 5시에 잠에서 깨서 다시 잠들기도 뭐한 이유로 바로 웹부터 공부 들어가보자.
웹
콘텐츠 모델
HTML을 처음배울때는 이해하기 어렵고 이론적인 내용이라길래 나중에 복습할 때 찾아보기 편하게 부스트코스의 내용 전문을 옮겨적었다.
- Metadata
" base, link, meta, noscript, script, style, title "
Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다.
메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 내에 들어간다는 것이 특징입니다.- Flow
" a, abbr, address, map>area, article, aside, audio, b, bdo, blockquote, br, button,
canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed,
fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img,
input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,
output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,
style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr "
Flow에는 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함됩니다.
Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함됩니다.- Sectioning
" article, aside, nav, section "
Sectioning에는 문서의 구조와 관련된 요소들이 포함됩니다.
HTML5에서 새로 생긴<article>, <aside>, <nav>, <section>등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향을 주게 됩니다.- Heading
" h1, h2, h3, h4, h5, h6 "
Heading에는 각 section의 header를 정의하는 heading 태그가 포함됩니다.- Phrasing
"a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed,
i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output,
progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,
var, video, wbr"
Phrasing에는 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함됩니다.- Embedded
" audio, canvas, embed, iframe, img, math, object, svg, video "
Embedded에는 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당합니다.- Interactive
" a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
object[usemap], select, textarea, video[controls] "
Interactive에는 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당합니다.
시멘틱 마크업
이것도 마찬가지로 아직까진 이론적인 내용에 불과하지만 시멘틱 마크업이란 적절한 HTML요소를 올바르게 사용하는 것이다.
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del> 
<b>를 사용하던 <strong>을 사용하던 둘다 시각적으로 보이는 것은 같은 모습이다.
하지만 의미가 같지는 않다.
<b> 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미를 지닌다. 중요한 의미를 포함할때는 <br>대신 <strong>을 쓰는 것이 시멘틱한 마크업이다.
<s>는 단순히 중간선을 긋는 것이지만 <del>은 이전의 값을 삭제한다는 의미를 내포함으로 쇼핑몰의 할인을 예로 들었을 때 정가는 <del>로 처리해주는 것이 시멘틱한 마크업이다.
이와 비슷한 맥락으로 다른 구분하여 사용해야한다.!
HTML 공식문서에서는 아래와 같이 시멘틱 마크업의 이점을 설명한다.
- 검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다.
- 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있습니다.
- 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다.
- 개발자에게 태그 안에 채워질 데이터 유형을 제안합니다
- 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영합니다.
시멘틱 요소
<article> <-- 독립적으로 구분해 배포하거나 재사용할 수 있는 구획, 사용 예제로 뉴스 기사등이 있음 -->
<aside> <-- 별도 구획 요소, CSS와 곁들여 사이드 바 등을 만듬 -->
<figcaption> <-- 부모 figure 요소의 설명 또는 범례를 나타냄. 주석이라 이해. -->
<figure> <-- 독립적인 콘텐츠를 표현-->
<footer> <-- 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 포함. -->
<header> <-- 소개 및 탐색에 도움을 주는 콘텐츠. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함. -->
<main> <-- 문서 <body>의 주요 콘텐츠, hidden 속성 없이는 문서에 하나보다 많은 <main> 요소가 존재해선 안됨. -->
<mark> <-- 현재 맥락에 관련이 깊거나 중요해 하이라이트한 부분 -->
<nav> <-- 탐색 구획 요소, 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 표시. 자주 쓰이는 예제는 메뉴, 목차, 색인. C:\Program Files\Adobe 의 느낌으로 이해 -->
<section> <-- 일반 구획 요소 -->
<time> <-- datetime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용 -->
<details> <-- "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯, 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 표기. <details> 요소의 첫 번째 자식이 <summary> 요소라면, <summary>의 콘텐츠를 위젯의 레이블로 사용. -->
<summary> <-- 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정 --> 등이 있다.
블록&인라인
블록 레벨 요소: 한 줄에 하나의 요소를 표시 "div, h1~h6, p, ul, li, table ..."
인라인 레벨 요소: 한 줄에 여러 개의 요소 표시
"span, i, img, em, strong, a ..."
인라인 레벨 요소가 블록 레벨 요소를 자손으로 가질 수 없음.
두가지 예외 경우가 있는데 첫 번째는 <a>는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있다는 것이고, 두 번째는 <h1> ~ <h6>(headings) 요소와 <p> 요소는 블록 레벨 요소지만, 내부 요소로 Phrasing Content만 허용한다는 것이다.
CSS 시작.
Cascading Style Sheets(CSS)를 배워 보자.
대부분의 웹페이지는 html의 태그가 10여 개 밖에 되지 않지만 저마다의 특색을 지닌다. 그 이유가 바로 css에 있다.
http://www.csszengarden.com/
위의 사이트는 html 내용은 동일하고 css만 다르게 구성한 것을 볼 수 있다.
CSS 문법
h1 { color: yellow; font-size:2em; }선택자(selector) - "h1"
속성(property) - "color"
값(value) - "yellow"
선언(declaration) - "color: yellow", "font-size: 2em"
선언부(declaration block) - "{ color: yellow; font-size:2em; }"
규칙(rule set) - "h1 { color: yellow; font-size:2em; }"
css의 "속성"은 Property, html의 "속성"은 Attribute 이다.
/* */: css에서 주석을 선언하는 방법.
CSS 적용
CSS와 HTML을 연결하는 방법에는 4가지가 있다.
- Inline
Inline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법.
해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다.
이 방식은 코드의 재활용이 되지 않는다는 단점이 존재.
<div style="color:red;"> 내용 </div>- Internal
Internal은 문서에<style>을 활용한 방법. 아래의 코드로 모든<div>에 같은 스타일을 줄 수 있음.
많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 한다는 한계가 존재.
<style>은<head>내부에 들어가며<style>안에 스타일 규칙이 들어간다.
<style> div {color: red;} </style>- External
External은 외부 스타일 시트 파일을 이용한 방법.
외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식.
CSS 파일을 하나 만들고 스타일 규칙을 선언.
그다음<link>을 이용해서 CSS 파일을 연결.
<head>내부에<link>를 선언한 후 href 속성을 이용해 CSS 파일의 경로를 기재.
rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet' 라고 적어야 함.
외부 스타일 시트 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용 가능.
또한, 수정이 필요할 때도 CSS 파일을 수정하면 연결된 모든 페이지에 반영할 수 있다.
외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법.
<link rel="stylesheet" href="css/style.css">- Import
이 방식은 성능 등 여러 문제로 잘 사용하지 않음.
