CSS로 완전한 전면 페이지 레이아웃을 만드는 방법

게시 됨: 2020-07-08

웹사이트의 디자인은 웹사이트에 생명을 불어넣습니다. 다양한 레이아웃의 웹사이트가 너무 많습니다. 그리고 웹사이트 레이아웃은 색상, 이미지, 콘텐츠 및 비디오로 구성됩니다. 이러한 것들은 웹사이트 콘텐츠로 규정될 수 있습니다. 웹사이트 레이아웃은 웹사이트 자료의 위치를 결정하는 웹사이트의 뼈대와 골격입니다. 웹 페이지에서 사이트의 요소를 정렬하는 역할을 합니다.

목차 숨기기

1. 헤더:

2. 탐색 모음:

3. 웹페이지 콘텐츠:

같지 않은 열:

4. 웹사이트 바닥글:

5. 반응형 웹사이트 레이아웃:

잘 정의된 웹사이트 레이아웃은 사용자의 검색 경험을 향상시킬 수 있습니다. 웹사이트에 대한 직관적인 탐색으로 이어질 수 있고 사용자 참여를 유도할 수 있습니다.

또한 좋은 웹사이트 레이아웃은 사용자가 페이지에 머무는 시간을 결정하고 제어합니다. 또한 방문하는 페이지 수와 웹사이트 방문 빈도에도 영향을 미칩니다. 웹 사이트 레이아웃은 웹 사이트를 웹 페이지의 머리글, 메뉴, 콘텐츠 및 바닥글로 나눕니다. 웹 사이트 구조를 디자인하는 데 사용할 수 있는 레이아웃에는 여러 가지가 있습니다. 그러나 우리는 이미지의 주어진 구조를 따르고 그에 따라 코드를 작성할 것입니다.

1. 헤더:

핀

헤더는 회사 로고와 탐색 메뉴가 있는 웹 페이지의 최상단 부분을 정의합니다. 웹 사이트에 대한 연락처 정보 및 기타 정보도 유지 관리하는 웹 페이지의 스트립입니다. 좋은 헤더는 브랜드 구축과 함께 웹 사이트를 쉽게 탐색할 수 있도록 합니다. 또한 전체 사이트에서 좋은 탐색 경험을 만드는 데 중점을 둡니다.

헤더에는 고정 및 부동의 두 가지 유형이 있습니다. 고정 머리글은 웹 페이지 상단에 유지되고 하단에서 무언가를 읽고 있습니다. 플로팅 헤더는 페이지를 위아래로 스크롤할 때 화면 주위를 따라갑니다.

헤더의 일반 기능에는 회사 로고, 탐색 및 페이지 제목이 포함됩니다. 경우에 따라 헤더에 검색 표시줄, 장바구니, 로그인/로그아웃 버튼, 사용자 프로필, 사용자 알림이 포함될 수도 있습니다.

다음은 간단한 헤더를 디자인하는 코드입니다.

<!DOCTYPE HTML>

<머리>

<메타 문자 집합=”utf-8″>

<메타 이름=”뷰포트” 내용=”너비=장치 너비, 초기 크기=1″>

<스타일>

신체 {

여백: 0;

}

/* 헤더 스타일 – 헤더의 스타일을 생성합니다.*/

.헤더 {

배경색: #f1f1f1;

패딩: 20px;

텍스트 정렬: 가운데;

}

</스타일>

</head>

<본체>

</div>

</바디>

</html>

2. 탐색 모음:

핀

탐색 모음은 웹 사이트 사용자가 웹 사이트 페이지에 도달하고 탐색하는 데 도움이 되는 구조화된 링크 모음입니다. 탐색 메뉴는 웹 사이트의 페이지를 연결하는 사용자 인터페이스의 요소입니다. 탐색 메뉴는 일반적으로 웹 사이트 페이지에서 사용할 수 있습니다. 탐색 메뉴가 모든 웹 페이지에 표시되거나 선택한 페이지에만 표시됨을 의미합니다.

