매력있는 웹사이트의 핵심 구성 요소
-
깔끔한 첫인상: 사람에게
첫인상
이 중요한 것처럼, 웹사이트도 첫인상이 중요합니다. 깔끔하고 전문적인 디자인으로 방문자의 눈길을 한눈에 사로잡아야 합니다. -
명확한 섹션 구성: 정보를 구조화된
섹션(Section)
으로 나누어 보기 쉽게 구성해야 합니다. 예를 들어 포트폴리오 웹사이트는 이력, 작품 소개, 연락처 등을 각각의 섹션으로 구성할 수 있습니다. -
신뢰 확보 요소: 후기, 수상 내역, 추천서 등
신뢰성
을 높이는 요소를 포함해 웹사이트 방문자의 신뢰를 얻어야 합니다. -
동적인 요소: 웹사이트에 인터랙티브(Interactive)한
동적 요소
(예: 애니메이션, 인터랙티브 그래픽 등)를 포함해 방문자의 참여와 관심을 유발하는 것이 좋습니다. -
연락처 정보: 방문자가 웹사이트 관리자에게 연락할 수 있도록 이메일과 같은
연락처 정보
나 문의하기폼(Form)
을 배치합니다.
그렇다면 매력적인 웹사이트를 어떻게 코딩할 수 있을까요?
지금부터 웹사이트를 내 손으로 직접 만드는 방법을 하나씩 배워보겠습니다 👍
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 튜터
배포
디자인
업로드
수업 노트
즐겨찾기
도움말