본문 바로가기

추천 검색어

실시간 인기 검색어

HTML CSS 디자인 레시피

스케하루 카노우 저자(글) · JD공작소 번역
교학사 · 2018년 11월 01일
10.0 (6개의 리뷰)
집중돼요 (50%의 구매자)
  • HTML CSS 디자인 레시피 대표 이미지
    HTML CSS 디자인 레시피 대표 이미지
  • A4
    사이즈 비교
    210x297
    HTML CSS 디자인 레시피 사이즈 비교 150x211
    단위 : mm
무료배송 이벤트 소득공제
10% 25,200 28,000
적립/혜택
1,400P

기본적립

5% 적립 1,400P

추가적립

  • 5만원 이상 구매 시 추가 2,000P
  • 3만원 이상 구매 시, 등급별 2~4% 추가 최대 1,400P
  • 리뷰 작성 시, e교환권 추가 최대 300원
품절되었습니다.

해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.

패키지

북카드

키워드 Pick

키워드 Pick 안내

관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.

이 책은 15장으로 구성되어 있습니다. 1장에서는 HTML과 CSS의 기본적 사양에 대해서 소개하였습니다. 실제 웹 사이트 제작에 밑거름 HTML과 CSS를 제대로 이해하기 위해서 중요한 지식만을 골라 한눈에 알아볼 수 있도록 하였습니다.
2장부터 9장까지는 웹 제작에서 반드시 필요한 HTML과 CSS를 조합한 마크 업의 예를 소개합니다.
10장과 11장에서는 실제 웹 디자인에서 필요하고 메타 데이터의 활용 방법이나 페이지에 들어가는 요소의 구성을 소개합니다. 여러 개의 태그 및 속성을 조합해서 디자인을 만드는 갖가지 방법을 확인할 수 있습니다.
12장에서 14장에서는 웹 페이지의 레이아웃을 위한 HTML 구조와 CSS 기술을 소개합니다. 레이아웃의 수정을 할 수 있도록 실제로 웹 페이지를 만들 때의 템플릿으로 사용할 수 있습니다. 물론 샘플은 반응형 웹 디자인도 할 수 있습니다.
마지막 15장에서는 애니메이션이나 변형(트랜스폼)이라는 페이지의 연출에 사용할 수 있는 기술을 소개합니다.

작가정보

미국 샌프란시스코에서 UI 디자인 이론을 배웠으며 일본으로 귀국 후에는 회사에서 근무를 하다가 프리랜서 생활을 했습니다. 2016년에 주식회사 Studio947를 설립하였습니다. 웹 사이트나 애플리케이션의 인터페이스 디자인, 인터랙티브 콘텐츠의 개발을 하며 각종 세미나나 연수 강사로 활동 중에 있습니다.

번역 JD공작소

출판기획사인 JD공작소는 아이들에게 꿈을 심어주는 책을 만들고 있습니다. 우리의 책들이 아이들의 마음에 씨앗이 되어 미래의 꽃 한 송이, 열매 하나, 나무 한 그루가 되기를 바랍니다.
〈기획 집필도서〉
■ 거꾸로맨, 도와줘요!〈돌다리 안전동화 시리즈〉
■ 스마트월드를 탈출하라!〈돌다리 안전동화 시리즈〉
■ 지진섬에 살래? 황사섬에 살래?〈돌다리 안전동화 시리즈〉
■ 신데렐라의 진짜 소원〈돌다리 안전동화 시리즈〉
■ 우당탕탕 시끌벅적 우리 가족〈돌다리 안전동화 시리즈〉
■ HTML CSS 디자인 레시피 번역
■ 생각의 힘을 키우는 철학이야기 번역
■ 지금 뭐 하는 거야?〈자연이통통 시리즈〉
■ 어디든 갈 수 있어〈자연이통통 시리즈〉
■ 애들아 배고파〈자연이통통 시리즈〉
■ 이리 좀 나와봐〈자연이통통 시리즈〉
■ 우리 엄마 누구게〈자연이통통 시리즈〉

