4. 실습 - 홈페이지 클로닝하기 (2)

0. 목차

1. 실습 개요

2. 새로 배운 것

    2-1. 백그라운드 이미지

    2-2. a:hover

3. 에러 기록

    3-1. 부모요소와 자식요소의 size 상속

    3-2. 화면 축소 시의 레이아웃 깨짐

 

 

1. 실습 개요

따라 만들 전체 페이지! (한거 아니고 원래 학원 홈페이지임)

 

 

이걸 html로 나누면 크게 이렇게 된다

 

 

예전에 설계를 할 때 부품표를 만들던 걸 참고해서 전체 구성을 정리해봤다. 웹페이지에도 이런 식으로 나누는 걸 잘 쓰는지는 모르겠지만 이렇게 화면만 보고 한번 정리를 해보면 초보일 때 html 구조를 짜는 것도 좀 익숙해지고 CSS에서 어떤 속성을 어떻게 배치할 지가 조금 머릿속에서 정리가 되어 나는 이 방식이 좋은 것 같다.

그리고 같은 계층인 엘리먼트들이 한눈에 보여서 혹시 결과물에 오류가 있을 때 어디를 수정하면 좋을 지도 좀 더 쉽게 알 수 있었다.

 

 

앞서 이틀간의 수업에서 했던 부분 외에 남은 부분들을 팀을 짜서 오늘 수업시간 내에 끝내는 것이 목표였기 때문에 일단 디테일한 부분의 설정보다 큰 부분을 완성하는 것에 비중을 두었다.

오늘 만든 부분은 div(#content) 내의 div(#right) 부분부터 맨 마지막의 footer까지였다.

 

우선 완성한 페이지는

#content

 

#info 와 #footer

 

좀 허접하긴 해도 대강의 페이지가 만들어졌다. 일주일 배운걸로 다른 사람 도움 없이 팀원들끼리 이만큼 했으니까 나름 만족스럽다. 그리고 우리 팀원들이 다 너무 잘해서 착착 진행되어 좋았다.

작성한 내용을 하나하나 정리를 하기엔 너무 많아서 기록해두고 싶은 내용이나 내가 헷갈렸던 개념을 위주로 짧게 정리를 하였다.

 

• 위와 같은 구성의 게시판 레이아웃은 table보다 <ul>-<li>를 활용해서 구성하는게 좋다. 훨씬 코드가 깔끔해진다.
• left/right 같은 이름보다는 자세하고 쓰임를 알기 쉬운 이름의 선택자를 사용하는 것이 좋다. 타인이 코드를 읽었을 때 이해하기에 쉽고, 흔한 선택자를 썼을 때 코드양이 길어지면 혹시 모를 명칭 중복으로 오류가 발생할 수 있기 때문이다.
• 블록에 border를 설정할 때, box-sizing:border-box; 를 꼭 넣어주자. 안그러면 border의 픽셀만큼 커져 레이아웃이 깨질 수 있다.
• 메뉴처럼 큰 폰트크기를 사용할 때는 letter-spacing: -1px; 을 써주면 좀 더 보기가 좋다. (자간이 줄어듦. 자간을 키우고 싶을 때는 +값을 주면 된다.
• line-height속성으로 글자의 상하 위치를 조절하면 예쁘게 나온다.
• id와 class 선택자의 사용 : id는 문서 내에서 하나의 엘리먼트에만 사용할 수 있고 class는 여러 엘리먼트에 같은 class를 부여 할 수 있음. 따라서 큰 레이아웃을 그릴 때나 사이트에 하나만 있는 엘리먼트 = id, 같은 속성이 반복되는 엘리먼트  = class
• 백그라운드에 이미지 삽입🔥
• a:hover🔥

맨 아래 두가지는 좀 더 자세히 정리해보았다. 

 

 

2. 새로 배운 것

2-1. 백그라운드 이미지 넣기 

지금까지는 백그라운드에 색만 넣어보았는데 이미지를 불러와 배경으로 넣는 방법을 배웠다. 

html에서 <img>엘리먼트로 삽입하지 않고 css에서 백그라운드 속성으로 넣어주면 된다.

#info > #story.info1 {
    background:url('../css/info_1.png') top 10px right 15px no-repeat;
    background-size:70px;
}

코드는 위와 같다.

info1이라는 클래스를 가진 블록영역에 png 파일을 삽입하고

top right bottom left를 넣어 위치를 조절해준다. 위의 코드는 top에서 10px, right에서 15px 떨어진 곳에 해당 이미지를 배치한다는 의미.

그리고 no-repeat 속성을 넣어주어야 한다. 안그러면 블록영역보다 작은 이미지파일은 자동으로 무한반복해서 배경으로 넣어버린다.

이미지의 사이즈를 수정하고 싶다면 background-size 속성을 이용하면 된다.

 

 

2-2. a:hover

웹페이지에서 <a> 엘리먼트에 마우스를 가져다댔을 때 그 부분에 다른 속성을 부여하게 해주는 것이 hover이다.

아래와 같이 사용한다. 간단하지만 중요하고 자주 쓰일 것 같아 따로 빼서 정리한다. 

#visual > #visual_menu > ul > li > a:hover {
    opacity: 0.9;
}

 

 

 

 

 

