디자이너에 의한 디자이너를 위한 실무코딩(HTML+CSS)

디자이너들이 개발을 공부하려는 궁극적인 목적은 직접 개발을 하고자 하는 것보다 디자인하는 데에 있어서 도움을 받기 위함입니다. UI/UX 디자이너가 개발 지식을 갖추는 것은 분명 다른 디자이너와 차별화되는 강력한 무기이며, 실무에서도 다양한 이점이 있습니다. 하지만 디자이너가 개발 지식을 제대로 배우기 위해서는 디자인을 새롭게 배우는 것만큼이나 높은 학습량이 요구됩니다.



본서는 디자이너에게 꼭 필요한 부분만 알려주는 개발 자료의 부재에서 시작됐습니다.

웹 디자이너와 프론트엔드 개발자, 두 직업을 모두 섭렵한 저자가 디자이너에게 정말 필요한 개발 지식만을 담은 이 책은,

개발 공부에 이미 지쳤었던 디자이너, 그리고 정말 실무에 필요한 코딩만을 압축해서 알고 싶은 모든 디자이너에게 단비와 같은 책이 될 것입니다.





이 책이 필요한 독자

- 평소에 개발 공부를 하고 싶었지만 어떻게 해야 할지 엄두를 못 냈던 디자이너

- 개발 공부하다가 중간에 지쳐서 포기한 경험이 있는 디자이너

- 취업에 코딩이 필수라서 반드시 공부해야만 하는 디자이너

- 회사에서 갑작스럽게 개발을 해야 하는 디자이너

- 실무에 정말 필요한 코딩만 압축해서 보고 싶은 디자이너

CHAPTER 0. 시작하기 앞서

0-1 사회는 왜 디자이너에게 개발 역량을 요구하는 걸까

0-2 이렇게 공부하세요

0-3 개발 초간단 세팅법



CHAPTER 1. HTML 훑어보기

1-1 HTML의 기본구성

1-2 부모 자식 구조

1-3 줄바꿈 〈br/〉 태그, 띄어쓰기  

1-4 페이지 이동을 위한 〈a〉 태그

1-5 이미지를 위한 〈img〉 태그

1-6 입력 폼을 위한 〈input〉, 〈button〉 태그

1-7 레이아웃을 위한 〈div〉, 〈span〉 태그



CHAPTER 2. CSS 훑어보기

2-1 CSS란 무엇인가

2-2 CSS 기본문법

2-3 선택자

2-4 기본 레이아웃 잡기 1

2-5 기본 레이아웃 잡기 2(Position)

2-6 border, border-radius, box-sizing

2-7 Background

2-8 타이포그래피

2-9 마우스 오버 애니메이션(hover, transition)

2-10 알아두면 유용한 CSS 속성들



CHAPTER 3. CSS를 이용한 반응형 이해하기

3-1 개발을 어렵게 만드는 디자인

3-2 데스크톱 - 노트북 반응형 대응하기

3-3 모바일 반응형 디자인

3-4 폰트어썸

3-5 부트스트랩



CHAPTER 4. 실전 웹페이지 코딩하기

4-1 원페이지 프로모션 사이트 만들기

4-2 플랫폼 서비스 퍼블리싱하기 1

4-3 플랫폼 서비스 퍼블리싱하기 2

4-4 비주얼 퀄리티를 높여주는 팁



CHAPTER 5. 앞으로는 이렇게 공부하세요

5-1 앞으로 어떤 공부를 하면 좋을까요

5-2 개발하면서 알아두면 좋은 사이트

5-3 크롬 개발자모드 활용하기

엄태성 선린인터넷고등학교, 아주대학교 미디어학부를 졸업하고 프리랜서 개발자 겸 디자이너로 활동하고 있다.

중고등학교 때부터 다양한 전국 웹 콘텐츠 공모전에서 다수 수상한 경력을 가지고 있으며, 최근에는 글

로벌 어워드(Awwwards, CSSDesignAwards)에서 수상 및 비헨스, Muz 등에 소개되면서 포트폴리오를

인정받고 있다.

새로운 분야를 공부하고 도전하는 것을 좋아해서 UI/UX, 모션그래픽, 프론트 엔드 개발, 광고마케팅 등

다양한 분야에서 활동했으며, 현재는 웹 개발 프로젝트를 진행하면서 개발 관련 교육을 병행하고 있다.



경력 사항

프론트엔드 개발자&웹디자인 프리랜서

가톨릭대 웹 프로그래밍 강사

서울특별시 남부여성센터 개발 강의 강사



수상 경력

AWWWARDS HM(Honarable Mention) X4

CSSDESIGNAWARDS Special Kudos X3

CSS WINNER SOTD(Site Of The Day) X2

CSS WINNER Star X1

Muzli Our Pick X2