• 컴퓨터/IT > 프로그래밍 > 웹프로그래밍

출판사 리뷰

알기 쉬운 설명! 모바일 중심 예제! 이 책은 반응형 웹디자인이 당연한 시대에 새로운 지침서로서 자리 잡을 수 있도록 집필됐다. 특히 스마트폰 시대의 HTML/CSS 코딩에 역점을 두고 있다. HTML은 작성할 때의 ‘개념’에 중점을 두었고, CSS는 단순한 기능을 설명하는 것이 아니라 다양한 실전 기술을 다루었다. 또한, 저자의 생생한 경험을 책에 잘 녹여내었고, HTML과 CSS 기능 중에서도 실무에서 자주 사용하는 기술들을 자세하게 설명하고 있다. - 지은이의 ‘머리말’ 중에서 당신이 알던 그 예전의 HTML과 CSS가 아니다! 잘 안다고 생각했던 HTML과 CSS! 근데 과연 그럴까요? 이 책은 그런 안일함을 기분 좋게 깨주는 친절하고 상냥한 학습서랍니다! 이 책은 이론에 집중하기보다 지은이가 현장에서 겪은 실무 경험에서 우러난 생생한 노하우를 전달하며, 단순한 프로그래밍 지식뿐만 아니라 실무에서 사용되는 작업 순서나 생각 방식도 전수하는 것이 가장 큰 특징입니다. 또한, 쉬운 코드와 그림을 바탕으로 초보자도 쉽게 이해할 수 있도록 구성하였습니다. 무엇보다 단순히 태그 설명이나 CSS를 설명하는 것을 넘어, ‘이렇게 하면 페이지가 완성된다’라는, 작업의 전체 흐름을 이해하는 데 중점을 두고 집필하였으므로 이 책을 통해 자잘한 기술이 아닌, 실무에 필요한 능력을 키울 수 있을 것입니다! 이 책의 주요 내용 1장 - 웹사이트 구조와 URL의 특징 그리고 사용할 수 있는 파일 종류 및 특징 등 웹사이트 제작을 시작하기에 앞서 알아 두어야 할 기초 지식을 정리 2장 ~ 3장 - 간단한 예를 통해 HTML/CSS 코딩 흐름을 학습. 특히 언제 어떤 태그를 사용해서 페이지를 구성하면 좋은지를 개념 중심으로 설명 4장 ~ 8장 - 기능별로 HTML/CSS 코딩 예를 소개. ‘설명을 위한 예제’가 아닌 실전 기술을 도입해서 예제를 구성했으므로 학습은 물론 실무에도 적용 가능 9장 - 레이아웃에 관해 내용과 함께, 현재 주류가 되는 플렉스 박스(flex box) 기술을 사용해 전형적인 페이지 레이아웃과 내비게이션을 구현하는 방법을 상세하게 다룸 10장 - 지금까지 소개한 기술을 조합해서 실제 웹사이트를 구축해 보고, 웹사이트의 HTML/CSS 작성 흐름과 사고방식에 따른 작업 순서를 소개함. 아무리 복잡한 디자인이라도 사실은 ‘작은 기술들의 집합’으로 만들어져 있다는 것을 이해할 수 있도록 구성

알기 쉬운 설명! 모바일 중심 예제!

이 책은 반응형 웹디자인이 당연한 시대에 새로운 지침서로서 자리 잡을 수 있도록 집필됐다. 특히 스마트폰 시대의 HTML/CSS 코딩에 역점을 두고 있다. HTML은 작성할 때의 ‘개념’에 중점을 두었고, CSS는 단순한 기능을 설명하는 것이 아니라 다양한 실전 기술을 다루었다. 또한, 저자의 생생한 경험을 책에 잘 녹여내었고, HTML과 CSS 기능 중에서도 실무에서 자주 사용하는 기술들을 자세하게 설명하고 있다.

https는 해당 웹페이지를 요청할 때와 응답이 돌아올 때 모두 전송 중인 데이터가 암호화되고 있다는 것을 나타낸다. 데이터가 암호화되면 인터넷상의 제3자가 혹 데이터를 가로채더라도 그 내용을 확인할 수 없다. https는 이전까지만 해도 주로 신용카드 번호나 로그인 암호 등 노출되면 위험한 데이터를 전송할 때 사용됐다. 하지만 최근에는 보안에 대한 의식이 높아지면서 사이트 전체적으로 암호화를 하는 경우가 많아졌다. 참고로 스킴이 http인 경우는 전송되는 데이터(브라우저와 웹서버가 주고 받는 데이터)가 암호화되지 않는다. _6p

