3. 실습 - 홈페이지 클로닝하기 (1)

0.  목차

1. 페이지 개요 - HTML구조

2. 1일차 (float속성과 position속성)

    2-0. CSS 기본 설정

    2-1.  header부

    2-2.  visual부

3. 2일차

    3-2. content부

4. 3일차

   -

 

 

 

1.  페이지 개요

이 화면의 구성은 크게

1. 로고와 메뉴가 있는 헤더부

2. 사진과 사진메뉴가 있는 비주얼부

로 나눠진다. 

 

이걸 HTML의 구성으로 바꾸어보면

이런 구조로 나타낼 수 있다.

오늘 새로 배운 float과 position을 위주로 css를 정리해보았다.

 

 

 

 

2.  1일차

2-0. CSS 기본 설정

CSS 파일을 작성하기에 앞서 가장 먼저 설정해 주면 좋은 것

* {
    margin:0;
    padding:0;
}

ul, li{
    list-style: none;
}

a{
    text-decoration: none;
}

#wrap{
    width:100%;
}

• 엘리먼트에는 디폴트로 들어가 있는 마진이나 패딩값들이 있는 경우가 종종 있다. 미리 모든 값을 0으로 만들어 둔 뒤 작업을 하면 작성자가 원하는 대로 컨트롤 하기가 훨씬 쉬워진다. (실무에서는 이렇게 하면 안됨! 필요없는 엘리먼트에까지 전부 속성이 부여되니까 오류가 날 수 있고 비효율적임)
• 리스트 엘리먼트에 있는 동그라미나 링크 엘리먼트의 밑줄 같은 것도 미리 해제를 해두는 것이 좋다.
• wrap 의 너비를 100%로 하여 화면 크기에 맞도록 설정해둔다. (1200px 또는 100%로 하는게 이상적)
• ❗️본격적인 html과 css파일 작성 전 간단한 코드로 링크가 제대로 걸렸는지 확인 꼭 하기.

 

 

2-1. header부 설정하기 <float을 이용해보자>

2-1-1. 헤더 블록의 설정

#header{
    width:1200px;
    height:100px;
    margin:0 auto;
    padding:20px 0 0 0;
    box-sizing:border-box;  /*패딩 쓸 땐 같이 꼭 써주기*/
}

• 헤더 블록의 크기를 지정해주고, 전체 화면에서 가운데 정렬이 되도록 마진을 설정해준다.
• 윗부분에 패딩을 줘 헤더안의 엘리먼트인 로고와 메뉴가 상단에 딱 붙지 않게 해준다. (👉헤더에서 패딩을 줄 지, 로고/메뉴 엘리먼트에서 개별적으로 패딩을 줄 지는 개인기호에 따라 선택하면 된다!)
• 패딩을 줄 때는 전체 크기에 변화가 없도록 박스사이징을 꼭 같이 써주자.

 

2-1-2. 로고와 메뉴

/*-------logo-------*/
#logo{
    float:left;
    display: inline-block;
}


/*-------menu-------*/
#menu{
    float:right;
    padding:0;
}

#menu > li{
    float:left;
}

#menu > li > a{
    display:inline-block;
    width:180px;
    color:#004385;
    font-weight: bold;
    text-align: center;
    padding: 20px 0 40px 0;
}

• 디스플레이속성 : inline-block으로 바꾸기
• float으로 위치 설정해주기

 

맨 위에 설명한 구조대로 html을작성한다면 css를 넣지 않은 페이지의 상태는 이런 모습일 것이다.

로고이미지가 담긴 <div>, 메뉴를 적은 <ul>,<li> 엘리먼트는 모두 디스플레이속성이 block이기 때문이다. 이 엘리먼트들을 같은 줄에 병렬로 연결을 하고 원하는대로 크기를 조절하기 위해서는 이 엘리먼트들을 inline-block으로 만들어주어야 한다.

(❗️inline속성은 width,height,margin,padding등의 설정이 불가능함.)

디스플레이 속성을 바꾸면 크기가 다른 엘리먼트들이 이렇게 아래를 기준으로 정렬된다(css로 정렬기준을 바꿀 수 있다.)

 

 

이제 로고와 메뉴를 float을 사용하여 정렬해준다.

<float 속성이란?>

