2개월 동안 HTML부터 Spring까지 다시 복습하는 시간을 가져본다 !
근데 어제는 정리를 안 했기 때문에 TIL가 아닌 YIL (Yesterday I Learned)
HTML
XML
구조 언어로 인터넷에서 기존에 사용하던 HTML의 한계를 극복하고 SGML(Standard Generalized Markup Language)의 복잡함을 해결하기 위해 만들어졌다.
!DOCTYPE (문서형 선언 DTD)
문서형 선언 Document Type Definition 줄여서 DTD이다. (오 한글로 치면 ㅇㅅㅇ)
!DOCTYPE을 사용해 브라우저가 현재 HTML5 또는 HTML4 또는 XHTML로 작업할 거라는 걸 알려준다. 브라우저가 해당 문서는 웹 버전이라는 것을 인식시키게 하므로 필수적으로 넣어야 한다.
다양한 DTD가 존재하는데 그중 strict는 문법을 정확히 지켜야 한다는 것을 의미한다. 태그를 정확히 써야 하고 그러지 않으면 오류가 발생한다. 이걸 정확히 맞추기가 힘들기 때문에 중간 단계인 transitional.dtd를 보통 사용한다.
meta
meta는 여러 가지 것들을 위해 사용될 수 있는데 그중 두 개를 살펴본다.
첫 번째는 문자 코드 세트를 지정한다. 웹 브라우저에서 웹 페이지 제작 시에 사용한 문자가 깨지지 않고 인코딩 되도록 하려면 meta 요소를 이용하여 문자 코드 세트를 지정해야 한다. 이때 다국어 인코딩의 경우 utf8을 지정할 수 있으며 한글은 euc-kr을 선언한다. 근데 보통 utf8을 지정한다.
두 번째는 키워드 지정이다.
웹 페이지 홍보 수단으로 meta 요소를 이용하여 검색 키워드를 지정할 수 있다. 검색 키워드를 웹 페이지에 지정하면 검색할 때 웹 사이트가 상위에 노출되는 효과를 얻을 수 있고, meta 요소를 이용하여 검색 키워드를 지정할 때는 검색 키워드를 콤마(,)로 구분하여 선언한다.
이 외에도 subject를 이용하여 문서 제목 정보를 제공하거나 description 값으로 웹 페이지의 요약 정보 등의 문서 정보를 지정할 수 있다.
<title>
타이틀은 북마크 이름으로도 활용될 수 있기 때문에 늘 같을 수 없고 바뀌어야 한다.
<h1>
HTML과 XHTML의 권고안에서 특별히 언급하지는 않지만 그 문서의 큰 제목을 나타내므로 원칙적으로 하나의 문서에 한 번만 지정해야 한다.
h1태그는 권고안에서 섹션의 가장 큰 제목을 나타내며 여러 섹션으로 이루어진 문서에는 여러 h1 태그가 들어갈 수도 있다.
<p>
문단 태그로서 한 문단을 바꾸고 커서를 맨 앞에 위치시킨다. 여러 번 사용해도 한 번 사용한 것과 같은 효과이므로 반복 사용이 의미가 없다.
문단 요소 안에는 <a>, <img> 등과 같은 인라인 요소와 텍스트만 포함할 수 있으며 블록 요소는 사용이 불가하다.
문단 안에서 강제로 줄 바꿈 해야 하는 경우에는 <br> 요소를 사용할 수 있지만, 시각적 효과 등을 위해서 사용하는 건 좋지 않다.
<br>
HTML5에서는 <br/>의 /를 사용하지 않아도 된다. 사용해도 되긴 하지만 /는 XHTML에서 사용하는 것이다.
HTML4에서는 /를 무조건 넣지 않는 게 맞고, XHTML에서는 무조건 넣는 게 맞다.
<address>
웹 문서 아래쪽에 연락처(이메일 주소 포함) 및 제작자, 저작권(copyrights) 정보 등을 표시할 수 있고, 블록 요소는 사용 불가하다.
<a>
Transitional DTD인 경우 target(_self, _blank_, _parent, _top) 속성을 지정할 수 있다.
이 말인 즉 strict DTD인 경우 target을 사용할 수 없다는 뜻이다.
일반적으로는 거의 쓸 수 있고, 개발 때 target은 많이 쓰이는 속성이다.
<img>
img 태그에서 src 속성과 alt 속성은 필수 속성이다.
alt 속성은 이미지가 보이지 않는 환경에서 대체 텍스트를 제공하기 위한 목적으로 사용하여, 이미지와 동등한 정보를 제공해야 한다.
만약 alt 속성으로 대체 텍스트를 지정하기 어려운 경우에는 longdesc 속성을 사용하여 이미지에 대한 대체 정보를 연결할 수 있다.
<ul>
순서가 중요하지 않은 콘텐츠에 사용하기 적합하다. 계층으로 나타내기 편리하고, 목록을 만드는 데 있어 가장 빠르고 편한 방법이다.
<ol>
순서가 중요한 컨텐츠에 사용하기 적합하다.
<dl>
Definition List의 약자로, 용어 정의 리스트를 생성할 사용 된다.
단순한 정의형 목록(용어 제목, 용어 설명 등)만 아닌 주종 관계가 성립되는 콘텐츠에 광범위하게 사용할 수 있다.
<dl>
<dt>용어 제목</dt>
<dd>용어 설명</dd>
</dl>
<table>에서의 셀 병합
열이 서로 다른 셀을 병합할 때는 colspan 속성을, 행이 서로 다른 셀을 병합할 때는 rowspan 속성을 사용한다.
행 그룹 요소 <thead>, <tfoot>
행 그룹화 요소의 선언 순서는 thead, tfoot, tbody 순이고, thead 요소와 tfoot 요소는 테이블에서 한 번만 사용할 수 있다.
<caption>과 summary 속성
caption은 table의 title이다.
summary는 table에 대한 간략한 설명을 적는다.
<table summary="테이블 설명">
<caption>테이블 제목</caption>
</table>
scope
제목 셀과 내용 셀의 연관성을 의미한다.
음성 브라우저는 테이블 탐색 시 왼쪽에서 오른쪽 방향으로 셀의 내용만을 탐색하기 때문에 열과 행을 파악하거나 내용 셀의 연관성을 유추하는 것이 쉽지 않다.
이때 제목 셀에 해당하는 th 요소에 scope 속성을 사용한다.
<table>
<tr>
<th scope="col">열 제목</th>
<th scope="col">열 제목</th>
<th scope="col">열 제목</th>
</tr>
<tr>
<th scope="row">행 제목</th>
<td>내용 셀</td>
<td>내용 셀</td>
</tr>
</table>
<colgroup>, <col>
테이블의 열끼리 논리적으로 그룹화할 시에 사용한다.
<label>
명시적 label은 label 요소의 id 속성과 input 요소의 for 속성을 연결 지어 명시적으로 나타낸다.
이와 달리 암묵적 label은 label 요소에 폼 컨트롤을 포함시킨다.
<!-- 명시적 label -->
<label for="name">이름</label>
<input type="text" id="name" name="name"/>
<!-- 암묵적 label -->
<label>이름 <input type="text" name="name"/></label>
<button>
단독 태그인 input의 submit, reset, button과는 달리 여는 태그 닫는 태그가 있기 때문에 좀 더 유연한 디자인이 가능하므로 보통 button을 사용한다.
<iframe>
인라인 프레임을 이용하여 콘텐츠를 삽입하는 경우에 사용한다.
인라인 프레임은 인터넷 익스플로러의 독자적인 요소였으나 HTML 4.01 이후 정식 지원을 하기 시작했다. strict DTD와 XHTML 1.1에서는 사용할 수 없으며 transitional DTD에서만 사용 가능하다.
인라인 프레임을 사용하는 경우 접근성을 고려하여 iframe 요소에 title 속성을 함께 제공하는 것이 바람직하다.
<iframe src="" id="" name="" width="" height="" title=""></iframe>
시맨틱 웹
<article>
내용이 각기 독립적이고, 홀로 설 수 있는 내용을 담는다.
<section>
서로 관계있는 문서를 분리하는 역할을 한다.
article, section, div의 차이
내용이 독립적이고 스스로 쓰일 수 있는 내용이라면 article을 사용한다.
내용이 서로 관계가 있다면 section을 사용한다.
내용이 의미적으로 관계가 없다면 div를 사용한다. div는 오직 내용을 묶는 역할을 한다.
article은 스스로 쓰일 수 있는 내용이라는 점에서 section보다 좀 더 구체적인 의미를 지닌다.
여러 개의 section을 article로 묶을 수 있고 마찬가지로 여러 개의 article을 section으로 묶을 수 있다.
<header>
사이트 내비게이션이나 페이지에 대한 정보를 담는 태그로 페이지 상단에 위치한다.
한 문서에 여러 개의 header 요소가 있을 수 있다.
section 요소의 머리말을 담기도 하고 nav 요소를 포함할 수도 있다.
<canvas>
그래프나 게임 같은 동적인 비트맵 그래픽을 표시하는 데 사용한다.
해당 요소를 사용하기 위해서는 자바스크립트를 연동할 수 있어야 한다.
<canvas id="" width="" height="">
<img>
</canvas>
<figure>, <figcaption>
책이나 잡지에서 이미지, 차트 등이 나올 때 이를 설명하는 문구와 함께 소개한다.
figure 요소는 사진, 도표, 삽화, 오디오, 비디오, 코드 등을 담는 컨테이너 역할을 하고,
figcaption 요소는 이에 대한 설명하는 문구를 담는 역할을 한다.
figcaption은 figure 요소 안에서 선택적으로 한 번만 사용된다. (두 번 이상 사용될 수 없음)
CSS
속성(attribute) 선택자
특정 속성명이나 속성 값을 가진 요소에 적용된다.
h1[title] { background: #ffff00; }
a[href="mimah.tistory.com"] { font-size: italic; }
가상 클래스 (pseudo-classes)
상황에 따라 스타일을 적용하는 방법으로, 클래스 선언 순서에 유의해야 한다.
실제 클래스를 부여하지 않았지만 가상의 클래스를 부여한 것처럼 제어가 가능하다.
a:link { color: blue; }
a:visited { color: #ff0000; }
a:hover, a:active { background: orange; }
a:focus { background: #fcf; }
가상 요소
first-line : 첫 번째 라인
first-letter : 첫 번째 글자
before, after
:after, :before는 반드시 content라는 속성을 갖는다.
.memo:before { content: url(memo.png); }
.memo:after { content: "메모"; }<p class="memo">
::before
memo1
memo2
::after
</p>
하위 선택자
선택자 선택자 (공백 문자로 구분)
부모 요소에 포함된 모든 자식을 포함
자식 선택자
선택자 > 선택자 (왼쪽 부등호로 구분)
부모 요소 바로 뒤의 자식 요소
인접 형제 선택자
선택자 1 + 선택자 2
선택자 1 뒤에 나오는 선택자 2. 부모-자식 관계가 아닌 형제 관계를 의미한다.
형 요소(선택자 1)와 동생 요소(선택자 2)가 있는데 형 요소 뒤에 나오는 동생 요소에게 적용하는 것이다.
상속 (inherit)
부모의 속성을 받는 것이다.
p { border: 1px solid black; }
p { border: inherit; }
겹침 (cascading)
스타일 충돌은 두 개 이상의 규칙이 동일한 한 개의 요소에 적용될 때 발생한다.
가장 마지막에 지정된 스타일을 우선적으로 적용한다.