일반적으로 탐색 모음은 웹 페이지의 콘텐츠가 시작되기 전에 웹 페이지 헤더 바로 아래에 가로로 배치됩니다. 특정 디자인에서 탐색 모음은 웹 페이지의 왼쪽 또는 오른쪽에 세로로 설정됩니다. 여기에서 탐색 모음은 메인 콘텐츠의 "측면"에 나타나므로 사이드바로 알려져 있습니다.

웹 사이트의 가장 중요한 부분인 탐색 모음이 없으면 웹 사이트 탐색이 어려워집니다. 특정 페이지로 이동하려면 뒤로 버튼을 클릭해야 합니다. 그러나 고맙게도 웹 사이트 탐색은 최근 몇 년 동안 표준화되었습니다. 요즘은 내비게이션 바가 없는 웹사이트를 찾기가 어렵습니다. 간단한 탐색 모음을 디자인하는 이면의 CSS 코드를 살펴보겠습니다.

/* 탐색 모음 컨테이너 – 탐색이 포함된 스트립입니다.*/
.topnav {
오버플로: 숨김;
배경색: #333;
}

/* 탐색 모음 링크 – 웹사이트의 다른 페이지로 연결되는 링크*/
.topnav {
왼쪽으로 뜨다;
디스플레이: 블록;
색상: #f2f2f2;
텍스트 정렬: 가운데;
패딩: 14px 16px;
텍스트 장식: 없음;
}

/* 링크 – 마우스를 가져갈 때 링크 색상이 변경됩니다. */
.topnav a:hover {
배경색: #ddd;
검정색;
}

탐색 모음 컨테이너는 웹 사이트 탐색을 포함하는 상자입니다. 탐색 링크는 탐색 모음 링크에서 사용할 수 있습니다. 이 링크를 클릭하면 웹사이트에서 선택한 웹페이지로 이동합니다. 링크 위로 마우스를 이동할 때 링크 색상을 변경할 수 있는 코드도 있습니다.

3. 웹페이지 콘텐츠:

핀

콘텐츠는 탐색 모음과 웹 사이트 바닥글 사이에 있는 모든 웹 페이지에서 볼 수 있는 항목의 그룹입니다. 콘텐츠의 레이아웃은 종종 사이트 또는 웹 페이지가 대상으로 하는 사용자에 따라 다릅니다. 모바일 브라우저는 1열 웹 콘텐츠를 사용합니다. 2열 콘텐츠 레이아웃은 태블릿 및 랩톱의 웹 사이트를 대상으로 합니다. 그리고 3열 웹사이트 레이아웃은 데스크톱 컴퓨터를 대상으로 하는 사이트에서 사용됩니다.

웹페이지 콘텐츠는 텍스트 콘텐츠에만 국한되지 않습니다. 웹페이지 콘텐츠는 텍스트를 포함하여 비디오, 오디오, 이미지 및 그래픽에 이르는 모든 것이 될 수 있습니다. 오늘날 웹 콘텐츠에는 Instagram 및 Facebook과 같은 소셜 미디어 플랫폼의 게시물도 포함될 수 있습니다. 블로그도 웹페이지 콘텐츠에 해당합니다.

웹 페이지 콘텐츠 레이아웃을 만드는 코드를 살펴보겠습니다.

/* 이것은 서로 나란히 배치되는 3개의 동일한 크기의 열을 생성합니다. */
.열 {
왼쪽으로 뜨다;
너비: 33.33%;
}

/* 열 뒤에 있는 부동 소수점 지우기 */
.row:다음 {
콘텐츠: "";
디스플레이: 테이블;
클리어: 둘 다;
}

/* 반응형 레이아웃 – 더 작은 화면(600픽셀 너비 이하)에서 세 개의 열이 나란히 쌓이는 대신 서로 위에 쌓이도록 합니다. */
@미디어 화면 및 (최대 너비: 600px) {
.열 {
너비: 100%;
}
}

2단 레이아웃을 만들려면 너비를 50%로 변경해야 합니다. 즉, 화면 공간이 두 부분으로 나뉩니다. 4열 레이아웃을 만들려면 너비를 25%로 설정해야 합니다. 따라서 생성할 열이 하나만 있는 경우 모바일 장치의 경우 너비를 100%로 지정해야 합니다.

