CSS 웹 레이아웃
웹 레이아웃
웹사이트는 일반적으로 헤더, 메뉴, 콘텐츠, 그리고 푸터로 나뉩니다:
여러 가지 다른 레이아웃 디자인을 선택할 수 있습니다. 그러나 위의 구조는 가장 일반적인 구조 중 하나입니다. 우리는 이 튜토리얼에서 그것을 자세히 연구할 것입니다.
헤더
헤더(헤더)는 일반적으로 웹사이트 상단(또는 상단 네비게이션 메뉴 아래)에 위치합니다. 일반적으로 로고(로고)나 웹사이트 이름을 포함합니다:
예제
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
결과:
네비게이션 바
네비게이션 바는 링크 목록을 포함하고, 방문자가 웹사이트를 탐색하는 데 도움을 줍니다:
예제
/* 네비게이션 바 컨테이너 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 네비게이션 바 링크 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 링크 - 마우스 오버 시 색상 변경 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
결과:
콘텐츠
사용할 레이아웃은 일반적으로 목표 사용자에 따라 결정됩니다. 가장 일반적인 레이아웃은 다음과 같은 레이아웃 중 하나(또는 그들의 조합)입니다:
- 1-컬럼레이아웃(모바일 브라우저에서 일반적으로 사용)
- 2-컬럼레이아웃(平板 및 노트북에서 일반적으로 사용)
- 3-컬럼레이아웃( 데스크톱 전용)
1-컬럼:
2-컬럼:
3-컬럼:
우리는 세 개의 컬럼 레이아웃을 만들고, 작은 스크린에서는 하나의 컬럼 레이아웃으로 변경합니다:
예제
/* 세 개의 동일한 컬럼을 만들고, 서로 다른 플로팅으로 배치합니다 */
.column {
float: left;
width: 33.33%;
}
/* 컬럼 뒤에 플로팅을 지우기 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 반응형 레이아웃 - 작은 스크린(600픽셀 또는 더 작은 너비)에서 세 개의 컬럼을 쌓아놓고, 평행하게 배치하지 않도록 합니다 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
결과:
완전한 웹 기술 참고 매뉴얼
우리의 참고 매뉴얼은 웹 기술의 모든 측면을 다루고 있습니다.
이 중에는 W3C 표준 기술: HTML, CSS, XML이 있으며, 그 외에도 JavaScript, PHP, SQL 등 다양한 기술이 포함됩니다.
온라인 예제 테스트 도구
CodeW3C.com에서는 수천 개의 예제를 제공합니다.
우리의 온라인 편집기를 사용하여 이 예제를 편집하고 코드를 실험할 수 있습니다.
빠르고 이해하기 쉬운 학습 방식
시간은 금보다 귀하다, 따라서 우리는 빠르고 이해하기 쉬운 학습 내용을 제공합니다.
여기서는 이해하기 쉬운 편리한 방식으로 필요한 모든 지식을 얻을 수 있습니다.
추천:2개의 컬럼 레이아웃을 생성하려면 너비를 50％로 변경하세요. 4개의 컬럼 레이아웃을 생성하려면 25％를 사용하세요.
추천:@media 규칙이 어떻게 작동하는지 궁금하시다면, 우리의 CSS 미디어 쿼리 이 장에서 더 많은 관련 지식을 배울 수 있습니다.
추천:컬럼 레이아웃을 생성하는 더 현대적인 방법은 CSS Flexbox를 사용하는 것입니다. 그러나, Internet Explorer 10 이전 버전은 이를 지원하지 않습니다. IE6-10 지원이 필요하다면, 상단에 보여준 것처럼 플로팅을 사용하세요.
Flexible Box 레이아웃 모듈에 대한更多信息를 알고 싶다면, 우리의 CSS Flexbox 教程
불일치하는 컬럼
주 내용(main content)은 웹사이트에서 가장 크고 중요한 부분입니다.
컬럼의 너비가 다른 경우가 많습니다. 대부분의 공간은 주 내용을 위해 보존됩니다. 부속 내용(있을 경우)은 대체 네비게이션 또는 주 내용과 관련된 정보로 사용됩니다. 너비를 자유롭게 변경할 수 있지만, 총 합이 100％가 되어야 합니다:
예제
.column {
float: left;
}
/* 왼쪽과 오른쪽 컬럼 */
.column.side {
width: 25%;
}
/* 중간 컬럼 */
.column.middle {
width: 50%;
}
/* 반응형 레이아웃 - 세 개의 컬럼을 쌓아놓고, 평행하게 배치하지 않도록 합니다 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
결과:
완전한 웹 기술 참고 매뉴얼
우리의 참고 매뉴얼은 웹 기술의 모든 측면을 다루고 있습니다.
이 중에는 W3C 표준 기술: HTML, CSS, XML이 있으며, 그 외에도 JavaScript, PHP, SQL 등 다양한 기술이 포함됩니다.
온라인 예제 테스트 도구
CodeW3C.com에서는 수천 개의 예제를 제공합니다.
우리의 온라인 편집기를 사용하여 이 예제를 편집하고 코드를 실험할 수 있습니다.
빠르고 이해하기 쉬운 학습 방식
시간은 금보다 귀하다, 따라서 우리는 빠르고 이해하기 쉬운 학습 내용을 제공합니다.
여기서는 이해하기 쉬운 편리한 방식으로 필요한 모든 지식을 얻을 수 있습니다.
푸터
푸터는 페이지 하단에 위치합니다. 일반적으로 저작권 및 연락처 정보와 같은 정보를 포함합니다:
예제
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
결과:
반응형 웹 사이트 레이아웃
위의 CSS 코드를 사용하여, 스크린 너비에 따라 두 열과 전체 너비 열을 전환하는 자동 조정 가능한 웹 사이트 레이아웃을 생성했습니다:
