<p>2월에 읽은 책 Mana의 <a target="_blank" href="https://product.kyobobook.co.kr/detail/S000001766403">러닝스쿨! 한 권으로 끝내는 HTML+CSS 웹 디자인 입문</a>, <a target="_blank" href="https://product.kyobobook.co.kr/detail/S000001810508">완성된 웹사이트로 배우는 HTML&amp;CSS 웹 디자인</a></p>
<h2 id="heading-7ju5ioycroydto2kucdsojzsnpeg6ro87kcv">웹 사이트 제작 과정</h2>
<ol>
<li>기획<ul>
<li>주목적</li>
<li>부목적</li>
<li>타깃 설정</li>
</ul>
</li>
<li>사이트 맵 작성</li>
<li>와이어프레임</li>
<li>디자인</li>
<li>코딩</li>
<li>공개</li>
</ol>
<h2 id="heading-656c65sp7y6y7j207kea66w8iounjoutooulpouptc4ulg">랜딩페이지를 만든다면...</h2>
<ul>
<li>이미지 전체 배경<ul>
<li>고화질 이미지가 없다면?<ul>
<li>Blur</li>
<li>dots.svg 같은 것을 활용해서 점을 배경에 겹친다</li>
</ul>
</li>
</ul>
</li>
<li>아이콘 폰트</li>
<li>멋진 글꼴</li>
<li>미디어 쿼리</li>
<li>scroll-snap를 통한 표시영역</li>
</ul>
<h2 id="heading-7zmu66m0ioq1royesq">화면 구성</h2>
<ul>
<li>1단 구성<ul>
<li>스마트폰 &amp; PC 대응이 편리</li>
<li>내용 집중에 용이</li>
</ul>
</li>
<li>되도록 모바일 퍼스트</li>
</ul>
<h2 id="heading-7kkl7j2aioybusdrljtsnpdsnbjsnbtrnoa">좋은 웹 디자인이란?</h2>
<ul>
<li>아름답게 장식하는 것이 아님</li>
<li>디자인은 전달 하기 위한 수단</li>
<li>쉬운 사용</li>
</ul>
<h3 id="heading-7j2066w8ioycho2vncdrsknslyg">이를 위한 방안</h3>
<ul>
<li>사용성 좋게</li>
<li>보기 좋게<ul>
<li>색</li>
<li>중요하게 보이고 싶은 것</li>
<li>레이아웃 통일감</li>
</ul>
</li>
<li>결론 앞에</li>
<li>전문용어 사용말 것</li>
<li>간략정리</li>
<li>예상 가능하게</li>
<li>빠른 동작</li>
<li>일목요연하게</li>
<li>Z법칙, F법칙 의식</li>
</ul>


2월에 읽은 책 Mana의 [러닝스쿨! 한 권으로 끝내는 HTML+CSS 웹 디자인 입문](https://product.kyobobook.co.kr/detail/S000001766403), [완성된 웹사이트로 배우는 HTML&CSS 웹 디자인](https://product.kyobobook.co.kr/detail/S000001810508)

## 웹 사이트 제작 과정

1. 기획
   - 주목적
   - 부목적
   - 타깃 설정
2. 사이트 맵 작성
3. 와이어프레임
4. 디자인
5. 코딩
6. 공개

## 랜딩페이지를 만든다면...

- 이미지 전체 배경
  - 고화질 이미지가 없다면?
    - Blur
    - dots.svg 같은 것을 활용해서 점을 배경에 겹친다
- 아이콘 폰트
- 멋진 글꼴
- 미디어 쿼리
- scroll-snap를 통한 표시영역

## 화면 구성

- 1단 구성
  - 스마트폰 & PC 대응이 편리
  - 내용 집중에 용이
- 되도록 모바일 퍼스트

## 좋은 웹 디자인이란?

- 아름답게 장식하는 것이 아님
- 디자인은 전달 하기 위한 수단
- 쉬운 사용

### 이를 위한 방안

- 사용성 좋게
- 보기 좋게
  - 색
  - 중요하게 보이고 싶은 것
  - 레이아웃 통일감
- 결론 앞에
- 전문용어 사용말 것
- 간략정리
- 예상 가능하게
- 빠른 동작
- 일목요연하게
- Z법칙, F법칙 의식


0w0

0w0

Mana의 HTML과 CSS, 그리고 웹 디자인

웹 사이트 제작 과정

랜딩페이지를 만든다면...

화면 구성

좋은 웹 디자인이란?

이를 위한 방안