목차

  • Chapter 01 HTML/CSS의 기초
    001 HTML의 기초 지식
    002 웹 사이트를 구성하는 파일
    003 CSS의 기본 지식
    004 박스 모델을 이용한 CSS의 적용
    005 CSS를 적용하는 순서
    006 브라우저의 개발 툴

    Chapter 02 페이지의 기본이 되는 HTML
    007 HTML의 기본 마크 업
    008 DOCTYPE 선언을 바꿔 쓰고 싶다
    009 페이지에서 주로 사용되는 언어를 설정하고 싶다
    010 페이지의 문자 코드 세트를 설정하고 싶다
    011 페이지의 타이틀을 설정하고 싶다
    012 페이지의 개요를 작성하고 싶다
    013 페이지의 키워드를 설정하고 싶다
    014 CSS 파일을 불러오고 싶다
    015 CSS 파일의 문자 코드 세트를 지정하고 싶다
    016 CSS를 HTML에 직접 작성하고 싶다
    017 CSS를 태그에 직접 작성하고 싶다
    018 JavaScript 파일을 불러오고 싶다
    019 JavaScript를 HTML에 직접 쓰고 싶다
    020 JavaScript가 작동하지 않을 때 콘텐츠를 표시하고 싶다
    021 HTML에 주석을 달고 싶다
    022 CSS에 주석을 달고 싶다

    Chapter 03 텍스트 디자인과 테크닉
    023 단락을 마크 업하고 싶다
    024 제목을 표시하고 싶다
    025 단락 안에서 줄을 바꾸고 싶다
    026 텍스트의 일부를 강조하고 싶다
    027 텍스트의 일부를 굵은 글씨로 하고 싶다
    028 프로그램의 소스 코드를 표시하고 싶다
    029 연락처를 표시하고 싶다
    030 위첨자나 아래첨자를 표시하고 싶다
    031 정리된 텍스트를 인용하여 표시하고 싶다
    032 짧은 텍스트를 문장에서 인용하여 표시하고 싶다
    033 날짜와 시간을 표시하고 싶다
    034 텍스트 일부에 형광펜 효과를 넣고 싶다
    035 글자에 루비를 넣고 싶다
    036 줄임말을 표시하고 싶다
    037 텍스트 일부를 수정한 것으로 표시하고 싶다
    038 새로 삽입한 텍스트라는 것을 표시하고 싶다
    039 짧은 소스 코드를 표시하고 싶다
    040 툴팁을 표시하고 싶다
    041 카피라이트를 표시하고 싶다
    042 HTML에서 사용할 수 없는 기호를 표시하고 싶다043 텍스트의 색을 변경하고 싶다(16진수)
    044 텍스트의 색을 변경하고 싶다(RGB)
    045 불투명한 텍스트 색을 지정하고 싶다(RGBA)
    046 요소마다 글자 크기를 지정하고 싶다
    047 페이지 전체의 글자 크기를 상대적으로 지정하고 싶다
    048 줄간격을 넓거나 좁게 조절하고 싶다
    049 리드문을 굵은 글씨로 설정하고 싶다
    050 제목 글자를 일반적인 두께로 설정하고 싶다
    051 이탤릭으로 표시되는 요소를 일반 텍스트로 되돌리고 싶다
    052 텍스트의 정렬을 변경하고 싶다
    053 문자와 문자 사이의 간격을 넓히거나 좁히고 싶다
    054 텍스트에 글자 삭제선을 긋고 싶다
    055 좋아하는 색으로 텍스트에 형광펜 효과를 넣고 싶다
    056 단락 앞뒤에 공간을 없애고 싶다
    057 단락의 첫 줄을 왼쪽 들여쓰기 하고 싶다
    058 첫 머리 글자를 크게 하고 싶다
    059 단락의 첫 줄만 색상을 바꾸고 싶다
    060 인용 앞 뒤에 텍스트를 삽입하고 싶다
    061 텍스트 앞뒤에 기호를 삽입하고 싶다
    062 인용 부호를 자유롭게 지정하고 싶다

    Chapter 04 리스트 디자인 테크닉
    063 리스트를 표시하고 싶다
    064 글머리 기호를 번호로 표시하고 싶다
    065 글머리 기호를 1 이외의 숫자부터 시작하고 싶다
    066 ‘키워드’와 ‘설명’을 한꺼번에 표시하고 싶다
    067 ‘키워드’와 ‘설명’ 레이아웃을 변경하고 싶다
    068 리스트의 글머리 기호를 변경하고 싶다
    069 글머리 기호의 번호 매기기를 변경하고 싶다
    070 글머리 기호를 그림으로 바꾸고 싶다 ①
    071 글머리 기호를 그림으로 바꾸고 싶다 ②
    072 글머리 기호를 순위로 표현하고 싶다

    Chapter 05 링크와 그림에 대한 테크닉
    073 사이트 안에서 다른 페이지로 링크하고 싶다
    074 다른 사이트로 링크하고 싶다
    075 링크를 다른 탭에서 표시하고 싶다
    076 페이지 안에서 링크를 설정하고 싶다
    077 페이지 내 링크에서 이동한 곳의 컬러를 변화시키고 싶다
    078 전자우편 주소로 링크하고 싶다
    079 전화번호를 링크하고 싶다
    080 PDF 파일을 다운로드 시키고 싶다
    081 링크 텍스트의 스타일을 지정하고 싶다
    082 마우스를 올려놓았을 때 불투명으로 표시하고 싶다
    083 링크 아래를 점선으로 표시하고 싶다
    084 마우스를 올려 놓았을 때 배경색을 표시하고 싶다
    085 마우스를 올려 놓았을 때 테두리선을 표시하고 싶다
    086 스마트폰의 하이라이트 색을 변경하고 싶다
    087 그림을 표시하고 싶다
    088 base64의 데이터로 그림을 표시하고 싶다
    089 SVG 형식을 그림 파일로 표시하고 싶다
    090 SVG 데이터를 직접 넣고 싶다
    091 그림에 링크를 넣고 싶다
    092 그림을 불투명으로 하고 싶다

    Chapter 06 페이지 전체에 적용하는 디자인 테크닉
    093 창의 주위에 여백을 없애고 싶다
    094 페이지 전체의 배경색을 설정하고 싶다
    095 페이지 전체의 글꼴을 설정하고 싶다
    096 페이지 전체에 배경 그림을 깔고 싶다
    097 페이지 전체에 적용한 배경 그림의 위치를 고정시키고 싶다
    098 페이지 위에서 아래로 그라데이션을 넣고 싶다
    099 리셋 CSS를 적용하고 싶다
    100 노멀라이즈 CSS를 적용하고 싶다
    101 새니타이즈 CSS를 적용하고 싶다

    Chapter 07 박스 디자인 테크닉
    102 기본 박스를 작성하고 싶다
    103 기사와 섹션 박스를 작성하고 싶다
    104 그 페이지의 핵심 콘텐츠가 포함된 박스를 작성하고 싶다
    105 박스 전체를 링크하고 싶다
    106 그림의 캡션을 표시하고 싶다
    107 페이지의 일부분에 다른 HTML을 표시하고 싶다 ①
    108 페이지의 일부분에 다른 HTML을 표시하고 싶다 ②
    109 박스에 테두리를 그리고 싶다
    110 테두리와 콘텐츠 사이에 여백을 만들고 싶다
    111 박스와 박스의 거리를 설정하고 싶다
    112 제목에 밑줄을 그리고 싶다
    113 테두리로 제목을 디자인하고 싶다
    114 박스의 너비와 높이를 지정하고 싶다
    115 박스의 높이를 고정시키고 스크롤 바를 표시하고 싶다
    116 박스의 높이를 고정시키고 콘텐츠를 숨기고 싶다
    117 1줄에 들어가지 않는 텍스트를 생략하고 싶다
    118 아이콘과 텍스트의 위치를 정렬하고 싶다
    119 박스와 그림 아래의 빈 공간을 없애고 싶다
    120 박스에 배경색을 지정하고 싶다
    121 박스의 배경에 그림을 적용하고 싶다
    122 박스의 배경에 선형 그라데이션을 사용하고 싶다
    123 박스의 배경에 방사형 그라데이션을 사용하고 싶다
    124 배경 그림을 가로 방향으로 반복해서 표시하고 싶다
    125 배경 그림을 세로 방향으로 반복해서 표시하고 싶다
    126 배경 화면을 반복되지 않도록 하고 싶다
    127 배경 화면을 박스의 정 중앙에 표시하고 싶다
    128 배경 그림의 표시 위치를 수치로 지정하고 싶다
    129 배경 그림을 박스 크기에 맞게 확대·축소하고 싶다 ①
    130 배경 그림을 박스 크기에 맞게 확대·축소하고 싶다 ②
    131 여러 개의 배경 그림을 표시하고 싶다
    132 테두리를 그림으로 사용하고 싶다
    133 박스의 모서리를 둥글게 하고 싶다
    134 박스 전체를 불투명으로 만들고 싶다
    135 박스에 그림자를 넣고 싶다
    136 박스 안쪽에 그림자를 넣고 싶다

    Chapter 08 테이블 디자인 테크닉
    137 테이블의 기본 마크 업
    138 테이블에 기본적인 선을 넣고 싶다
    139 테이블의 제목 셀을 작성하고 싶다
    140 셀을 가로 방향으로 결합하고 싶다
    141 셀을 세로 방향으로 결합하고 싶다
    142 테이블의 행을 헤더, 데이터, 바닥글로 나누고 싶다
    143 테이블 위에 캡션을 넣고 싶다
    144 테이블 아래에 캡션을 넣고 싶다
    145 셀의 텍스트 정렬을 변경하고 싶다
    146 셀의 콘텐츠와 테두리 사이에 공간을 만들고 싶다
    147 테이블 각 행 아래에 선을 그리고 싶다
    148 셀 크기를 고정하고 싶다
    149 테이블 전체 너비를 지정한 크기로 고정하고 싶다
    150 셀의 너비를 똑같이 만들고 싶다
    151 테이블 전체의 배경을 설정하고 싶다
    152 제목 행에 배경을 설정하고 싶다
    153 테이블의 배경색을 행마다 다르게 표시하고 싶다
    154 마우스의 움직임에 따라 배경색을 변경하고 싶다
    155 텍스트가 줄바꿈을 하지 않도록 셀을 지정하고 싶다

    Chapter 09 폼 디자인 테크닉
    156 폼의 기본 마크 업
    157 텍스트 필드를 표시하고 싶다
    158 폼 요소에 라벨을 붙이고 싶다 ①
    159 폼 요소에 라벨을 붙이고 싶다 ②
    160 전자우편을 입력하는 텍스트 필드를 표시하고 싶다
    161 전화번호를 입력하는 텍스트 필드를 표시하고 싶다
    162 비밀번호를 입력하는 텍스트 필드를 표시하고 싶다
    163 텍스트 필드에 입력 힌트를 표시하고 싶다
    164 최초의 폼 요소를 자동으로 선택하고 싶다.
    165 필수 입력 항목을 표시하고 싶다
    166 복사는 할 수 있지만 입력은 할 수 없는 텍스트 필드를 만들고 싶다
    167 파일 업로드 기능을 사용하고 싶다
    168 라디오 버튼을 표시하고 싶다
    169 체크 박스를 표시하고 싶다
    170 풀다운 메뉴를 표시하고 싶다
    171 여러 항목을 선택할 수 있는 리스트를 표시하고 싶다
    172 풀다운 메뉴의 항목을 보기 쉽게 그룹화 하고 싶다
    173 텍스트 영역을 표시하고 싶다
    174 숨겨진 데이터를 넣고 싶다
    175 폼을 그룹으로 묶고 싶다
    176 전송 버튼을 표시하고 싶다
    177 전송 버튼을 그림으로 사용하고 싶다
    178 일반적인 추가 버튼을 작성하고 싶다
    179 텍스트 필드·텍스트 영역의 스타일을 조절하고 싶다
    180 텍스트 필드·텍스트 영역의 여백을 조절하고 싶다
    181 선택한 텍스트 필드의 컬러를 변경하고 싶다
    182 입력 내용을 체크하여 텍스트 필드에 표시하고 싶다
    183 전송 버튼의 모양을 변경하고 싶다
    184 라벨과 텍스트 필드를 옆으로 나란히 정렬시키고 싶다

    Chapter 10 메타 데이터와 외부 사이트 연결 테크닉
    185 파비콘을 설정하고 싶다
    186 인쇄용 CSS를 읽고 싶다
    187 Font Awesome을 사용하고 싶다
    188 웹 글꼴 ‘Google Fonts’를 사용하고 싶다
    189 페이지가 검색되지 않도록 하고 싶다
    190 액세스 키를 설정하고 싶다
    191 탭 키로 선택 순서를 설정하고 싶다
    192 5초 후에 다른 페이지로 이동시키고 싶다

    Chapter 11 요소 작성 테크닉
    193 제목과 부제를 표시하고 싶다
    194 글자를 키보드 모양으로 보이게 하고 싶다
    195 링크가 다른 창에서 표시될 경우 아이콘을 표시하고 싶다
    196 PDF 등 특정 파일로의 링크를 아이콘이나 배경으로 표시하고 싶다
    197 텍스트를 캡슐 모양으로 둘러싸고 싶다
    198 텍스트에 두꺼운 펜으로 그린 것과 같은 밑줄을 넣고 싶다
    199 〈button〉 태그의 스타일을 변경하고 싶다
    200 브레드크럼즈 리스트를 작성하고 싶다
    201 기사에 포함된 키워드나 태그를 표시하고 싶다
    202 아이콘과 텍스트가 상하로 정렬된 버튼을 만들고 싶다
    203 그림 좌·우측 텍스트를 나열하고 싶다
    204 그림 주위에 텍스트를 나열하고 싶다205 플롯을 해제하고 싶다 패턴 ①(clear)
    206 박스를 옆으로 나열하고 싶다(float 판)
    207 플롯을 해제하고 싶다 패턴 ②(overflow)
    208 플롯을 해제하고 싶다 패턴 ?(clearfix)
    209 박스의 위만 모서리가 둥근 모양의 버튼을 만들고 싶다
    210 인용 블록에 장식으로 큰따옴표를 표시하고 싶다
    211 세로 방향으로 내비게이션을 만들고 싶다
    212 세로 방향 내비게이션 항목에 화살표를 표시하고 싶다
    213 제목이 있는 패널 모양의 박스를 만들고 싶다
    214 탭 버튼을 작성하고 싶다
    215 페이지 네이션을 작성하고 싶다
    216 썸네일 이미지와 텍스트를 가로로 나열하고
    217 사진에 테두리를 넣고 싶다
    218 사각형 그림을 원형으로 잘라내고 싶다
    219 그림 위에 다른 그림을 겹쳐서 표시하고 싶다
    220 그림 위에 텍스트를 겹쳐쓰고 싶다
    221 배지를 겹쳐서 표시하고 싶다
    222 실제 크기와 다른 크기로 그림을 표시하고 싶다
    223 창 너비에 가득 채운 배경 그림을 표시하고 싶다 ①
    224 창 너비에 가득 채운 배경 그림을 표시하고 싶다 ②
    225 창 너비에 맞춰 변하는 Key Visual을 만들고 싶다
    226 캘린더를 표시하고 싶다
    227 검색 필드 안에 돋보기 아이콘을 표시하고 싶다
    228 텍스트 필드 옆에 전송 버튼을 배치하고 싶다
    229 풀다운 메뉴의 겉모양을 바꾸고 싶다.
    230 로딩 사인을 표시하고 싶다

    Chapter 12 내비게이션 디자인 테크닉
    231 일반적인 내비게이션의 마크 업(HTML5 판)
    232 일반적인 내비게이션의 마크 업(XHTML 판)
    233 스마트폰용 글로벌 내비게이션을 작성하고 싶다
    234 컴퓨터용 글로벌 내비게이션을 작성하고 싶다(float 판)
    235 열려 있는 페이지의 내비게이션 링크를 강조하고 싶다
    236 그림을 사용한 내비게이션을 작성하고 싶다(float 판)
    237 컴퓨터용 글로벌 내비게이션을 작성하고 싶다(flexbox 판)
    238 내비게이션 각 항목을 오른쪽 정렬로 하고 싶다(flexbox 판)
    239 내비게이션 각 항목을 가운데 정렬로 하고 싶다(flexbox 판)
    240 내비게이션 각 항목을 균등하게 배치하고 싶다 ①(flexbox 판)
    241 내비게이션 각 항목을 균등하게 배치하고 싶다 ②(flexbox 판)
    242 내비게이션 각 항목을 같은 크기로 하고 싶다 (flexbox 판)
    243 내비게이션 각 항목만 오른쪽에 배치하고 싶다 (flexbox 판)
    244 사이트나 기업의 로고를 헤더에 포함시키고 싶다
    245 헤더에 검색 폼을 붙이고 싶다

    Chapter 13 레이아웃 테크닉
    246 확대·축소하는 싱글 컬럼 레이아웃을 하고 싶다
    247 고정폭 가운데 정렬의 싱글 컬럼 레이아웃을 하고 싶다
    248 확대·축소하는 2컬럼 레이아웃을 작성하고 싶다(float 판)
    249 2컬럼 레이아웃 좌우를 교체하고 싶다(float 판)
    250 너비가 고정된 2컬럼 레이아웃을 작성하고 싶다(float 판)
    251 확대·축소하는 2컬럼 레이아웃을 작성하고 싶다(flexbox 판)
    252 2컬럼 레이아웃 좌우를 바꾸고 싶다(flexbox 판)
    253 확대·축소하는 3컬럼 레이아웃을 작성하고 싶다(float 판)
    254 너비가 고정된 3컬럼 레이아웃을 작성하고 싶다(float 판)
    255 확대·축소하는 3컬럼 레이아웃을 작성하고 싶다(flexbox 판)
    256 3컬럼 레이아웃의 위치를 바꾸고 싶다(flexbox 판)
    257 확대·축소하는 레이아웃의 최대 너비를 설정하고 싶다
    258 내비게이션을 창 위쪽에 고정시키고 싶다
    259 페이지 아래에 이벤트 블록을 표시하고 싶다
    260 사이드 바가 스크롤되지 않는 2컬럼 레이아웃을 하고 싶다
    261 바닥글의 저작권 표시와 주소를 각각 왼쪽, 오른쪽으로 정렬하고 싶다(float 판)
    262 바닥글의 저작권 표시와 주소를 각각 왼쪽, 오른쪽으로 정렬하고 싶다(flexbox 판)
    263 그림 위에 로고를 겹치고 싶다
    264 배경 그림이 스크롤되지 않도록 하고 싶다
    265 바닥글에 사이트 맵을 표시하고 싶다
    266 박스를 나란히 정렬하고 싶다(float 판)
    267 박스를 나란히 정렬하고 싶다(flexbox 판)
    268 여러 개의 박스를 나란히 정렬하고 싶다(float판)269 여러 개의 박스를 나란히 정렬하고 싶다(flexbox판)

    Chapter 14 리스 폰 시브 웹 디자인 테크닉
    270 리스 폰 시브 웹 디자인을 위한 기본 마크업
    271 화면 크기에 맞춰 CSS를 바꾸고 싶다
    272 전화번호가 연결되지 않도록 하고 싶다
    273 스마트폰용 파비콘을 설정하고 싶다
    274 스마트폰과 컴퓨터 페이지 전체의 글자 크기를 바꾸고 싶다
    275 싱글 컬럼을 2컬럼 레이아웃으로 바꾸고 싶다(float 판)
    276 싱글 컬럼을 3컬럼 레이아웃으로 바꾸고 싶다(flexbox 판)
    277 내비게이션 디자인을 바꾸고 싶다(float 판)
    278 내비게이션 디자인을 바꾸고 싶다(flexbox 판)
    279 화면이 넓을 때만 그림 옆에 텍스트가 나열된다
    280 스마트폰에서 테이블을 가로 방향 스크롤을 하고 싶다
    281 테이블의 보이는 보양을 제목+본문으로 바꾸고 싶다
    282 폼 요소를 확대·축소하고 싶다

    Chapter 15 애니메이션과 다양한 변형 테크닉
    283 구분선을 그리고 싶다
    284 구분선의 스타일을 변경하고 싶다
    285 구분선 중간에 텍스트를 표시하고 싶다
    286 구분선을 그라데이션으로 표시하고 싶다
    287 텍스트에 그림자를 넣고 싶다
    288 텍스트를 선택했을 때 하이라이트 색을 지정하고 싶다
    289 동영상 파일을 표시하고 싶다
    290 동영상을 Key Visual로 하고 싶다
    291 텍스트를 기울이고 싶다
    292 마우스를 올려놓았을 때 텍스트를 기울이고 싶다
    293 그림에 마우스를 올려놓았을 때 점점 투명하게 바꾸고 싶다
    294 그림에 마우스를 올려놓았을 때 점점 확대하고 싶다
    295 그림에 마우스를 올려놓았을 때 명도를 높이는 효과를 넣고 싶다
    296 그림에 마우스를 올려놓았을 때 세피아색 효과를 넣고 싶다
    297 그림에 마우스를 올려놓았을 때 떠오르는 효과를 넣고 싶다
    298 그림에 마우스를 올려놓았을 때 반전 효과를 넣고 싶다
    299 그림의 색이 변화하는 애니메이션을 설정하고 싶다
    300 배지가 조금 흔들리는 애니메이션을 설정하고 싶다