같지 않은 열:

웹 페이지 콘텐츠에 대해 동일한 크기의 열을 가질 필요는 없습니다. 주요 콘텐츠가 더 큰 열에 있는 웹 페이지에서 다른 크기의 열을 가질 수 있습니다. 그리고 작은 열에는 광고, 이미지, 소셜 미디어 버튼 또는 사이드바 탐색과 같은 다른 콘텐츠가 포함될 수 있습니다. 거대한 열은 모든 웹 페이지의 주요 콘텐츠를 지정하기 위해 있습니다. 물론 이 정확한 패턴을 따를 필요는 없습니다. 일부 웹 디자인 애호가는 레이아웃을 변경했으며 결과는 엄청났습니다.

열 너비를 임의의 숫자로 편집할 수 있습니다. 그러나 기억할 유일한 것은 열 너비의 합계가 100%여야 한다는 것입니다. 중간 콘텐츠의 양쪽에 두 개의 작은 열이 있는 중간에 보다 실질적인 열을 만들기 위해 CSS 코드를 살펴보겠습니다.

.열 {
왼쪽으로 뜨다;
}

/* 왼쪽 및 오른쪽 열에 대한 코드 */
.column.side {
너비: 25%;
}

/* 중간 열에 대한 코드 */
.column.middle {
너비: 50%;
}

/* 반응형 레이아웃 – 세 개의 열이 서로 옆에 있지 않고 서로 위에 쌓입니다. 다른 유형의 웹사이트 레이아웃 디자인 */
@미디어 화면 및 (최대 너비: 600px) {
.column.side, .column.middle {
너비: 100%;
}
}

4. 웹사이트 바닥글:

핀

바닥글은 작은 글씨, 저작권 정보, 빠른 링크 및 연락처 정보가 포함된 웹 페이지의 맨 아래 섹션입니다. 웹사이트 헤더와 마찬가지로 바닥글을 사용하여 웹사이트에 그다지 중요하지 않은 표준 정보를 배치합니다. 바닥글은 웹사이트의 헤더에서 찾을 수 있는 일부 링크를 제공하므로 사이트의 일관성을 유지하는 것으로 알려져 있습니다. 사용자 행동은 계속 진화하기 때문에 웹사이트 기능의 일관성을 유지하는 것이 중요합니다.

바닥글을 흥미롭게 유지하려면 클릭 유도문안, 문의 양식, 지도, 이미지, 소셜 미디어 버튼 또는 최신 블로그 게시물을 포함할 수 있습니다. 요즘에는 웹사이트 바닥글에 클릭 유도문안을 전략적으로 배치하는 추세입니다. 이 외에도 지도, 최신 블로그 게시물, 소셜 미디어 버튼이 바닥글에 나타납니다. 이러한 것들은 사용자가 웹사이트의 다른 부분도 볼 수 있도록 도와줍니다.

CSS에 정의된 간단한 바닥글 코드를 살펴보겠습니다.

.바닥글 {
배경색: #F1F1F1;
텍스트 정렬: 가운데;
패딩: 10px;
}

5. 반응형 웹사이트 레이아웃:

핀

웹 페이지의 모든 요소, 즉 웹 사이트 헤더, 탐색 모음, 콘텐츠 및 웹 사이트 바닥글에 대한 코드를 보았습니다. 다음은 두 열과 전체 너비 열 사이에서 변경되는 반응형 웹사이트 레이아웃에 대한 코드입니다. 열 너비는 화면 너비의 크기에 따라 다릅니다.

<!DOCTYPE HTML>

<html>

<머리>

<스타일>

* {

상자 크기: 테두리 상자;

}

신체 {

글꼴 패밀리: Arial;

패딩: 10px;

배경: #f1f1f1;

}

/* 헤더/블로그 제목 – 헤더 또는 블로그의 제목을 정의합니다. */

.헤더 {

패딩: 30px;

텍스트 정렬: 가운데;

배경: 흰색;

}

