CSS 튜토리얼: 10단계로 CSS를 사용하여 웹사이트를 구축하는 방법 배우기 (1)

저자：Eve Cole 업데이트 시간：2009-06-12 17:25:58

이 기사는 원저자 Steve Dennis가 번역한 것입니다. 감사의 말씀을 전하고 싶습니다.
이 튜토리얼은 Jorux에서 번역한 CSS 레이아웃을 주로 참조하며 주로 무료 번역이므로 Jorux의 개인적인 의견이 많이 추가되었으며 일부 중복되는 설명은 생략되었습니다.

웹 사이트 계획하기

먼저 웹 사이트를 계획해야 합니다. 이 튜토리얼에서는 웹 사이트를 구축하기 위한 예로 다음 그림을 사용합니다.

CSS教程：十步学会用css建站
그림 1

의 기본 레이아웃은

다음과 같습니다.

CSS教程：十步学会用css建站
그림 2는

주로 다섯 부분으로 구성됩니다.
1. 버튼 효과가 있는 기본 탐색 탐색 모음.
너비: 760px 높이: 50px
2. 헤더 웹사이트 헤더 아이콘에는 웹사이트의 로고와 이름이 포함됩니다.
너비: 760px 높이: 150px
3. 콘텐츠 홈페이지의 주요 콘텐츠입니다.
너비: 480px 높이: 내용에 따라 변경됩니다.
4. 사이드바 테두리, 몇 가지 추가 정보.
너비: 280px 높이: 다음에 따라 변경됩니다.
5. Footer 홈페이지 하단에는 저작권 정보 등이 기재되어 있습니다.
너비: 760px 높이: 66px

1. HTML 템플릿 및 파일 디렉터리 등을 만듭니다.

코드는 다음과 같습니다:
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<머리>

회사 이름 - 페이지 이름

<본문>

index.html로 저장하고 CSS와 이미지 폴더를 생성합니다. 웹사이트 구조는 다음과 같습니다.

CSS教程：十步学会用css建站
그림 3

2. 웹 사이트를 위한 큰 상자 만들기 :

웹 사이트의 모든 요소를 포함할 너비 760px의 상자를 만듭니다.
HTML 파일의 와 사이에

를 작성하세요.
안녕하세요.

CSS 파일을 생성하고 이름을 master.css로 지정한 후 /css/ 폴더에 저장합니다. 쓰다:
#페이지 컨테이너 {
너비: 760px;
배경: 빨간색;
}
id가 page-container인 상자의 너비는 html로 제어되며 배경은 빨간색입니다. 성능은 다음과 같습니다.

CSS教程：十步学会用css建站
그림 4

이제 상자를 중앙에 배치하기 위해 margin: auto;를 작성하여 CSS 파일이 다음과 같도록 합니다.
#페이지 컨테이너 {
너비: 760px;
여백: 자동;
배경: 빨간색;
}
이제 상자 상단과 브라우저 사이에 8px 너비의 간격이 있는 것을 볼 수 있습니다. 이는 브라우저의 기본 패딩 및 테두리 때문입니다. 이 공백을 없애려면 CSS 파일에 다음을 작성해야 합니다.
HTML, 본문 {
여백: 0;
패딩: 0;
}

웹사이트를 5개의 div로 나누기

1. "1단계"에서 언급한 5개 부분을 상자에 넣고 html 파일에 작성합니다.

기본 탐색

콘텐츠

는

다음과 같이 동작합니다:

CSS教程：十步学会用css建站
그림 5

2. 다섯 부분을 구별하기 위해 다섯 부분을 서로 다른 배경색으로 표시하고 CSS 파일에 작성합니다.
#기본 탐색 {
배경: 빨간색;
높이: 50px;
}
#헤더 {
배경: 파란색;
높이: 150px;
}
#사이드바-a {
배경: 진한 녹색;
}
#콘텐츠 {
배경: 녹색;
}
#바닥글 {
배경: 주황색;
높이: 66px;
}

성능은 다음과 같습니다.

CSS教程：十步学会用css建站
그림 6

웹 페이지 레이아웃 및 div 플로팅 등

1. 플로팅: 먼저 메인 콘텐츠 오른쪽에 테두리가 플로팅되도록 합니다. CSS를 사용하여 플로팅을 제어합니다.

