삼성생명의 홈페이지를 만드는 연습을 해보자.
먼저 홈페이지를 3등분하여 헤더부분, 메인부분, 하부부분으로 나눈다
<div>태그를 이용하여 3개의 부분으로 나누었다.
먼저 헤더부분을 보도록 하자
헤더의 각 부분들을 클릭했을때 홈페이지로 이동 또는 세부 내용이 나오는 화면으로 이동해야 하므로 <a href>태그를 이용하여 링크를 달아준다.
그리고 삼성생명 소개, 사회공헌, 홍보센터, 투자정보, 채용정보 와 같은 내용은 오른쪽으로 정렬되어 있으므로 블록을 따로 지정하여 "menu"라는 이름의 클래스를 지정해준다. 이후 블록안에 리스트를 만든 후 내용을 넣고 마찬가지로 링크를 달아준다.
다음은 메인부분을 보도록 하자.
메인에 들어가는 내용은 크게 3부분으로 나누어져 있다.
큰 글자
작은글자
블록
으로 구분할 수 있겠다.
큰글자는 <h2>태그, 작은글자는 <p> 태그를 이용하여 구역을 지정해주고
바로가기 메뉴는 <div>태그를 이용해 블록 지정 후 다시 각 항목들을 넣을 <div>태그를 만들어 넣어준다. 이때 세부내용의 class는 "quick"로 설정해둔다.
마지막으로 하부부분이다.
하부 내용에는 왼쪽 오른쪽으로 나누어져 있으므로
<div>태그를 이용해 하부 부분 전체를 감싸는 블록을 만들고 그 안에 다시 <div>태그를 두개 만들어 각 내용을 넣는다.
이제 HTML코드는 완성되었으므로 CSS코드를 보도록 하자.
전체의 여백 조절과 <li>태그 메뉴의 글자 스타일을 기본형태로 바꾸는것, <a>태그와 <body>태그의 기본설정이다.
<a>태그의 inherit 는 부모의 속성을 물려받는다는 의미이다.
헤더부분의 CSS코드를 보자.
class = "header" 로 지정한 <div>태그에 대한 내용이다.
전체 블록의 크기를 지정해주고 상하여백 없앤 후 가운데정렬해주었다.
<h1>태그와 <h2>태그를 나란히 위치시키기위해 float : left; 속성을 지정했고
둘 사이의 간격을 위해 margin-right 속성을 지정했다.
.header .menu 는 class = "header" 로 지정한 <div>태그 안에 class = "menu" 로 지정한 <div>태그에 대한 내용이다.
이 블록 자체를 오른쪽 정렬하기 위해 float : right; 로 지정하고
다시 블록 안의 내용은 왼쪽 정렬하기 위해 .header .menu li 는 float : left 로 왼쪽 정렬했다.
a:hover 속성은 링크에 마우스를 올렸을 때 색이 변하는 설정이다.
위와같이 변하는것을 알 수 있다.
메인부분의 CSS 코드를 보자
.section1 은 메인 전체를 둘러싸고 있는 블록이다.
이 블록의 배경에 이미지를 삽입하고 반복하지 않음, 가운데, 위로정렬 설정해준다.
이 방법은 2가지 방법으로 설정할 수 있다 (주석 참고)
background-size : cover; 는 브라우저 크기에 맞게 비율에 맞춰서 이미지를 조정해준다.
.section1 h2
메인의 상단부의 큰 글자에 대한 속성이다
display:block은 자신이 공간을 가지고 있는 것이다. 즉 자기 자신에 대한 블록 설정이라고 보면 된다.
마찬가지로 margin padding 등도 모두 설정 가능하다.
.section1 p
메인의 큰 글자 아래 작은 글자에 대한 속성이다.
메인 하단부의 바로가기 메뉴들에 대한 속성이다.
.section1 .block
메인 내부의 block 클래스를 가진 <div>태그에 대한 정의이다.
즉 바로가기 전체를 둘러싸고 있는 블록에 대한 속성이다.
overflow : hidden 은 범위를 벗어난 내용을 숨김처리해주는 속성이다.
.section1 .block .quick
.block 클래스를 가진 <div>태그 안에서 quick 클래스를 가진 <div>태그에 대한 속성이다.
각각의 바로가기에 대한 속성들이다.
위에서는 <div class="quick last">로 클래스를 2개 지정해서
.section1 .block .last 를 이용하여 불러올 수 있다.
따라서 <div class="quick last"> 태그는 quick 의 속성과 last의 속성을 모두 가지게 된다.
.section1 .quick h3
.section1 .quick p
두가지 모두 <div class="quick"> 태그 안의 <h3>태그, <p>태그에 대한 속성이다.
<h3>태그의 배경으로 메인에서 배경을 설정했던것처럼 이미지를 지정하고 반복하지않음, 오른쪽정렬 속성을 부여했다.
letter-spacing: -2px 속성은 글자 사이의 간격을 의미한다.
마지막으로 하부 내용에 관한 CSS코드를 보도록 하자
.section2 는 하부 영역 전체를 둘러싸고있는 <div class = "section2">태그에 대한 속성이다.
내부에 각 <div>태그, <h3>태그에 대한 속성을 부여하고 각각 다른 이미지를 넣기 위해
.section2 .intro1
.section2 .intro2
로 나누어서 이미지를 삽입했다.
다음은 완성된 결과물이다.
하부까지 한눈에 보기 위해 크기를 67% 정도로 줄였는데도 메인의 background 이미지가 잘 적용되는 것을 볼 수 있다.
'HTML' 카테고리의 다른 글
| HTML/CSS 선택자 - 2 (0) | 2021.01.19 |
|---|---|
| HTML/CSS 선택자 - 1 (0) | 2021.01.19 |
| HTML/CSS 실습 1 - 회원가입 페이지 만들기 (0) | 2021.01.13 |
| HTML/CSS 박스 사용하기 (0) | 2021.01.11 |
| HTML/CSS 스타일 적용의 우선순위 (0) | 2021.01.08 |