3. 에러 기록

3-1. 부모요소와 자식요소의 size 상속여부

info부분을 끝내고 아래의 footer부분을 작성할 때, 배경색을 넣자 원래의 자리가 아닌 info 자리에 배경색이 들어가버린 것을 보고 이 문제를 처음 깨달았다.

footer의 배경색이 info부분에 들어가버렸다.

이 오류는 부모요소에 자식요소의 사이즈가 자동으로 적용되지 않는다는 것을 몰라서 생긴 오류이다.

<div id="parent">
    <div id="child1">
    </div>
    <div id="child2">
    </div>
</div>

이런 구조의 엘리먼트가 있다고 할 때,

child1에 300x600, child2에 300x600의 사이즈를 넣고 inline으로 배치를 한다면

parent는 당연히 child1과 child2의 크기를 차지하게 되어 600x600의 크기를 가지게 된다고 생각했다.

하지만 실제로는 자식요소의 크기가 부모요소의 크기를 결정하지 않으며, 부모요소에 따로 크기를 설정해주지 않으면 크기를 가지지 않는 빈 공간이 되어버린다.

 

위 오류는 info부분에 가로사이즈만 설정을 한 채 height를 따로 설정해주지 않았기 때문에 해당 info div는 아무런 높이를 가지지 않아 그 아래에 있는 엘리먼트인 footer div가 자동으로 info의 윗 요소인 content부분의 바로 아래로 배치가 되어버린 것이다. 

높이가 없으면 관념상으로만 존재하고... 눈에는 보이지 않는 존재가 되어버린다. 조심하자.....

 

❗️inherit 관련해서 추가공부하기

 

 

 

 

3-2. 화면비율을 줄이면 왜 깨질까

마지막에 알게된 오류인데, 화면을 축소해버리면 이렇게 left 부분이 깨지면서 내려와버리는 문제가 있었다.

아직은 이유를 모르겠다.

주말동안 공부하면서 다시 만들어볼 예정이다.

 

 

 

 

+) 주말동안 해본 것. 화면을 줄였을 때 레이아웃이 깨지는 문제는 고쳐졌다. border를 넣을 때 부모요소/자식요소가 섞이면 이상해진다.

예를들어 li에 top과 left쪽 border를 주다가 갑자기 ul이나 더 상위 div에 border를 넣으니까 문제가 생겼다. 같은 단계(?)의 엘리먼트에만 border를 넣으면 레이아웃이 깨지지않고 선이 잘 들어간다. 

혼자서 페이지 하나를 처음부터 끝까지 완성해보니까 굉장히 뿌듯하다 ㅎㅎ

 

❗️크롬 확장프로그램 중에 "AIX 스마트 다운로더" 라는게 있다. 이걸 사용하면 원하는 페이지에 있는 img를 한번에 쉽게 다운로드가 가능하다. 필요한 이미지, 아이콘들을 먼저 다운받은 뒤에 웹페이지 클론코딩을 하면 편리하다.