.헤더 h1 {

글꼴 크기: 50px;

}

/* 상단 네비게이션 바 스타일 지정 */

.topnav {

오버플로: 숨김;

배경색: #333;

}

/* 탐색 모음의 상단 탐색 링크 스타일 지정*/

.topnav {

왼쪽으로 뜨다;

디스플레이: 블록;

색상: #f2f2f2;

텍스트 정렬: 가운데;

패딩: 14px 16px;

텍스트 장식: 없음;

}

/* 마우스 오버 시 색상 변경 – 링크에서 마우스 커서를 이동하면 링크 색상이 변경됩니다.*/

.topnav a:hover {

배경색: #ddd;

검정색;

}

/* 이것은 서로 옆에 위치한 두 개의 같지 않은 열을 생성합니다 */

/* 왼쪽 열 */

.왼쪽 열 {

왼쪽으로 뜨다;

너비: 75%;

}

/* 오른쪽 열 */

.오른쪽 열 {

왼쪽으로 뜨다;

너비: 25%;

배경색: #f1f1f1;

패딩 왼쪽: 20px;

}

/* 이것은 가짜 이미지를 추가합니다 */

.fakeimg {

배경색: #aaa;

너비: 100%;

패딩: 20px;

}

/* 기사에 카드 효과 추가 */

.카드 {

배경색: 흰색;

패딩: 20px;

여백 상단: 20px;

}

/* 열 뒤에 있는 부동 소수점 지우기 */

.row:다음 {

콘텐츠: "";

디스플레이: 테이블;

클리어: 둘 다;

}

/* 바닥글 – 웹사이트의 바닥글 섹션을 정의합니다 */

.바닥글 {

패딩: 20px;

텍스트 정렬: 가운데;

배경: #ddd;

여백 상단: 20px;

}

/* 반응형 레이아웃 – 화면 너비가 800px 미만인 경우 두 열이 서로의 상단에 배치됩니다.*/

@미디어 화면 및 (최대 너비: 800px) {

.왼쪽 열, .오른쪽 열 {

너비: 100%;

패딩: 0;

}

/* 반응형 레이아웃 – 화면 너비가 400픽셀 미만인 경우 탐색 링크가 나란히 쌓이는 대신 서로 겹쳐지도록 합니다. */

@미디어 화면 및 (최대 너비: 400px) {

.topnav {

플로트: 없음;

너비: 100%;

}

</스타일>

</head>

<본체>

<p>브라우저 창의 크기를 조정하여 효과를 확인하세요.</p>

</div>

</div>

<p>Sunt in culpa qui officia deserunt mollit anim id est labum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

</div>

</div>

<p>culpa qui officia deserunt mollit anim에서 나에 대한 일부 텍스트..</p>

</div>

</div>

<h3>나를 팔로우하세요</h3>

</div>

</div>

</바디>

</html>

메모장이나 다른 사용 가능한 텍스트 편집기에서 위의 코드를 작성하고 파일을 .html 파일 확장자를 가진 HTML 파일로 저장해야 합니다. 웹페이지 디자인에 이미지를 넣을 때 HTML 파일 폴더와 같은 폴더에 모든 사진을 저장해야 합니다. 이미지를 사용하려면 스타일시트 또는 CSS 파일에서 이미지의 전체 위치를 사용해야 합니다.

결론:

이제 코드와 함께 웹사이트 레이아웃에 대해 자세히 설명했으므로 웹사이트의 모양을 정의할 수 있습니다. 형편없는 레이아웃은 웹사이트 사용자를 좌절시키고 빠르게 사이트를 떠날 수 있습니다. 검색 엔진 결과 페이지의 순위에 영향을 줄 수 있는 높은 이탈률을 초래합니다. 이에 따라 웹 사이트 레이아웃을 결정하는 데 합리적인 시간을 투자해야 한다는 결론을 내릴 수 있습니다. 일단 결정했으면 어떤 콘텐츠가 어떤 열에 속하는지 결정해야 합니다. 또한 좋은 레이아웃은 사용자와 회사 간의 정서적 유대감을 형성하는 데 도움이 됩니다.