출판사 서평

이 책은 실제 웹 사이트 제작에서 많이 사용되는 기술을 모아 웹 페이지의 디자인을 위해 집대성한 레퍼런스입니다. ‘뛰어난 기능을 이용해 멋진 디자인으로 사이트를 꾸미고 싶다’라고 생각할 때 도움이 되는 샘플을 수록하였습니다. 웹 사이트 디자인은 모두가 달라서 아무리 많은 샘플을 준비하더라도 ‘입맛에 딱 맞는’ 샘플을 찾기가 어렵습니다. 이 책에서는 실제 웹 사이트 제작에 응용하기 쉽고 사용자가 지정하기 쉬운 샘플을 소개함과 동시에 어디를 어떻게 수정하여 응용할 수 있는지 HTML의 구조와 CSS의 구조를 자세히 해설하였습니다.
꼭 샘플의 소스 코드를 다운로드하여 동작을 확인하면서 HTML과 CSS을 수정하고 응용하기 바랍니다.

기본정보

상품정보
ISBN 9788909208215
발행(출시)일자 2018년 11월 01일
쪽수 636쪽
크기
150 * 211 * 43 mm / 1031 g
총권수 1권
원서명/저자명 HTML5&CSS3デザインレシピ集 スグに使えるテクニック300/狩野祐東

