책 한눈에 보기
| 항목 | 내용 |
|---|---|
| 도서명 | HTML5+CSS3 웹 표준의 정석 |
| 저자 | 고경희 |
| 키워드 | HTML5, CSS3, 웹표준, 반응형웹, 웹디자인, 프론트엔드, 웹개발 |
“콘텐츠와 디자인, 두 축이 만나야 웹은 완성된다.”
1. HTML 문서의 기본구조
핵심 포인트
HTML의 기본 틀은 문서 구조와 의미를 명확히 전달하는 토대
<!doctype html>선언은 현재 문서가 HTML5로 작성되었음을 명시하여 브라우저가 표준 모드로 렌더링하도록 함.<html> ~ </html>태그는 웹 문서의 시작과 끝을 나타내며, HTML 코드 전체를 감싸는 최상위 요소임.<head> ~ </head>안에는 웹 문서를 해석하는 데 필요한 메타데이터, 스타일, 스크립트, 문서 정보 등을 포함함.<body> ~ </body>영역은 브라우저 화면에 실제 표시될 콘텐츠(텍스트, 이미지, 영상 등)를 담음.- 기본 구조를 명확히 이해하면 웹 접근성과 유지보수성이 높아짐.
2. HTML 태그
핵심 포인트
태그는 콘텐츠의 의미와 역할을 정의하는 언어
<title>태그는 문서 제목을 지정하며<head>내부에 작성, 브라우저 탭과 검색 엔진에 표시됨.<meta>태그는 문자 인코딩, 페이지 설명, 키워드 등 다양한 메타데이터를 설정하며 SEO에도 영향을 줌.<table>,<ul>,<ol>등 구조를 만드는 태그로 표, 목록, 콘텐츠 구성을 구현할 수 있음.- 태그는 블록 요소와 인라인 요소로 구분되며, 서로 중첩 가능해 복합적인 레이아웃 제작이 가능함.
3. 웹 호스팅 서비스
핵심 포인트
웹 호스팅은 콘텐츠를 세상과 연결하는 창구
- 로컬 환경에서 작성한 HTML/CSS 파일을 외부 사용자가 접근하려면 서버에 업로드해야 함.
- 웹 호스팅 서비스는 이러한 서버 공간을 임대하며, 사용자는 FTP(File Transfer Protocol) 프로그램을 통해 업로드/다운로드 가능.
- FTP 서버에 접속 후 파일을 전송하면, 해당 URL로 접속해 브라우저에서 결과를 확인할 수 있음.
- 안정적인 서비스 제공을 위해 서버 속도, 트래픽 제한, 백업 여부 등을 고려해야 함.
4. 이미지 파일
핵심 포인트
이미지 태그는 시각적 콘텐츠를 전달하는 핵심 도구
<img src="경로" [속성="값"]>형태로 작성되며,src속성은 이미지 파일의 경로를 지정함.- 이미지를 다른 환경에서도 볼 수 있도록 FTP 서버에 업로드해야 함.
<figcaption>태그로 이미지에 캡션을 추가하면 시각적 설명을 제공할 수 있음.<alt>속성은 이미지 로딩 실패 시 대체 텍스트를 제공하여 웹 접근성을 향상시킴.- JPEG는 복잡한 색상 표현, GIF는 단색·로고에 적합.
5. CSS
핵심 포인트
HTML의 뼈대에 디자인을 입히는 것이 CSS의 역할
- HTML은 콘텐츠 구조를, CSS는 시각적 표현을 담당해 역할이 명확히 분리됨.
- 콘텐츠와 디자인을 분리하면 유지보수가 용이하고 다양한 기기에 대응 가능.
- CSS 구문:
선택자 { 속성: 값; }형태로 작성되며, 내부/외부 스타일 시트를 통해 적용 가능. em단위는 부모 요소 폰트를 기준으로 크기를 조절,font속성은 여러 글꼴 속성을 한 줄에 지정 가능.- 레이아웃 배치는
float와position속성으로 제어 가능.
6. CSS3
핵심 포인트
CSS3는 웹 표현력을 한층 끌어올린다
- HTML5의 발전과 함께 CSS3도 진화, 애니메이션과 트랜지션으로 인터랙티브한 화면 구현 가능.
- 브라우저 접두사(
-webkit-,-moz-등)를 자동 처리해주는-prefix-free스크립트를 활용하면 호환성 작업이 편리해짐. - CSS3는 지속적으로 표준이 개선·추가되고 있어 최신 기술 습득이 필요함.
- 애니메이션을 활용하면 사용자 경험(UX)을 향상시키는 능동적인 웹 페이지 제작이 가능.
💡 Quick Insight
- HTML은 의미와 구조, CSS는 표현과 디자인을 맡으며 두 기술은 상호 보완적 관계를 가짐.
- 웹 접근성을 위해 시맨틱 태그와 대체 텍스트 활용이 필수.
- 최신 CSS3 기능과 호환성 고려는 현대 웹 개발의 기본 역량.
마무리 생각
이 책은 HTML과 CSS의 기본기를 체계적으로 정리할 수 있게 해준다. 단순한 태그 나열이 아니라, 구조와 스타일의 분리, 웹 호스팅과 접근성, 그리고 CSS3의 최신 기능까지 폭넓게 다루며 실무에서도 바로 적용 가능한 내용이 많았다. 과거 경험을 복습하며 기본기를 다시 다지는 계기가 되었고, 웹 표준의 중요성을 다시금 느낄 수 있었다.
'도서리뷰 > 전공' 카테고리의 다른 글
| IT 엔지니어를 위한 네트워크 입문서 — 『IT 엔지니어를 위한 네트워크 입문』 (0) | 2025.09.07 |
|---|---|
| 폭주하는 ‘가비지컬렉터’를 막고 메모리 누수의 위험에서 IT 세계를 구하라 — 『IT 세계의 괴물들』 (3) | 2025.08.16 |
| DB를 효율적이고 편리하게 관리하는 방법 — 『Head First SQL』 (5) | 2025.08.16 |
| 짜릿한 PHP와 MySQL의 연계 — 『Head First PHP&MySQL』 (2) | 2025.08.15 |
| HTML의 바른 이해와 XHTML이란 무엇인가 — 『Head First HTML & XHTML With CSS』 (2) | 2025.08.15 |