HTML에는 미리 정의돼 있는 태그가 약 200여 개가 있다. 200여 개라고 하면 많다고 생각할 수도 있지만, 사실 자주 사용하는 것은 30~40개 정도다. 또한, 반드시 알아야 할 태그는 10가지 정도에 불과하다. HTML5으로 업그레이드된 후 이전 버전의 HTML에 비해 태그 수가 배 정도로 늘었지만, 실제 인터넷상에 공개돼 있는 웹사이트의 HTML을 보면 태그를 많이 사용하는 것보다 가능한 한 간단하게 작성하려고 한 것을 볼 수 있다. 많은 종류의 태그 사용법을 배우는 것보다 어떻게 문서를 구조화하는가가 더 중요하다고 볼 수 있다. _30p

동일 사이트 내의 다른 페이지를 링크하는 것을 ‘사이트 내 링크’ 또는 ‘내부 링크’라고 한다. 사이트 내 링크는 링크 위치를 ‘상대 경로’라 불리는 방법으로 지정할 수 있다. 상대 경로는 HTML 파일이 작업용 PC상에 있을 때도 연결된다는 이점이 있어서 웹사이트 개발을 수월하게 해준다. 이 때문에 사이트 내의 페이지 링크에는 상대 경로가 주로 사용된다. _119p

div>는 그 자체로는 의미가 없는 태그로 다른 요소를 그룹화해서 정리할 때 사용한다. 단, ‘여기는 메인 콘텐츠니까

로 감싸자’, ‘사이드바니까

로 감싸자’ 하는 식으로 최종적인 디자인을 고려해서 CSS를 적용시킬 때 사용하는 경우가 많다. 이것이 틀린 것은 아니지만, 디자인(외형)만 고려해서

를 남발하면 코드에

태그가 넘쳐나게 된다. 또한, 너무 깊은 계층 구조를 지니면(

를 몇 번이고 중첩해서 사용) HTML의 가독성이 떨어져서 관리하기가 힘들어진다. _173p

‘뷰포트’란 ‘페이지가 표시되는 화면의 영역’을 의미하는 것으로서 스마트폰이라면 단말기 화면 전체를 가리키고, PC라면 브라우저 창을 가리킨다. 이 태그는 페이지가 스마트폰 또는 태블릿에 표시될 때에만 효력을 발휘한다. _276p

현재 스마트폰을 지원하지 않는 웹사이트를 만드는 것은 생각할 수 없는 일이다. 전 세계 웹사이트의 접속 통계를 발표하고 있는 ‘StatCounter Global Stats’에 의하면 PC(윈도우, 맥) 접속이 약 40%이고, 스마트폰 및 태블릿(안드로이드, iOS) 접속이 약 45%로 스마트폰이 PC 접속보다 많은 것을 알 수 있다. _359p

 

 

CHAPTER 1 웹사이트의 구조를 알자 ... 1
SECTION 1 웹사이트가 표시되는 구조 _2
SECTION 2 URL _5
SECTION 3 웹사이트에 사용되는 파일 종류 _9
SECTION 4 웹사이트의 파일 및 폴더 구조 _16
SECTION 5 웹사이트 제작 환경을 준비하자 _22

CHAPTER 2 HTML 기초 지식과 마크업 실전 예제 ... 29
SECTION 1 HTML이란? _30
SECTION 2 HTML 형식 _33
SECTION 3 HTML 문서 구조 _37
SECTION 4 마크업의 구성 방식 연습하기 _40

CHAPTER 3 CSS 기초 지식과 페이지 디자인 실전 예제 ... 55
SECTION 1 CSS 기초 지식 _56
SECTION 2 CSS 형식 _58
SECTION 3 페이지에 CSS를 적용하는 훈련 _61

CHAPTER 4 텍스트 꾸미기 ... 73
SECTION 1 제목이나 본문의 폰트 크기 조정하기 _74
SECTION 2 읽기 쉽게 행간 조절하기 _82
SECTION 3 단락에서 리드 문장을 굵은 글씨로 설정 _85
SECTION 4 폰트 설정하기 _88
SECTION 5 텍스트의 정렬 방식 변경하기 _96
SECTION 6 두 번째 행 이후를 한 글자 내린다 _99
SECTION 7 텍스트 색 변경하기 _102
SECTION 8 제목에 부제목 붙이기 _111

CHAPTER 5 링크 설정과 이미지 표시 ... 115
SECTION 1 텍스트에 링크 추가하기 _116
SECTION 2 텍스트 링크에 CSS 적용하기 _129
SECTION 3 이미지 표시하기 _139
SECTION 4 이미지 링크 걸기 _145
SECTION 5 이미지 주변에 텍스트 배치하기 _150

CHAPTER 6 박스와 정보 정리 ... 155
SECTION 1 인라인 박스와 블록 박스 _156
SECTION 2 항목 나열하기(리스트)의 마크업 _159
SECTION 3 리스트를 정보 정리에 사용하자 _162
SECTION 4 능숙한

• 
• 
• 
• 
• 
• 
• [4]
• [0]