Klover

Klover 리뷰 안내
교보를 애용해 주시는 고객님들이 남겨주신 평점과 감상을 바탕으로, 다양한 정보를 전달하는 교보문고의 리뷰 서비스입니다.
1.리워드 안내
구매 후 90일 이내에 평점과 10자 이상의 리뷰 작성 시 e교환권 200원을 적립해 드립니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다.
리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 리뷰 종류별로 구매한 아이디당 한 상품에 최초 1회 작성 건들에 대해서만 제공됩니다.
판매가 1,000원 미만 도서의 경우 리워드 지급 대상에서 제외됩니다.
한달 후 리뷰
구매 후 30일~ 120일 이내에 작성된 두 번째 구매리뷰에 대해 한 달 후 리뷰로 인지하고 e교환권 100원을 추가 제공합니다.

* 강연, 공연, 여행, 동영상, 사은품, 기프트카드 상품은 지급 제외
2.운영 원칙 안내
Klover 리뷰를 통한 리뷰를 작성해 주셔서 감사합니다. 자유로운 의사 표현의 공간인 만큼 타인에 대한 배려를 부탁합니다.
일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
  • 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
  • 도서와 무관한 내용의 리뷰
  • 인신공격이나 욕설, 비속어, 혐오발언이 개재된 리뷰
  • 의성어나 의태어 등 내용의 의미가 없는 리뷰

