[데일리 과제] 나만의 웹사이트 꾸미기 2

과제 

1. 내 웹사이트의 메인페이지의 레이아웃을 html과 css를 활용해서 꾸미기 2

오늘 CSS에서 Font와 Box, Link, Text 속성에 대해서 배우는 시간을 가졌다. 저번 시간에 제출한 HTML 파일에 오늘 배운것들을 이용하여, 추가로 작업하려고 한다.

작업을 하면서, css 파일에서 겹치는 부분들에 대해서 그룹 선택자를 이용하여 코드를 정리해 주는 작업도 함께 진행하기로 했다.

Font 변경 & Link

폰트는 눈누 LINE Seed를 이용하여, 홈페이지의 Font를 변경하였으며, 구글에서 찾은 정보를 바탕으로 클릭해도 검은색과 밑줄이 안나오게 만들었던 Link에 Hover 기능을 추가하여 좀 더 링크처럼 느껴지도록 변경하고자 하였다.

@font-face {
    font-family: 'LINESeedKR-Bd';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

body {
    background-color: white;
    font-family: 'LINESeedKR-Bd'
}

a:hover { color: rgb(115, 115, 115); }

Box model

기존에 작업하던 main_figure에 margin 5px, padding 10px, border 등을 지정하여 가독성을 높이고, 새롭게 article에 margin과 border에 값을 주어 글자와 테두리가 딱 달라붙는 모습을 수정하며, 직관성을 높이기 위해 일단은 테두리를 추가해 두었다.

.main_figure {
    display: inline-block;
    font-size: 75%;
    margin: 5px;
    padding : 10px;
    border: 1px solid black;
}

.main_box {
    border: 1px solid black;
    margin: 20px;
    padding: 5px;
}

결과

추가적으로 배운 CSS 기능들을 이용하여 디자인을 수정하는 작업을 진행하였는데, 하나를 수정하니 나머지 부분도 수정하고 싶은 생각이 드는 그런 작업이였다. 그래도 막상 이것 저것 적용하면서, 홈페이지가 이쁘게 변하는걸 보니 기분이 좋다. 해당 과제에 대한 코드는 여기서 확인해 볼 수 있다.

 

---

 

본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 <AI 서비스 완성! AI+웹개발 취업캠프 - 프론트엔드&백엔드> 과정 학습/프로젝트/과제 기록으로 작성 되었습니다.