엘리먼트가 가진 디스플레이속성이 무시되고 (block속성의 엘리먼트에 마진이나 패딩을 주어도 반영이 안됨) 이미지의 크기, 텍스트의 크기처럼 컨텐츠부분을 제외하고 붙어 나란히 배치된다.
또한 float속성은 같은 계층?의 엘리먼트에 모두 영향을 미치게 된다. 원래 1-2-3 순서의 엘리먼트가 배치되어있는데, 2에 float:left속성을 주면 2-1-3 순서로 배치가 되어버린다. 원래의 순서를 유지하고 싶다면 1에도 float:left 속성을 주면 된다.
여러개의 블럭을 원하는 레이아웃으로 배치하거나, 이미지와 텍스트를 함께 배치할 때 이미지가 텍스트를 가리지 못하게 하는 등 유용하게 사용이 가능하다.

float속성의 이해가 어려워 조금 자세히 아래에 설명해보았다.

1) 위의 상태에서 로고에만 float:left속성을 넣으면 아래와 같이 변한다. 로고의 block속성이 무시되어 더이상 menu부분이 로고의 아랫줄을 기준으로 정렬되지 않는다.

 

2) 우측의 <li>엘리먼트에도 float:left속성을 넣어보았다. 컨텐츠가 있는 텍스트부를 제외하고 사이사이의 공간이 모두 사라지고 좌측에 나란히 배치되었다.

 

3) 리스트가 담긴 <ul>에 float:right속성을 넣으면 메뉴가 페이지의 우측끝으로 붙게된다.

 

4) 이 상태에서 메뉴<li>의 <a>엘리먼트에 폰트의 크기, 색깔, 블럭의 크기와 패딩, 마진같은 속성들을 부여하면 예쁘게 정렬이 완성된다!

 

 

 

 

 

2-2. visual부 설정하기 <position을 이용해보자>

css를 넣지 않은 기본 상태

html만으로 작성한 페이지는 위와 같은 상태이다.

여기서 지금까지 배웠던 개념들을 적용해 엘리먼트들을 최대한 그럴싸하게 만들면 아래와 같은 화면이 된다.

엘리먼트들의 디스플레이속성, 크기, 가운데정렬 등을 설정해주었다.

 

이 상태에서 새롭게 해야할것은

1. 아래의 메뉴 블럭을 이미지에 겹쳐 표현하기

2. 메뉴블럭 배경색의 투명도 조절하기

 

2-2-1. position속성으로 이미지와 블럭 엘리먼트 겹치기

<position 속성이란?>

엘리먼트의 위치를 변경할 수 있는 속성.
position:absolute와 position:relative가 있다.
position:absolute는 부모요소를 기준으로 top, right, bottom, left로 픽셀을 지정해 움직이게 되며
position:relative는 자기자신을 기준으로 움직이게 된다.

 

위 페이지에 사용한 이미지의 높이가 500px, 메뉴블록의 높이가 50px일 때 absolute로 이동을 하면,

부모요소의 시작지점이 이미지의 좌측상단이므로 top에서 450px 이동시켜주면 이미지의 아래에 줄맞춤이 된다.

#visual > #visual_menu{
    height:50px;
    width: 100%;
    background: rgba(0,0,0); 
    
    position:absolute;
    z-index: 2;
    top: 450px;
}

relative로 이동을 하면,

원래 메뉴블럭이 있던 위치에서 자신의 높이인 50px만 올라가면 되므로 bottom:50px로 이동을 시켜주면 된다.

#visual > #visual_menu{
    height:50px;
    width: 100%;
    background: rgba(0,0,0); 
    
    position:relative;
    z-index: 2;
    bottom: 50px;
}

여기서 z-index란 같은 부모요소를 가진 엘리먼트 간의 우선순위를 지정해주는 것인데 (엘리먼트가 겹칠 때 어느 요소를 위로 할 것인가)

뒤의 숫자가 클수록 위로 올라오게된다.

위치를 이동시켜주었다.

 

 

 

 

2-2-2. 배경의 투명도 조절하기

• opacity 속성으로 투명도 주기 (자식요소에도 영향을 줌)
• rgba로 배경색을 넣을 때 투명도 주기(자식요소에는 영향을 주지 않음)

배경색에 투명도를 넣는 방법은 크게 위의 두가지가 있다.

두 방법의 가장 큰 차이점은 투명도를 넣는 해당 요소의 자식요소에 영향을 주는가의 여부이다.

opacity: 0.5;

background: rgba(0,0,0,0.5);

 

메뉴블록과 메뉴폰트에 투명도를 주고, 리스트 중 선택된 블록을 진하게 해주면 오늘의 페이지 분량은 끝이다!

 

1일차 끝