리뷰는 1인이 중복으로 작성하실 수는 있지만, 평점계산은 가장 최근에 남긴 1건의 리뷰만 반영됩니다.
3.신고하기
다른 고객이 작성리뷰에 대해 불쾌함을 느끼는 경우 신고를 할 수 있으며, 신고 자가 일정수준 이상 누적되면 작성하신 리뷰가 노출되지 않을 수 있습니다.

구매 후 리뷰 작성 시, e교환권 200원 적립

문장수집

문장수집 안내
문장수집은 고객님들이 직접 선정한 책의 좋은 문장을 보여주는 교보문고의 새로운 서비스입니다. 마음을 두드린 문장들을 기록하고 좋은 글귀들은 "좋아요“ 하여 모아보세요. 도서 문장과 무관한 내용 등록 시 별도 통보 없이 삭제될 수 있습니다.
리워드 안내
구매 후 90일 이내에 문장수집 작성 시 e교환권 100원을 적립해드립니다.
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.

구매 후 리뷰 작성 시, e교환권 100원 적립

이 책의 첫 기록을 남겨주세요

교환/반품/품절 안내

상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

이벤트
TOP

저자 모두보기

번역

매장별 재고 및 도서위치

할인쿠폰 다운로드

  • 쿠폰은 주문결제화면에서 사용 가능합니다.
  • 다운로드한 쿠폰은 마이 > 나의 통장 에서 확인 가능합니다.
  • 도서정가제 적용 대상 상품에 대해서는 정가의 10%까지 쿠폰 할인이 가능합니다.
  • 도서정가제 적용 대상 상품에 10% 할인이 되었다면, 해당 상품에는 사용하실 수
    없습니다.

