lesson1Title

lesson2Title

lesson3Title

lesson4Title

webIntroOtChapter2Title

webIntroOtChapter1Title

# 매력있는 웹사이트의 핵심 구성 요소

일반적으로 랜딩페이지를 구성할 때는 아래와 같은 5가지 요소를 고려해야 합니다.

 

## 깔끔한 첫인상

사람에게 첫인상이 중요한 것처럼, 웹사이트도 깔끔한 첫인상이 중요합니다.

웹사이트의 `주요 컬러`와 `글꼴` 등을 신중하게 선택해서 방문자가 웹사이트의 정보를 쉽게 파악할 수 있도록 배려해야 합니다.

 

## 명확한 섹션 구성

정보를 구조화된 `섹션(Section)`으로 나누어 보기 쉽게 구성해야 합니다.

예를 들어 포트폴리오 웹사이트는 이력, 작품 소개, 연락처 등을 각각의 섹션으로 구성할 수 있습니다.

 

## 신뢰 확보 요소

사용자 후기, 수상 내역, 추천서 등 `신뢰성`을 높이는 요소를 포함해 웹사이트 방문자의 신뢰를 얻는 것이 좋습니다.

 

## 멀티미디어 콘텐츠 활용

웹사이트에 애니메이션, 비디오, 오디오와 같은 `동적 콘텐츠`를 포함해 방문자가 정보 습득에 지루함을 느끼지 않도록 합니다.

 

## 연락처 정보

방문자가 웹사이트 관리자에게 연락할 수 있도록 이메일, 전화번호와 같은 `연락처 정보`를 기재하거나, 문의하기 `폼(Form)`을 배치하는 것이 좋습니다.

 

그렇다면 매력적인 웹사이트를 어떻게 코딩할 수 있을까요?

지금부터 웹사이트를 **내 손으로 직접** 만드는 방법을 하나씩 배워보겠습니다 👍

## CSS 코딩 체험하기

CSS는 웹페이지의 디자인을 꾸미는 언어입니다. CSS 탭을 클릭하면 확인할 수 있는 `border-bottom: 5px solid yellowgreen;` CSS 코드는 아래와 같은 의미를 같습니다. 1) **border-bottom** : 아래쪽 테두리 2) **5px** : 테두리 두께는 5px 3) **solid** : 실선으로 구성된 테두리 4) **yellowgreen** : 연두색 테두리 여기서 텍스트의 색상을 연두색이 아닌 파란색으로 변경하려면, 아래 빈칸과 같이 `yellowgreen`가 있던 위치에 `blue`를 입력하면 됩니다.

빈칸에 **blue**를 입력하고 정답을 확인해 보세요! 👨🏻‍💻