[데일리 과제] 내 웹사이트 html과 css를 활용해서 꾸미기

1. 서론

1.1 기존 과제 피드백

오후 수업 시작과 함께, 수강생들이 만든 레이아웃(저번에 만든거)을 선별하여 보여주셨다. 이렇게 하는게 맞는가 의문이 많이 들었는데 잘 하셨다고 말씀하시면서 내가 만든 과제물을 보여줘서 부끄럽기도 기쁘기도 하였다. (물론 다른사람들의 과제물은 스타일 적용시켜서 다들 훌륭한 결과물이었다.)

수업 중 보여주신 내 과제물...

그래서 오늘 해야되는 과제는 바로 만들어둔 레이아웃에 스타일 적용이다. 만들 당시에는 어떻게 하는지 몰랐고 추가로 만들때에는 구글과 팀원의 도움을 받아서 스타일을 적용 시켰었지만, 오후에 수업을 진행하면서 배웠기에 해당 과제를 하는데 문제가 없지 않을까란 생각을 잠시 해보았다.

2. 코드 작성

2.1 css 파일 작성

*"css의 inline style, 내부 스타일 시트가 아닌 외부 스타일 시트 방식을 사용할 것"*

<link rel="stylesheet" href="../css/style.css"/>

외부 스타일 시트(External style sheet) 방식을 이용하는 것을 권장하였기에 이를 이용하기로 하였고, css 폴더를 따로 만들어 'style.css'를 생성하였다. 모르는 것은 팀원과 구글이 있으니 어떻게든 할 수 있을거란 자신으로 일단 시작해보았다.

*"css 선택자는 id 선택자가 아닌 class 선택자를 가급적이면 많이 사용할 것"*

class 선택자에 앞서 레이아웃 테두리를 만들어 주고 싶었다. 각각의 main, footer 에 'border'를 이용하여 테두리를 만들고 나니깐 위쪽과 아래쪽 경계지역에서만 선이 두껍게 나타났다.

이를 해결하고자 body에도 border를 적용하여 테두리까지 두껍게 만들고 'background-color'도 흰색으로 지정하였으며, footer 속 글자에 대해서도 style 을 지정해 주었다.

body {
    border: 1px solid black;
    background-color: white;
}

header {
    border: 1px solid black;
}

main {
    border: 1px solid black;
}

footer{
    border: 1px solid black;
    text-align: center;
    font-size: 75%;
}

2.2 header

header 에는 별다른 내용이 들어가지 않기에 많이 신경쓴 것은 없었는데, 로고 이미지 대신 저작권과 상관없는 아이콘을 집어넣고 우측 구석에 기존에는 없던 로그인으로 가는 링크를 추가하였다.

링크에는 클릭해도 색상과 밑줄이 생기지 않도록 색상과 'text-decoration: none;' 옵션을 추가하여 작성하였다.

a {
    color: black;
    text-decoration: none;
}

.log_in_header {
    color : gray;
    font-size: 50%;
    float: right;
}

2.3 body

사실 가장 신경써야되는 부분이 많은 곳이였다. 처음 구상했을때에는 좌우 배치를 하려고 했었고, 이미지와 설명을 하나의 테두리로 묶으려고 하였기에 이를 다 반영하고 싶었다.

내부의 타이틀을 강조하는 class 를 추가하고 각각의 figure 를 좌우로 배치함과 동시에 하였으며, 각각의 포스터 이미지를 넣었다.

.title_p {
    font-size: 125%;
    font-weight: bold
}

.main_figure {
    display: inline-block;
    font-size: 75%;
}

2.3 추가작업

*"form 태그를 사용할 시에는 form의 입력폼도 채워넣을 것( 데이터를 넘겨서 처리하는 것은 할 필요 없음)"*

작업을 마치고 제출을 하려고 보니 위와 같은 내용이 있어서, 입력폼도 추가를 하기로 결심했다. header 부분에 검색할 수 있는 부분을 만들려고 코드를 추가하였다.

.search_form {
    float: right;
}

<form class="search_form">
    <input type="text" value="글자를 입력하세요.">
</form>

다른 버튼 없이 입력하는 창에서 Enter 를 누르면 바로 이동되도록 만들고 싶어, Button 없는 form 이 만들어졌는데 입력된 데이터 처리 기능은 나중에 배워서 추가하면 될거라는 생각에 넘어갔다.

3. 결론

결과물

저번에 틀만 잡았던 과제와 달리 그림도 집어넣고 class 이름도 집어넣고 이것저것 신경을 써야되는 부분이 늘어난 과제라 뭔가 재미 있었다. 더욱 많은 기능들 배워 추가한다면 (화면 크기에 따른 figure 갯수 변경 등) 더욱더 즐거운 작업이 될거 같다는 생각을 하였다.

 

해당 과제에 대한 코드는 여기서 확인해 볼 수 있다.

 

---

 

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