적립예정포인트 안내

  • 통합포인트 안내

    • 통합포인트는 교보문고(인터넷, 매장), 핫트랙스(인터넷, 매장), 모바일 교보문고 등 다양한 곳에서 사용하실 수 있습니다.
    • 상품 주문 시, 해당 상품의 적립률에 따라 적립 예정 포인트가 자동 합산되고 주문하신 상품이 발송완료 된 후에 자동으로 적립됩니다.
    • 단, 쿠폰 및 마일리지, 통합포인트, e교환권 사용 시 적립 예정 통합포인트가 변동될 수 있으며 주문취소나 반품시에는 적립된 통합포인트가 다시 차감됩니다.
  • 통합포인트 적립 안내

    • 통합포인트는 도서정가제 범위 내에서 적용됩니다.
    • 추가적립 및 회원 혜택은 도서정가제 대상상품(국내도서, eBook등)으로만 주문시는 해당되지 않습니다.
  • 기본적립) 상품별 적립금액

    • 온라인교보문고에서 상품 구매시 상품의 적립률에 따라 적립됩니다.
    • 단 도서정가제 적용 대상인 국내도서,eBook은 15%내에서 할인율을 제외한 금액내로 적립됩니다.
  • 추가적립) 5만원 이상 구매시 통합포인트 2천원 추가적립

    • 5만원 이상 구매시 통합포인트 2천원 적립됩니다.
    • 도서정가제 예외상품(외서,음반,DVD,잡지(일부),기프트) 2천원 이상 포함시 적립 가능합니다.
    • 주문하신 상품이 전체 품절인 경우 적립되지 않습니다.
  • 회원혜택) 3만원이상 구매시 회원등급별 2~4% 추가적립

    • 회원등급이 플래티넘, 골드, 실버 등급의 경우 추가적립 됩니다.
    • 추가적립은 실결제액 기준(쿠폰 및 마일리지, 통합포인트, e교환권 사용액 제외) 3만원 이상일 경우 적립됩니다.
    • 주문 후 취소,반품분의 통합포인트는 단품별로 회수되며, 반품으로 인해 결제잔액이 3만원 미만으로 변경될 경우 추가 통합포인트는 전액 회수될 수 있습니다.

제휴 포인트 안내

제휴 포인트 사용

  • OK CASHBAG 10원 단위사용 (사용금액 제한없음)
  • GS&POINT 최대 10만 원 사용
더보기

구매방법 별 배송안내

지역별 도착 예정일

수도권 지역

배송 일정 안내 테이블로 결제 완료 시간, 도착예정일 결제 완료 시간 컬럼의 하위로 평일 0시 ~ 12시 토요일 0시 ~ 11시 평일 12시 ~ 22시 평일 12시 ~ 24시 토요일 11시 ~ 21시 을(를) 나타낸 표입니다.
결제 완료 시간 도착예정일
평일 0시 ~ 12시

토요일 0시 ~ 11시
당일배송 오늘

당일배송 오늘
평일 12시 ~ 22시

평일 12시 ~ 24시

토요일 11시 ~ 21시
새벽배송 내일 07시 이전

내일

일요배송 일요일

수도권 외 (천안, 대전, 울산, 부산, 대구, 창원)

배송 일정 안내 테이블로 결제 완료 시간, 도착예정일 결제 완료 시간 컬럼의 하위로 월~토 0시 ~ 11시 30분 을(를) 나타낸 표입니다.
결제 완료 시간 도착예정일
월~토 0시 ~ 11시 30분
당일배송 오늘