#사이드바-a {
플로트: 오른쪽;
너비: 280px;
배경: 진한 녹색;
}

성능은 다음과 같습니다.

CSS教程：十步学会用css建站
그림 7

2. 기본 콘텐츠 상자에 텍스트를 작성합니다. html 파일에 다음을 작성합니다.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Donec in sapien in nibh rutrum gravida. Fusce Malesuada enim vitae lacus.
Nullam rhoncus mauris ac metus.
Duis scelerisque justo a pede, semper at, porta eget, placerat eget,
Purus. Mattis nunc vertibulum ligula를 중단하십시오.

성능은 다음과 같습니다.

CSS教程：十步学会用css建站
그림 8

그러나 기본 콘텐츠 상자가 전체 페이지 컨테이너 너비를 차지하며 #content의 오른쪽 테두리를 280px로 설정해야 한다는 것을 알 수 있습니다. 국경과 충돌하지 않도록.

CSS 코드는 다음과 같습니다.
#콘텐츠 {
오른쪽 여백: 280px;
배경: 녹색;
}

동시에 테두리에 일부 텍스트를 씁니다. html 파일에 다음을 작성합니다.

는

다음과 같이 동작합니다:

CSS教程：十步学会用css建站
그림 9

이것은 우리가 원하는 것이 아닙니다. 웹 사이트의 하단 프레임이 테두리 아래로 사라졌습니다. 테두리를 오른쪽으로 띄우기 때문에 전체 상자 위에 다른 레이어에 있다는 것을 알 수 있습니다. 따라서 하단 상자와 콘텐츠 상자가 정렬됩니다.

그래서 우리는 CSS로 작성합니다:
#바닥글 {
명확함: 둘 다;
배경: 주황색;
높이: 66px;
}

성능은 다음과 같습니다.

CSS教程：十步学会用css建站
그림 10

웹 페이지의 메인 프레임 외부에 있는 추가 구조의 레이아웃 및 표시 다음을 포함하여 웹 페이지의 메인 프레임 외부에 있는 추가 구조의 표시(레이아웃):

1. 메인 탐색 표시줄;
2. 웹사이트 이름과 콘텐츠 제목을 포함한 제목
3. 내용
4. 저작권, 인증, 하위 탐색 표시줄(선택 사항)을 포함한 바닥글 정보.
이러한 구조를 추가할 때 원래 프레임워크를 파괴하지 않으려면 CSS 파일의 "body" 태그(TAG) 아래에 다음을 추가해야 합니다.
.숨겨진 {
디스플레이: 없음;
}
".hidden"은 우리가 추가한 클래스입니다. 이 클래스는 숨겨진 클래스에 속하는 페이지의 모든 요소가 표시되지 않도록 할 수 있습니다. 나중에 사용할 것이므로 지금은 잊어버리세요.

이제 제목을 추가합니다.

먼저 HTML 코드로 돌아가서

부터

까지가 일반적으로 사용되는 HTML 제목 코드입니다. 예를 들어 일반적으로

웹사이트 이름

웹사이트 자막

콘텐츠 기본 제목

등을 사용합니다. html 파일의 헤더 레이어(Div)에 다음을 추가합니다.

계몽된 디자인

페이지를 새로 고치면 큰 제목과 제목 주위의 공백을 볼 수 있습니다. 이는

> 태그의 기본 크기와 여백으로 인해 발생합니다. 이러한 공백을 먼저 제거하려면 다음을 추가해야 합니다.
h1 {
여백: 0;
패딩: 0;
}

다음은 네비게이션 바입니다 .

네비게이션 바의 성능을 제어하는 CSS 코드는 비교적 복잡하기 때문에 9~10단계에서 자세히 소개하겠습니다. 이제 html 파일에 탐색 코드를 추가합니다.

소개

서비스

포트폴리오

문의하기

(참고: 원래 튜토리얼에서는 dl 및 dt를 사용했지만, jorux는 여기에서 더 일반적으로 사용되는 ul 및 li 태그를 사용합니다.)
현재 내비게이션 바의 성능은 상대적으로 좋지 않지만 향후 튜토리얼에서 특별한 성능이 소개될 예정이므로 내비게이션 바를 일시적으로 숨겨야 하므로 다음을 추가했습니다.

소개

서비스

포트폴리오

문의하기