먼저 웹사이트 설정에 필요한 준비를 해야 합니다. 원하는 디렉토리 구조를 만듭니다. 예를 들어 다음과 같은 구조가 될 수 있습니다:
세무 컨설턴트 ---이미지 ---CSS
이것이 일반적인 디렉토리 구조입니다. HTML 페이지는 메인 레벨에 배치됩니다. CSS 파일은 css 디렉터리에, 모든 이미지는 이미지 디렉터리에저장됩니다. 이전에 레이아웃에서 잘라낸 모든 이미지를 이미지 디렉터리에추가합니다.
기본 구조 설정
css 디렉터리내에 새 CSS 파일을 만듭니다. 그런 다음 이 파일을 HTML 파일에 통합합니다. (예제에서는 HTML 파일의 이름이 index.html입니다 ). 이제부터 이 파일이 다음 튜토리얼의 중심이 될 것입니다.
먼저 이미 익숙한 기본 HTML 구조를 index.html에 삽입합니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 귀하의 세무 컨설턴트</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
또한 스타일시트 파일도 포함해야 합니다. 이제 준비가 완료되었습니다.
외부 요소는 div 컨테이너입니다.
<div class="main-container"> </div>
CSS 구문을 사용하여 이 컨테이너의 형식을 지정할 수도 있습니다.
.main-container { width: 100%; float: 왼쪽; }
메인 컨테이너는 너비가 100%로 지정되고 왼쪽으로 떠 있습니다. 너비를 100%로 설정하면 이점이 있습니다: 예를 들어 색상 그라데이션이 있는 배경 이미지를 삽입할 수 있습니다. 그러면 이 배경이 화면의 전체 너비에 걸쳐 표시됩니다.
기본 컨테이너 내에 두 개의 div 요소를 더 만듭니다.
<div class="main-container"> <div class="container"> <div class="Pages"> </div> </div> </div> </div>
이러한 요소는 형식도 지정됩니다. 실제 콘텐츠 영역에는 1000픽셀의 너비가 지정됩니다. margin: 0px auto; 를 지정하면 요소의 가로 중앙 배치도 이루어집니다.
.container { width: 1000px; margin: 0px auto; }
페이지 요소의 서식을 계속 지정합니다.
.page { 너비: 1000px; 플로트: 왼쪽; 패딩: 40px 0px 0px 0px 0px; }
이 요소는 페이지의 실제 콘텐츠 영역입니다. 다른 모든 요소는 여기에 배치됩니다. 이 요소의 너비도 1000픽셀로 고정되어 있습니다. 패딩 사양은 내부 간격을 정의합니다. 상단 내부 간격은 40픽셀로 설정되고 다른 여백은 0픽셀로 설정됩니다.
이제 레이아웃의 (매우) 대략적인 구조는 이미 구현했습니다.
이제 이 구조를 콘텐츠로 채울 차례입니다. 페이지는 먼저 세 줄로 나뉩니다.
- 헤더
- 콘텐츠
- Footer
이를 위해 세 개의 div 영역이 추가로 정의됩니다.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
이 세 영역도 물론 CSS를 사용하여 서식을 지정합니다.
.top { background-color: #f6f7f7; width: 980px; float: 왼쪽; padding: 0px 10px 10px 10px; } .content { width: 980px; float: 왼쪽; padding-top: 8px; } .bottom { text-align: 가운데; width: 1000px; height: 110px; float: 왼쪽; }
이제 개별 영역을 더 디자인할 수 있습니다.
페이지의 헤더 영역부터 시작하겠습니다. 헤더 영역은 여러 요소로 구성됩니다:
- 로고/제목
- 상단 메뉴
- 큰 이미지
이 세 가지 요소는 top 안에 정의됩니다.
<div class="top"> <div class="header"> <div class="header-top"> <h1>세무사</h1> </div> <div class="topmenu"> 상단 메뉴 </div> <div class="header-img"> </div> </div>
이것이 페이지 헤더의 기본 구조입니다. 물론 이것도 CSS를 사용하여 서식을 지정합니다.
.header { width: 980px; float: 왼쪽; } .header-top { width: 980px; height: 87px; float: 왼쪽; } .topmenu { background-image: url(../images/menue.jpg); background-repeat: repeat-x; width: 978px; height: 37px; float: 왼쪽; } .header-img { background-image: url(../images/header.jpg); background-repeat: no-repeat; background-position: 왼쪽 상단; width: 980px; height: 213px; float: left; } .
이 구문에는 두 가지 "특별한 기능"이 포함되어 있습니다. 먼저 topmenu 클래스의 내용을 살펴보세요. 여기서 배경 이미지에 대한 두 가지 세부 사항을 확인할 수 있습니다.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
1픽셀 그래픽 menue.jpg가 통합되어 있습니다. 이렇게 하면 상단 메뉴에 익숙한 색상 그라데이션이 표시됩니다. background-repeat: repeat-x; 를 지정하면 요소가 완전히 채워질 때까지 그래픽이 가로로 반복됩니다.
콘텐츠 영역 분할
콘텐츠가 최종적으로 표시되는 페이지의 영역을 계속 진행합니다. 이 작업은 div 요소 콘텐츠 내에서 이루어집니다. 이 영역은 다양한 요소로 나뉩니다. 먼저 작은 티저 이미지와 환영 메시지가 있습니다.
해당 HTML 구문은 다음과 같습니다:
<div class="content-left"> <div class="content-이미지"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">웹사이트 방문을 환영합니다</h1> <p>다음은 환영 텍스트입니다</p> </div> </div> </div>
이 영역도 두 부분으로 나뉩니다. 왼쪽에는 이미지가 표시되고 오른쪽에는 환영 메시지가 표시됩니다. 여기서 콘텐츠-이미지 클래스가 결정적입니다.
.content-image { width: 739px; float: left; padding-bottom: 10px; margin-bottom: 10px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eee; }
이 클래스는 이미지와 인사말을 둘러싸고 있습니다. content-image 내에는 두 개의 추가 영역이 있습니다.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Welcome</div>
이렇게 분할하는 대신 큰 이미지나 다른 것만 표시하려면 이 두 영역을 하나의 div 요소로 합치면 됩니다. 두 요소 변형에 대한 CSS 구문은 다음과 같습니다:
.img { float: 왼쪽; } .slogan { width: 560px; float: 오른쪽; }이제 브라우저에서 결과는 다음과 같이 표시됩니다:
다른 세 가지 요소를 계속 사용합니다:
- 왼쪽 텍스트 상자
- 오른쪽 텍스트 상자
- 오른쪽 메뉴.
이 경우 HTML 구문은 다음과 같습니다:
<div class="teaser"> <div class="left"> 왼쪽 텍스트 컨테이너 </div> <div class="right"> 오른쪽 텍스트 컨테이너 </div> </div> </div> <div class="content-right"> 오른쪽 메뉴 </div> </div>입니다.
물론 여기에도 CSS 구문이 있습니다:
.teaser { 너비: 737px; 높이: 216px; 플로트: 왼쪽; 테두리: 솔리드 1px #eee; } .left { 너비: 330px; 높이: 180px; 플로트: 왼쪽; 패딩: 20px; } .right { 너비: 327px; 높이: 180px; 플로트: 왼쪽; 패딩: 20px; } .content-right { 너비: 210px; 플로트: 오른쪽; 패딩-right: 20px; margin-top: 20px; border: 1px 솔리드 #eee; }이 튜토리얼이 끝나면 웹사이트의 기본 구조가 완성됩니다.
물론 이 기본 구조를 적절한 콘텐츠로 채워야 합니다. 이 작업은 다음 튜토리얼에서 진행하겠습니다.