배송 유의사항

  • 새벽배송과 일요배송은 수도권 일부 지역을 대상으로 합니다. 상품 상세페이지에서 도착 예정일을 확인해 주세요.
  • 수도권 외 지역에서 선물포장하기 또는 사은품을 포함하여 주문할 경우 당일배송 불가합니다.
  • 무통장입금 주문 후 당일 배송 가능 시간 이후 입금된 경우 당일 배송 불가합니다.
  • 새벽배송의 경우 공동 현관 출입 번호가 누락 되었거나 틀릴 경우 요청하신 방법으로 출입이 어려워, 부득이하게 공동 현관 또는 경비실 앞에 배송 될 수 있습니다.
  • 학교, 관공서, 회사 등 출입 제한 시간이 있는 곳은 당일배송, 새벽배송, 일요배송이 제공되지 않을 수 있습니다.
  • 공휴일과 겹친 토요일, 일요일은 일요일 배송에서 제외됩니다. 일요배송은 한정 수량에 한해 제공됩니다. 수량 초과 시 일반배송으로 발송되니 주문 시 도착 예정일을 확인해 주세요.
  • 주문 후 배송지 변경 시 변경된 배송지에 따라 익일 배송될 수 있습니다.
  • 수도권 외 지역의 경우 효율적인 배송을 위해 각 지역 매장에서 택배를 발송하므로, 주문 시의 부록과 상이할 수 있습니다.
  • 각 지역 매장에서 재고 부족 시 재고 확보를 위해 당일 배송이 불가할 수 있습니다.
  • 기상악화로 인한 도로 사정으로 일부 지역의 배송 지연이 발생될 수 있습니다.
  • 출고 예정일이 5일 이상인 상품의 경우(결제일로부터 7일 동안 미입고), 출판사 / 유통사 사정으로 품/절판 되어 구입이 어려울 수 있습니다. 이 경우 SMS, 메일로 알려드립니다.
  • 분철상품 주문 시 분철 작업으로 인해 기존 도착 예정일에 2일 정도 추가되며, 당일 배송, 해외 배송이 불가합니다.
  • 해외주문도서는 해외 거래처 사정에 의해 품절/지연될 수 있습니다.
  • 스페셜오더 도서나 일서 해외 주문 도서와 함께 주문 시 배송일이 이에 맞추어 지연되오니, 이점 유의해 주시기 바랍니다.

바로드림존에서 받기

  1. STEP 01
    매장 선택 후 바로드림 주문
  2. STEP 02
    준비완료 알림 시 매장 방문하기
  3. STEP 03
    바로드림존에서 주문상품 받기
  • 바로드림은 전국 교보문고 매장 및 교내서점에서 이용 가능합니다.
  • 잡지 및 일부 도서는 바로드림 이용이 불가합니다.
  • 각 매장 운영시간에 따라 바로드림 이용 시간이 달라질 수 있습니다.

수령 안내

  • 안내되는 재고수량은 서비스 운영 목적에 따라 상이할 수 있으므로 해당 매장에 문의해주시기 바랍니다.
  • 바로드림 주문 후 재고가 실시간 변동되어, 수령 예상 시간에 수령이 어려울 수 있습니다.

취소/교환/반품 안내

  • 주문 후 7일간 찾아가지 않으시면, 자동으로 결제가 취소됩니다.
  • 취소된 금액은 결제수단의 승인취소 및 예치금으로 전환됩니다.
  • 교환/반품은 수령하신 매장에서만 가능합니다.

사은품 관련 안내

  • 바로드림 서비스는 일부 1+1 도서, 경품, 사은품 등이 포함 되지 않습니다.

음반/DVD 바로드림시 유의사항

  • 음반/DVD 상품은 바로드림 주문 후 수령점 변경이 불가합니다. 주문 전 수령점을 꼭 확인해 주세요.
  • 사은품(포스터,엽서 등)은 증정되지 않습니다.
  • 커버이미지 랜덤발매 음반은 버전 선택이 불가합니다.
  • 광화문점,강남점,대구점,영등포점,잠실점은 [직접 찾아 바로드림존 가기], [바로드림존에서 받기] 로 주문시 음반 코너에서 수령확인이 가능합니다
  • 선물 받는 분의 휴대폰번호만 입력하신 후 결제하시면 받는 분 휴대폰으로 선물번호가 전달됩니다.
  • 문자를 받은 분께서는 마이 > 주문관리 > 모바일 선물내역 화면에서 선물번호와 배송지 정보를 입력하시면 선물주문이 완료되어 상품준비 및 배송이 진행됩니다.
  • 선물하기 결제하신 후 14일까지 받는 분이 선물번호를 등록하지 않으실 경우 주문은 자동취소 됩니다.
  • 또한 배송 전 상품이 품절 / 절판 될 경우 주문은 자동취소 됩니다.

바로드림 서비스 안내

  1. STEP 01
    매장 선택 후 바로드림 주문
  2. STEP 02
    준비완료 알림 시 매장 방문하기
  3. STEP 03
    바로드림존에서 주문상품 받기
  • 바로드림은 전국 교보문고 매장 및 교내서점에서 이용 가능합니다.
  • 잡지 및 일부 도서는 바로드림 이용이 불가합니다.
  • 각 매장 운영시간에 따라 바로드림 이용 시간이 달라질 수 있습니다.

수령 안내

  • 안내되는 재고수량은 서비스 운영 목적에 따라 상이할 수 있으므로 해당 매장에 문의해주시기 바랍니다.
  • 바로드림 주문 후 재고가 실시간 변동되어, 수령 예상시간에 수령이 어려울 수 있습니다.

취소/교환/반품 안내

  • 주문 후 7일간 찾아가지 않으시면, 자동으로 결제가 취소됩니다.
  • 취소된 금액은 결제수단의 승인취소 및 예치금으로 전환됩니다.
  • 교환/반품은 수령하신 매장에서만 가능합니다.

사은품 관련 안내

  • 바로드림 서비스는 일부 1+1 도서, 경품, 사은품 등이 포함되지 않습니다.

