-
-
HTML/CSS 입문 예제 중심 - HTML/CSS 기초에서 반응형 웹까지
황재호 지음 / 인포앤북 / 2020년 11월
평점 : 
HTML/CSS 기초에서 반응형 웹까지
회사에서 어도비 드림위버를 이용해 간단한 HTML 문서는 자체 제작해서 홍보용 이디엠이나 뉴스레터 제작에 사용하고 있다. 하지만 HTML 문서 구조와 CSS에 대해 잘 아는 건 아니어서 문제가 생겼을 때 바로바로 해결하지 못해 답답했는데, 예제 중심으로 HTML과 CSS를 배울 수 있는 <HTML/CSS 입문 예제 중심>이 새롭게 출간되어 관심 있게 보고 있다.
이 책은 2016년에 출간됐던 <HTML & CSS FOR BEGINNER>의 후속 버전으로, HTML과 CSS를 처음 접하는 초보자를 대상으로 다양한 예제를 통해 쉽게 HTML과 CSS의 기초를 배울 수 있도록 구성되어 있다. 총 4개의 파트 'HTML 편, CSS 편, 레이아웃 편, 반응형 웹 편'으로 나뉘어 HTML/CSS의 기초를 쌓는데 초점을 맞췄다. 또한 실제 웹 사이트 제작을 위한 웹페이지 레이아웃 기술에 대해 상세하게 소개했고, 최신 반응형 웹 기술에 대해서도 설명했다.
인터넷 검색을 할 때 많이 봤을 www는 'World Wide Web'의 약자로, 통상 웹이라고 부른다. 웹은 인터넷에 연결된 컴퓨터를 통해 전 세계 사람들이 정보를 제공하고 공유할 수 있는 사이버 공간을 말한다. 인터넷 익스플로러, 크롬, 파이어폭스, 사파리 같은 웹브라우저를 이용해 웹사이트에 구축된 수많은 콘텐츠를 이용하고 있다.
웹에 존재하는 콘텐츠들은 텍스트와 이미지로 이루어진 하이퍼텍스트(Hypertext)로 이루어져 있는데, 하이퍼텍스트로 구성된 웹페이지를 만드는 데 사용되는 컴퓨터 언어가 'HTML'이다. 이 책 첫 페이지에는 HTML에 대해 구체적으로 알아보기 전에 웹의 동작 원리와 HTML의 역할에 대해 이해할 수 있는 시간이 마련되어 있다. HTML 문서(cat.hml)와 이미지 파일(cat.jpg)이 사용자의 웹브라우저에 어떤 방식으로 전달되는지 소개했다.
코딩스쿨 서버가 보유하고 있는 cat.html 파일을 메모장으로 열어서 어떤 구조로 되어 있는지 살펴볼 수 있다. 이처럼 웹페이지가 어떤 원리로 구성되어 있는지에 대해 궁금하다면 예제를 따라 메모장에 몇 가지 HTML 코드를 입력해 봄으로써 바로바로 확인할 수 있다.
물론 웹에 존재하는 쇼핑몰, 게임, 홈페이지 등 다양한 웹 콘텐츠를 개발하기 위해서는 HTML 외에도 CSS, 자바스크립트, PHP, JSP, ASP.NET 등 다양한 프로그래밍 언어를 알아야 한다. 하지만 이 책에서는 HTML과 CSS에 초점을 맞추고 있다.
파트 1 'HTML 편'에서는 웹이란 무엇인지, 웹의 동작 원리는 어떻게 되는지, HTML 문서의 기본 구조, HTML 태그, 폼 양식과 테이블 등에 대해 배울 수 있다. 파트 2 'CSS 편'에서는 CSS의 개요부터 기본 구조, CSS 주석문, 웹폰트를 이용해 웹페이지를 멋지게 꾸미는 방법에 대해서 소개했다.
CSS를 어떻게 활용하는지에 대해 공부하고 나서는 파트 3 '웹 페이지 제작 편'을 통해 앞에서 설명한 HTML/CSS 기초를 바탕으로 실제 웹 사이트를 제작하는 방법을 배울 수 있다. 파트 4 '반응형 웹 편'에서는 최신 반응형 웹 기술을 이용해 실전에서 활용 가능한 반응형 웹 사이트를 제작하는 기법을 익힐 수 있다.
드림위버를 조금 사용해 봤기 때문에 웹페이지를 구성하는 HTML 문서의 HTML 태그에 대해서는 기초적인 내용은 이미 알고 있어서 작동 원리가 눈에 잘 들어왔다. 예를 들어, 글 제목을 넣는 <h1> ~ <h6>, 줄 바꿈 <br>, 공백 같은 특수 문자에 사용되는 그리고 이미지 <img> 같은 태그들이 웹페이지에 어떻게 적용되는지 알기 쉽게 설명되어 있다.
CSS는 'Cascading Style Sheets'의 약어로, 웹페이지에서 HTML 태그를 보조하여 웹페이지를 디자인적으로 꾸미고 페이지의 요소를 화면에 배치하는 역할을 한다. CSS를 이용하면 글자의 색상, 글꼴, 크기를 변경하고 요소에 경계선, 배경 색상, 배경 이미지 등을 삽입할 수 있다.
웹을 구성하는 HTML은 웹페이지의 구조화된 뼈대를 만드는 데 주로 사용하고, 디자인적인 요소는 CSS에서 전담한다고 생각하면 된다. CSS를 HTML 문서에 삽입하는 방법은 <style> 태그를 이용하거나 style 속성, 외부 CSS 파일을 이용하는 방법이 있는데, 이 책에서 확실하게 사용법을 익혀 두자.
<HTML/CSS 입문 예제 중심>은 HTML, CSS 기초와 반응형 웹을 공부하려는 사람, 웹 프로그래머, 웹 디자이너, 웹 퍼블리셔 지망생 등 웹과 HTML, CSS에 관심 있는 모든 사람들을 위한 책이다. 이 책에 소개된 예제 소스와 연습문제 정답은 코딩스쿨 또는 인포앤북 출판사 자료실에서 다운로드 받을 수 있다.
이 글은 인포앤북 출판사로부터 도서를 제공받아 주관적인 관점에서 살펴보고 작성했다.
* 출처 : https://blog.naver.com/twinkaka/222247353546