1. 북 리뷰
Head First HTML and CSS,
처음부터 다시 배우는 HTML5 & CSS3 : 반응형 웹 표준 사이트 제작까지 (전면개
정판)
원광석
2016년 11월 29일
2. 웹의 작동 절차
사용자(클라이언트)가 웹 브라우저를 통해서 웹 서버로 접속(요청
을 보냄)
-> 웹 서버가 요청을 분석해서 가지고 있는 웹 페이지를 사용자에
게 보냄
-> 웹 서버로부터 받은 웹 페이지를 사용자의 웹 브라우저에서 해
석(파싱)한 뒤 렌더링 하여 보여줌
3. 웹 페이지의 모습
• HTML로 정의된 태그와 내용의 모음으로 이루어져 있다. <와 >가
감싸고 있는 요소가 HTML의 태그.
• CSS와 JavaScript처럼 HTML이 아닌 언어를 같이 쓸 수 있다.
HyperText Markup Language
Cascading Style Sheets
4. HTML 태그
• 여는 태그와 닫는 태그에 내용을 넣는 방식으로 활용하며 닫는 태그가 없이 단독
으로 쓰이는 빈 요소도 있다.
• 블록 요소와 인라인 요소, 그 밖의 요소로 이루어져 있다.
블록 요소의 앞, 뒤에는 줄 넘김(Line break)이 발생하고 인라인 요소는 줄 넘김 없
이 내용이 계속 이어진다.
• 일반적으로 <태그이름 속성=“속성으로 지정할 값“>태그를 적용할 내용</닫는 태
그>와 같은 형태로 이루어져 있다.
예) <a href=“top10.html”>최고의 영화</a>
5. 구조와 디자인의 분리
• HTML 3.2 이하의 스펙이 적용된 페이지에서는 HTML의 태그에서 글
꼴이나 글자색 등 디자인 요소까지 같이 작성하였다.
• 이후 CSS를 본격적으로 도입하여 HTML은 웹 페이지의 구조를 잡는
것에, CSS는 잡혀 있는 구조를 효과적으로 표현할 수 있도록 분업화
하였다.
• 구조와 디자인을 이루는 코드가 서로에 대해 영향을 주지 않게 되어
개발효율을 높이고 변경 사항에 유연하게 대처할 수 있게 되었다.
6. 스타일시트
• HTML의 <style> 요소 안 쪽에서 사용하거나 별도의 CSS 파일에
내용을 저장해서 <link> 요소로 해당 웹 페이지에 적용할 스타일
시트를 연결하여 사용할 수 있다.
• 선택할 요소 이름 { 적용할 속성: 속성값; }의 형태로 이루어져
있다.
• 예) p { color: maroon; } -> <p> 요소가 감싸고 있는 글씨의 색을
maroon으로 바꾼다.
7. 웹 표준
• 똑같은 웹 페이지를 보여주기 위해서 서로 다른 웹 브라우저의 특성
에 따라 반복작업을 하거나 핵을 작성하는 등의 낭비를 표준화를 통
해서 줄이자는 공감대 형성
• 웹을 이용하는 여러 가지 환경, 신체적인 특징을 극복하기 위해 웹 접
근성을 높이려는 시도가 이루어지고 있다.
• HTML 태그의 title이나 alt 속성 등을 이용하여 웹 접근성을 확보할 수
있다.
8. HTML5
• 구조와 디자인의 분리를 HTML 태그 수준에서 기본적으로 지원
한다.
• 플랫폼 독립적인 기능을 추가하여 웹 표준을 따를 수 있도록 했
다.
• 새롭게 추가된 태그를 통해 같은 기능을 구현하려는 수고를 줄이
고 성능을 강화할 수 있다.
예) <video>와 <audio>
