이미 소장하고 있다면 판매해 보세요.
|
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 능숙한 [div] 사용법 _173 SECTION 5 CSS의 박스 모델 _178 SECTION 6 패딩, 보더 설정 _183 SECTION 7 두 개 이상의 박스 나열하기 _189 SECTION 8 박스의 디자인 조절하기 _197 CHAPTER 7 테이블 ... 209 SECTION 1 테이블 작성하기 _210 SECTION 2 접근성을 고려한 테이블 _220 SECTION 3 테이블의 디자인 변경 _227 CHAPTER 8 폼 ... 235 SECTION 1 폼 및 폼의 데이터 전송 구조 _236 SECTION 2 다양한 폼 부품 _239 SECTION 3 표준 폼의 예 _263 CHAPTER 9 페이지 전체 레이아웃과 내비게이션 ... 267 SECTION 1 실전 코딩을 위해 알아 두면 좋은 CSS 지식 _268 SECTION 2 1단 칼럼형 레이아웃 _275 SECTION 3 플렉스 박스를 사용한 칼럼 레이아웃 _292 SECTION 4 내비게이션 메뉴 작성하기 _304 CHAPTER 10 반응형 웹디자인 페이지 만들기 ... 317 SECTION 1 반응협 웹디자인이란? _318 SECTION 2 반응형 웹디자인 사이트 만들기 _323 |
Sukeharu Kanou,かのう すけはる,狩野 祐東
김완섭의 다른 상품
|
htts는 해당 웹페이지를 요청할 때와 응답이 돌아올 때 모두 전송 중인 데이터가 암호화되고 있다는 것을 나타낸다. 데이터가 암호화되면 인터넷상의 제3자가 혹 데이터를 가로채더라도 그 내용을 확인할 수 없다. htts는 이전까지만 해도 주로 신용카드 번호나 로그인 암호 등 노출되면 위험한 데이터를 전송할 때 사용됐다. 하지만 최근에는 보안에 대한 의식이 높아지면서 사이트 전체적으로 암호화를 하는 경우가 많아졌다. 참고로 스킴이 htt인 경우는 전송되는 데이터(브라우저와 웹서버가 주고 받는 데이터)가 암호화되지 않는다. --- p.6
HTML에는 미리 정의돼 있는 태그가 약 200여 개가 있다. 200여 개라고 하면 많다고 생각할 수도 있지만, 사실 자주 사용하는 것은 30~40개 정도다. 또한, 반드시 알아야 할 태그는 10가지 정도에 불과하다. HTML5으로 업그레이드된 후 이전 버전의 HTML에 비해 태그 수가 배 정도로 늘었지만, 실제 인터넷상에 공개돼 있는 웹사이트의 HTML을 보면 태그를 많이 사용하는 것보다 가능한 한 간단하게 작성하려고 한 것을 볼 수 있다. 많은 종류의 태그 사용법을 배우는 것보다 어떻게 문서를 구조화하는가가 더 중요하다고 볼 수 있다. --- p.30 동일 사이트 내의 다른 페이지를 링크하는 것을 ‘사이트 내 링크’ 또는 ‘내부 링크’라고 한다. 사이트 내 링크는 링크 위치를 ‘상대 경로’라 불리는 방법으로 지정할 수 있다. 상대 경로는 HTML 파일이 작업용 PC상에 있을 때도 연결된다는 이점이 있어서 웹사이트 개발을 수월하게 해준다. 이 때문에 사이트 내의 페이지 링크에는 상대 경로가 주로 사용된다. --- p.119 div]는 그 자체로는 의미가 없는 태그로 다른 요소를 그룹화해서 정리할 때 사용한다. 단, ‘여기는 메인 콘텐츠니까 [div]로 감싸자’, ‘사이드바니까 [div]로 감싸자’ 하는 식으로 최종적인 디자인을 고려해서 CSS를 적용시킬 때 사용하는 경우가 많다. 이것이 틀린 것은 아니지만, 디자인(외형)만 고려해서 [div]를 남발하면 코드에 [div] 태그가 넘쳐나게 된다. 또한, 너무 깊은 계층 구조를 지니면([div]를 몇 번이고 중첩해서 사용) HTML의 가독성이 떨어져서 관리하기가 힘들어진다. --- p.173 ‘뷰포트’란 ‘페이지가 표시되는 화면의 영역’을 의미하는 것으로서 스마트폰이라면 단말기 화면 전체를 가리키고, PC라면 브라우저 창을 가리킨다. 이 [meta] 태그는 페이지가 스마트폰 또는 태블릿에 표시될 때에만 효력을 발휘한다. --- p.276 현재 스마트폰을 지원하지 않는 웹사이트를 만드는 것은 생각할 수 없는 일이다. 전 세계 웹사이트의 접속 통계를 발표하고 있는 ‘StatCounter Global Stats’에 의하면 PC(윈도우, 맥) 접속이 약 40%이고, 스마트폰 및 태블릿(안드로이드, iOS) 접속이 약 45%로 스마트폰이 PC 접속보다 많은 것을 알 수 있다. --- p.359 |
|
이 책의 주요 내용
1장 - 웹사이트 구조와 URL의 특징 그리고 사용할 수 있는 파일 종류 및 특징 등 웹사이트 제작을 시작하기에 앞서 알아 두어야 할 기초 지식을 정리 2장 ~ 3장 - 간단한 예를 통해 HTML/CSS 코딩 흐름을 학습. 특히 언제 어떤 태그를 사용해서 페이지를 구성하면 좋은지를 개념 중심으로 설명 4장 ~ 8장 - 기능별로 HTML/CSS 코딩 예를 소개. ‘설명을 위한 예제’가 아닌 실전 기술을 도입해서 예제를 구성했으므로 학습은 물론 실무에도 적용 가능 9장 - 레이아웃에 관해 내용과 함께, 현재 주류가 되는 플렉스 박스(flex box) 기술을 사용해 전형적인 페이지 레이아웃과 내비게이션을 구현하는 방법을 상세하게 다룸 10장 - 지금까지 소개한 기술을 조합해서 실제 웹사이트를 구축해 보고, 웹사이트의 HTML/CSS 작성 흐름과 사고방식에 따른 작업 순서를 소개함. 아무리 복잡한 디자인이라도 사실은 ‘작은 기술들의 집합’으로 만들어져 있다는 것을 이해할 수 있도록 구성 |