가이드라인

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

  1. 깔끔한 첫인상: 사람에게 첫인상이 중요한 것처럼, 웹사이트도 첫인상이 중요합니다. 깔끔하고 전문적인 디자인으로 방문자의 눈길을 한눈에 사로잡아야 합니다.

  2. 명확한 섹션 구성: 정보를 구조화된 섹션(Section)으로 나누어 보기 쉽게 구성해야 합니다. 예를 들어 포트폴리오 웹사이트는 이력, 작품 소개, 연락처 등을 각각의 섹션으로 구성할 수 있습니다.

  3. 신뢰 확보 요소: 후기, 수상 내역, 추천서 등 신뢰성을 높이는 요소를 포함해 웹사이트 방문자의 신뢰를 얻어야 합니다.

  4. 동적인 요소: 웹사이트에 인터랙티브(Interactive)한 동적 요소(예: 애니메이션, 인터랙티브 그래픽 등)를 포함해 방문자의 참여와 관심을 유발하는 것이 좋습니다.

  5. 연락처 정보: 방문자가 웹사이트 관리자에게 연락할 수 있도록 이메일과 같은 연락처 정보나 문의하기 폼(Form)을 배치합니다.


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

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

Mission
0 / 1

CSS로 텍스트 색상 변경하기

CSS는 웹페이지의 디자인을 꾸미는 언어입니다. CSS 탭을 클릭하면

1) 아래쪽 테두리(border-bottom)로
2) 5px 두께의
3) 실선(solid)으로 구성된
4) 연두색(yellowgreen) 선을 정의하는

border-bottom: 5px solid yellowgreen;

CSS 코드를 확인하실 수 있습니다. 여기서 텍스트의 색상을 연두색이 아닌 파란색으로 변경하려면, 아래 빈칸과 같이 yellowgreen가 있던 위치에 blue를 입력하면 됩니다.

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

.border-highlight {

  border-bottom: 5px solid 
;

}

가이드라인

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말