게시판 선택 협회 소식 디자인 행사 회원 소식 회원사 소식 gallery

웹앱분과 김태광 부회장님의 신간 소개

[국내도서] 칼퇴족 김 대리는 알고 나만 모르는 HTML5 + CSS3 김태광 (지은이) | 책밥 | 2023년 4월 시각디자인을 전공하고 홍익대학교 디자인콘텐츠 대학원에서 광고디자인으로 석사학위를 받았으며 20여 년 이상의 실무 경력이 있다. 1997년 1세대 웹디자이너로 디자인을 시작하여 UI UX 디자인과 웹퍼블리셔로 영역을 확장했으며 웹디자인기능사 자격증을 취득했다. 현재는경인여자대학교에서 교수로 학생들에게 디자인을 가르치고 있다.

스크린샷 2023-04-18 오전 11.26.28.png 파일 제거하기

1681785030스크린샷 2023-04-18 오전 11.30.11.png 이미지 제거하기

<p> </p><p><span style="caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">사용도가 높은 HTML 태그와 CSS 속성을 짧고 쉽게 설명한 책이다. 개념과 용도를 설명하고 바로 이어 실습을 따라 해 기능을 익히게 했고, 색과 타이포그래피, 레이아웃 등 디자인에 필요한 내용을 다루어 감각적인 디자인도 가능하게 했다. 코딩 작업의 가독성을 높이는 설정을 하고 수시로 크롬 브라우저로 미리 보기 하니 작업능률도 높다. 기능을 모두 익히고 나면 실제로 웹사이트를 만들면서 실력을 발휘해보자! 천천히 따라 하면 누구든 원하는 웹 사이트를 만들 수 있을 것이다.<br></span> </p><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">CHAPTER 01 HTML과 CSS 준비하기</span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">01. HTML, CSS 개념 알기 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">| 01 | 웹브라우저(Web browser) </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">02. 뭘 준비하죠? </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">⦁웹브라우저의 종류와 점유율 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">⦁크롬(Chrome) 브라우저 설치하기 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">⦁개발자 도구 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">실습 _ 웹사이트 [+더보기]에서 HTML 요소와 CSS 속성과 속성값 알아보기 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">실습 _ [개발자 도구]로 색과 내용 수정해보기 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">| 01 | 편집기(Editors) </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">실습 _ 비주얼 스튜디오 코드 파일 다운로드하기 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">실습 _ 비주얼 스튜디오 코드 설치하기 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">⦁비주얼 스튜디오 코드의 인터페이스 알아보기 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">⦁편리한 확장 기능 사용하기 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">실습 _ 영문 메뉴를 한글로 교체하기 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">실습 _ HTML 파일을 실시간 미리 보기 </span><br style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px;"><p><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);">⦁코딩 속도를 높이는 기능 설정하기</span><span style="caret-color: rgb(68, 68, 68); color: rgb(68, 68, 68); font-family: malgun, "Malgun Gothic", Dotum, 돋움, sans-serif; font-size: 15px; letter-spacing: -0.3px; background-color: rgb(255, 255, 255);"> </span> </p>