음반/DVD 바로드림시 유의사항

  • 음반/DVD 상품은 바로드림 주문 후 수령점 변경이 불가합니다. 주문 전 수령점을 꼭 확인해주세요.
  • 사은품(포스터,엽서 등)은 증정되지 않습니다.
  • 커버이미지 랜덤발매 음반은 버전 선택이 불가합니다.
  • 광화문점,강남점,대구점,영등포점,잠실점은 [직접 찾아 바로드림존 가기], [바로드림존에서 받기] 로 주문시 음반코너에서 수령확인이 가능합니다.
  1. STEP 01
    픽업박스에서 찾기 주문
  2. STEP 02
    도서준비완료 후 휴대폰으로 인증번호 전송
  3. STEP 03
    매장 방문하여 픽업박스에서 인증번호 입력 후 도서 픽업
  • 바로드림은 전국 교보문고 매장 및 교내서점에서 이용 가능합니다.
  • 잡지 및 일부 도서는 바로드림 이용이 불가합니다.
  • 각 매장 운영시간에 따라 바로드림 이용 시간이 달라질 수 있습니다.

수령 안내

  • 안내되는 재고수량은 서비스 운영 목적에 따라 상이할 수 있으므로 해당 매장에 문의해주시기 바랍니다.
  • 바로드림 주문 후 재고가 실시간 변동되어, 수령 예상시간에 수령이 어려울 수 있습니다.

취소/교환/반품 안내

  • 주문 후 7일간 찾아가지 않으시면, 자동으로 결제가 취소됩니다.
  • 취소된 금액은 결제수단의 승인취소 및 예치금으로 전환됩니다.
  • 교환/반품은 수령하신 매장에서만 가능합니다.

사은품 관련 안내

  • 바로드림 서비스는 일부 1+1 도서, 경품, 사은품 등이 포함되지 않습니다.

음반/DVD 바로드림시 유의사항

  • 음반/DVD 상품은 바로드림 주문 후 수령점 변경이 불가합니다. 주문 전 수령점을 꼭 확인해주세요.
  • 사은품(포스터,엽서 등)은 증정되지 않습니다.
  • 커버이미지 랜덤발매 음반은 버전 선택이 불가합니다.
  • 광화문점,강남점,대구점,영등포점,잠실점은 [직접 찾아 바로드림존 가기], [바로드림존에서 받기] 로 주문시 음반코너에서 수령확인이 가능합니다.

도서 소득공제 안내

  • 도서 소득공제란?

    • 2018년 7월 1일 부터 근로소득자가 신용카드 등으로 도서구입 및 공연을 관람하기 위해 사용한 금액이 추가 공제됩니다. (추가 공제한도 100만원까지 인정)
      • 총 급여 7,000만 원 이하 근로소득자 중 신용카드, 직불카드 등 사용액이 총급여의 25%가 넘는 사람에게 적용
      • 현재 ‘신용카드 등 사용금액’의 소득 공제한도는 300만 원이고 신용카드사용액의 공제율은 15%이지만, 도서·공연 사용분은 추가로 100만 원의 소득 공제한도가 인정되고 공제율은 30%로 적용
      • 시행시기 이후 도서·공연 사용액에 대해서는 “2018년 귀속 근로소득 연말 정산”시기(19.1.15~)에 국세청 홈택스 연말정산간소화 서비스 제공
  • 도서 소득공제 대상

    • 도서(내서,외서,해외주문도서), eBook(구매)
    • 도서 소득공제 대상 상품에 수반되는 국내 배송비 (해외 배송비 제외)
      • 제외상품 : 잡지 등 정기 간행물, 음반, DVD, 기프트, eBook(대여,학술논문), 사은품, 선물포장, 책 그리고 꽃
      • 상품정보의 “소득공제” 표기를 참고하시기 바랍니다.
  • 도서 소득공제 가능 결제수단

    • 카드결제 : 신용카드(개인카드에 한함)
    • 현금결제 : 예치금, 교보e캐시(충전에한함), 해피머니상품권, 컬쳐캐쉬, 기프트 카드, 실시간계좌이체, 온라인입금
    • 간편결제 : 교보페이, 네이버페이, 삼성페이, 카카오페이, PAYCO, 토스, CHAI
      • 현금결제는 현금영수증을 개인소득공제용으로 신청 시에만 도서 소득공제 됩니다.
      • 교보e캐시 도서 소득공제 금액은 교보eBook > e캐시 > 충전/사용내역에서 확인 가능합니다.
      • SKpay, 휴대폰 결제, 교보캐시는 도서 소득공제 불가
  • 부분 취소 안내

    • 대상상품+제외상품을 주문하여 신용카드 "2회 결제하기"를 선택 한 경우, 부분취소/반품 시 예치금으로 환원됩니다.

      신용카드 결제 후 예치금으로 환원 된 경우 승인취소 되지 않습니다.

  • 도서 소득공제 불가 안내

    • 법인카드로 결제 한 경우
    • 현금영수증을 사업자증빙용으로 신청 한 경우
    • 분철신청시 발생되는 분철비용

알림 신청

아래의 알림 신청 시 원하시는 소식을 받아 보실 수 있습니다.
알림신청 취소는 마이룸 > 알림신청내역에서 가능합니다.

HTML CSS 디자인 레시피
곧바로 사용할 수 있는 테크닉 300
신고

신고 사유를 선택해주세요.
신고 내용은 이용약관 및 정책에 의해 처리됩니다.

허위 신고일 경우, 신고자의 서비스 활동이 제한될 수 있으니 유의하시어
신중하게 신고해주세요.

판형알림

  • A3 [297×420mm]
  • A4 [210×297mm]
  • A5 [148×210mm]
  • A6 [105×148mm]
  • B4 [257×364mm]
  • B5 [182×257mm]
  • B6 [128×182mm]
  • 8C [8절]
  • 기타 [가로×세로]
EBS X 교보문고 고객님을 위한 5,000원 열공 혜택!
자세히 보기

해외주문양서 배송지연 안내

현재 미국 현지 눈폭풍으로 인해
해외 거래처 출고가 지연되고 있습니다.

해외주문양서 주문 시
예상 출고일보다 배송기간이 더 소요될 수 있으니
고객님의 너그러운 양해 부탁드립니다.

감사합니다.