홈페이지의 메인 콘텐츠는 중요한 내용과 홈페이지의 소개 등을 보여주는 영역이다. 홈페이지를 방문한 사람은 메인 화면을 통해 특성을 알 수 있고 어떤 내용이 있는지 예상해 볼 수 있다. 필요한 정보와 연관된 정보를 메인에 한꺼번에 보여준다면 방문자를 잡아 둘 수 있다. 개별 콘텐츠의 양이 많거나 콘텐츠의 특성별로 목록으로 나열한다면 방문자는 한동안 머물면서 콘텐츠를 살펴볼 것이다.
html5 css3 홈페이지 콘텐츠 메인 영역 만들기
콘텐츠는 왕이다 contents is king
display flex 를 이용하면 여러가지 귀찮은 작업이 없어진다. 홈페이지 메인을 구성할 때도 이것을 이용하면 수월하게 레이아웃을 잡을 수 있다.
이제는 콘텐츠 영역을 작업해 볼 것이다.
콘텐츠는 왕이다란 말이 있다.
단순히 마케팅이나 지식을 전달하거나 혹은 자기만족을 위한 것이든 홈페이지를 만들었지만 방문자 트래픽에 욕심이 생기는 것은 당연한 것이다.
SEO도 중요하지만 어디까지나 사람들이 볼만한 콘텐츠를 만드는 것이 중요하고 홈페이지의 메인부분은 콘텐츠 내용을 나열하여 사람들이 머물면서 정보를 찾아볼 수있도록 하는 것이 좋다.
콘텐츠가 무엇일까
콘텐츠는 텍스트, 유튜브 같은 영상, 이미지 등 다양하다.
홈페이지의 형태가 텍스트만 있을 수도 있고, 영상만 있을 수도 있으며, 이미지만 있을 수도 있다. 또는 여러가지가 혼재되어 있을 수도 있다.
콘텐츠의 내용을 어떻게 구성하는 것도 중요하지만 먼저 사람들이 원하는 정보를 기재하는 것이 바람직하다.
사람들은 주로 검색을 통해 홈페이지로 유입된다. 또는 SNS 등 공유된 자료를 보고 유입될 수도 있다.
검색 또는 SNS 등을 통한 트래픽 유입의 전제조건은 콘텐츠이기 때문에 콘텐츠는 왕이다 라고 표현을 한다.
많으면 많을 수록 좋고, 보기 편하면 더 좋다.
사람들이 검색해서 보는 자료가 충실하면 더욱 좋다.
홈페이지 메인 콘텐츠 목록 보여주기
콘텐츠를 보여주는 영역은 3가지가 있다.
첫번째는 홈페이지 메인에 주요 정보를 보여주는 곳이 될 것이며, 두번째는 특정 주제를 모아놓은 카테고리 목록이다. 세번째는 상세한 내용을 보기 위한 내용 부분이다.
메인에 보여주는 영역은 홈페이지에 있는 모든 컨텐츠의 주요한 정보를 보기 위함도 있고, 가장 중요한 정보를 우선적으로 보여주는 용도이다.
가장 중요한 정보 또는 홈페이지의 컨셉이 무엇인지를 보여주는 부분이기도 하다.
하지만, 이런 이론적인 내용보다는 이렇게 구성할 수 있는 콘텐츠를 많이 만들어 두는 것이 중요하다.
이번에는 홈페이지 메인에 사용할 콘텐츠 영역을 수정해 보도록 한다.
아래는 콘텐츠 내용을 추가할 부분이다.
수정할 코드 준비
콘텐츠의 내용을 추가할 코드를 준비한다.
위의 이미지에 사용한 코드를 이용하여 계속 진행해 볼 것이며, 진행은 네비게이션 메뉴를 display flex 를 이용하여 수평 정렬하는 것까지 진행했다.
노란색 부분에 콘텐츠 내용을 추가할 것이며 내용은 형태에 따라 조금씩 다를 것이다.
어떤 콘텐츠를 넣을 지는 목적에 따라 다를 것이지만 이벤엔 영역만 잡을 것이다.
영역 추가하기
영역은 div 로 잡을 것이며 display flex 를 이용하여 수평정렬 할 것이다. display gird 를 이용할 수도 있다.
grid 를 사용하면 좀 더 여러가지를 할 수 있지만 텍스트 위주로 먼저 만들어 보고 나중에 업데이트를 진행하도록 한다.
먼저 4가지 영역을 만들고 너비는 400px로 고정한다.
반응형으로 진행하기 때문에 화면의 크기가 작아지면 넘어가는 콘텐츠는 밑으로 내려가도록 했다.
수평정렬을 위한 display flex 를 사용했고, 화면을 넘어가는 콘텐츠를 밑으로 내리기 위해 flex-wrap wrap 으로 설정하였다.
코드는 다음과 같다.
<style>
.contents {
display: flex;
flex-wrap: wrap;
}
.contents > div {
border: 0px solid black;
border-radius: 1rem;
width: 400px;
margin: 0rem 0.5rem 0rem 0.5rem;
padding: 1rem 1rem 1rem 1rem;
}
</style>
<div class="contents">
<div>
<h3>콘텐츠1</h3>
<div>글제목 글내용</div>
</div>
<div>
<h3>콘텐츠2</h3>
<div>글제목 글내용</div>
</div>
<div>
<h3>콘텐츠3</h3>
<div>글제목 글내용</div>
</div>
<div>
<h3>콘텐츠4</h3>
<div>글제목 글내용</div>
</div>
</div>
결과화면은 다음과 같다.
노란색 영역이 콘텐츠 영역이다. 화면이 크면 수평정렬을 하고 있지만 화면의 너비가 작아지면 콘텐츠 영역이 아래로 내려가는 것을 볼 수 있다.
전체 코드 보기
위의 코드를 적용한 전체 코드는 다음과 같다.
별 것 없는 내용과 정말 필요한 것만 넣었지만 코드 라인수는 길다.
추후에 css 스타일 영역은 외부로 분리하면 html 코드는 많이 줄어들 것이다.
<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 반응형 meta 명시 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/** 비영어권 문자열 깨짐 방지 */
@charset "utf-8";
/** 모든 여백 제거 */
* {
margin: 0; /* 바깥 여백 */
padding: 0; /* 안쪽 여백 */
}
</style>
<style>
/** tag 공통 */
ul {
list-style-type: none;
}
ul li {
border:0px solid black;
}
</style>
<style>
/** class 공통 */
.debug, .header, .nav, .contents, .footer {
border:0px solid black;
padding: 1rem;
}
</style>
<style>
/** 네비게이션 메뉴 */
.nav ul {
display: flex;
}
.nav ul li {
margin: 0rem 1rem 0rem 0rem;
}
</style>
<!-- jquery cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!-- 디버깅 표시 -->
<div class="debug">
<span id="screenW"></span>
<span id="screenW">X</span>
<span id="screenH"></span>
</div>
<hr/>
<!-- 홈페이지 소개 -->
<div class="header">
<h1>웹사이트 이름</h1>
</div>
<hr/>
<!-- 네비게이션 -->
<div class="nav">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</div>
<hr/>
<!-- 콘텐츠 표시 -->
<style>
.contents {
display: flex;
flex-wrap: wrap;
}
.contents > div {
border: 0px solid black;
border-radius: 1rem;
width: 400px ;
margin: 0rem 0.5rem 0rem 0.5rem;
padding: 1rem 1rem 1rem 1rem;
}
</style>
<div class="contents">
<div>
<h3>콘텐츠1</h3>
<div>글제목 글내용</div>
</div>
<div>
<h3>콘텐츠2</h3>
<div>글제목 글내용</div>
</div>
<div>
<h3>콘텐츠3</h3>
<div>글제목 글내용</div>
</div>
<div>
<h3>콘텐츠4</h3>
<div>글제목 글내용</div>
</div>
</div>
<hr/>
<div class="footer">저작권 소유자</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready( function() { /* Load Comp. without resources */ });
$(window).on('load', function() { /* Load Comp. with resources */ fnBrowserInnerSize(); });
</script>
<script>
/** 웹브라우저 크기 변경 이벤트 */
window.onresize = function() { fnBrowserInnerSize(); };
/** 웹브라우저의 문서 크기 화면 표시 */
var fnBrowserInnerSize = function() { $("#screenW").text(window.innerWidth); $("#screenH").text(window.innerHeight);};
</script>
</html>
'programming > TroubleShootInG' 카테고리의 다른 글
window.load document.ready 차이와 사용 객체 (0) | 2022.11.24 |
---|---|
html5 css3 홈페이지 메인 콘텐츠 목록 만들기 (0) | 2022.11.23 |
html5 css3 네비게이션 메뉴 수평 정렬 하기 display flex 사용 (0) | 2022.11.22 |
html5 css3 네비게이션 메뉴 목록 태그 ul 초기화 하기 (0) | 2022.11.22 |
html5 css3 여백 주기 붙어있는 요소들에 간격 추가하기 margin padding 사용 (0) | 2022.11.21 |
댓글