홈페이지 메인화면에 콘텐츠 목록을 넣는 것은 홈페이지의 주요한 정보를 한 화면에 보여주면서 사용자에게 흥미를 유발하고 오랜동안 머물도록 하는데 목적이 있다. 메인 화면에 들어가는 정보 중 일반적으로 인기글 최신글 등이 있으며 홈페이지 소유자마다 특색있는 것들을 목록으로 제공하는 경우들도 있다.
html5 css3 홈페이지 메인 콘텐츠 목록 만들기
홈페이지마다 존재하는 메인화면은 랜딩페이지로써 홈페이지의 특성이나 주제를 표현하기도 하고 방문자에게 주요 정보를 제공하기 위한 목록을 제공한다.
메인화면에서 제공하는 목록은 어떤 것이 있을까 생각해 보자.
커뮤니티 사이트나 검색사이트를 들어가면 인기있는 게시물을 보여주고, 최신 게시물을 보여주며 급상승한 게시물 등을 보여준다.
제공하는 정보는 많지만 이것을 다시 분류하여 사용자에게 목록처럼 보여주고 흥미를 준다.
사용자는 자신이 흥미를 느끼는 게시물을 다시 살펴볼 것이며, 홈페이지에서 오랜동안 머무는 효과를 줄 수 있다.
ul 목록 태그 사용
홈페이지에서 목록을 만들 때 사용하는 태그는 ul 태그이다. ol 태그와 비교되지만 사용법은 다르지 않다.
ul 태그는 un-ordered list 의 약자이며 ol 태그는 ordered-list 의 약자이다.
목록을 구성할 때 순서가 있는지 없는지에 따라 구분하긴 하지만, 사용시 거의 구분하지 않는다.
ul 태그의 사용법은 다음과 같다.
다만, ul 이나 ol 이나 스타일을 앞에 점과 같은 목록임을 나타내는 표시이 붙기 때문에 보통 초기화를 통해 없애준다.
<style>
ul {
list-style-type: none;
}
</style>
<ul>
<li>목록 1</li>
<li>목록 2</li>
<li>목록 3</li>
<li>목록 4</li>
</ul>수정할 코드 준비
위의 코드를 적용할 코드를 준비해 본다.
진행하고 있는 코드에 위의 코드를 적용하여 목록을 구성하도록 한다.
최근까지 진행한 부분은 홈페이지 메인 화면의 주요 목록을 구성하는 영역만 지정해 두었다.
html5 css3 홈페이지 메인 콘텐츠 영역 만들기 콘텐츠는 왕이다 contents is king
홈페이지의 메인 콘텐츠는 중요한 내용과 홈페이지의 소개 등을 보여주는 영역이다. 홈페이지를 방문한 사람은 메인 화면을 통해 특성을 알 수 있고 어떤 내용이 있는지 예상해 볼 수 있다. 필
lngnat.tistory.com
메인 홈페이지에 지정한 콘텐츠 목록 부분에 사용자에게 보여줄 흥미로운 부분들을 구성해 볼 것이다.
보통 홈페이지 메인에는 최신글, 인기글, 급상승 글 등 여러가지가 있지만 여기서는 그냥 기본만 지키도록 한다.
아래는 진행 중인 코드에 목록을 구성한 부분이다.
<!-- CSS -->
<style>
/** tag 공통 */
ul {
list-style-type: none;
}
</style><!-- HTML -->
<div class="contents">
<div>
<h3>콘텐츠1</h3>
<div>
<ul>
<li><a href="/">콘텐츠1 게시물1</a></li>
<li><a href="/">콘텐츠1 게시물2</a></li>
<li><a href="/">콘텐츠1 게시물3</a></li>
<li><a href="/">콘텐츠1 게시물4</a></li>
</ul>
</div>
</div>
<div>
<h3>콘텐츠2</h3>
<div>
<ul>
<li><a href="/">콘텐츠2 게시물1</a></li>
<li><a href="/">콘텐츠2 게시물2</a></li>
<li><a href="/">콘텐츠2 게시물3</a></li>
<li><a href="/">콘텐츠2 게시물4</a></li>
</ul>
</div>
</div>
<div>
<h3>콘텐츠3</h3>
<div>
<ul>
<li><a href="/">콘텐츠3 게시물1</a></li>
<li><a href="/">콘텐츠3 게시물2</a></li>
<li><a href="/">콘텐츠3 게시물3</a></li>
<li><a href="/">콘텐츠3 게시물4</a></li>
</ul>
</div>
</div>
<div>
<h3>콘텐츠4</h3>
<div>
<ul>
<li><a href="/">콘텐츠4 게시물1</a></li>
<li><a href="/">콘텐츠4 게시물2</a></li>
<li><a href="/">콘텐츠4 게시물3</a></li>
<li><a href="/">콘텐츠4 게시물4</a></li>
</ul>
</div>
</div>
</div>위의 코드를 적용한 결과는 다음과 같다.
너무나 휑하고 깨끗한 화면이 그럴듯한 모양새가 나왔다.
하지만, 너비가 작을 경우 밑으로 내려가고 너비가 클수록 옆으로 진행하는 것으로 반응형은 맞춰주었다.
전체 코드 보기
위의 진행에 대한 전체 코드는 다음과 같다.
화면의 모습은 너무도 심플하고 볼품이 없고, 코드는 길다.
필요한 것만 넣었으며 추후에 조금씩 업데이트를 통해 모양새를 꾸며보고자 한다.
<!-- 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>
<ul>
<li><a href="/">콘텐츠1 게시물1</a></li>
<li><a href="/">콘텐츠1 게시물2</a></li>
<li><a href="/">콘텐츠1 게시물3</a></li>
<li><a href="/">콘텐츠1 게시물4</a></li>
</ul>
</div>
</div>
<div>
<h3>콘텐츠2</h3>
<div>
<ul>
<li><a href="/">콘텐츠2 게시물1</a></li>
<li><a href="/">콘텐츠2 게시물2</a></li>
<li><a href="/">콘텐츠2 게시물3</a></li>
<li><a href="/">콘텐츠2 게시물4</a></li>
</ul>
</div>
</div>
<div>
<h3>콘텐츠3</h3>
<div>
<ul>
<li><a href="/">콘텐츠3 게시물1</a></li>
<li><a href="/">콘텐츠3 게시물2</a></li>
<li><a href="/">콘텐츠3 게시물3</a></li>
<li><a href="/">콘텐츠3 게시물4</a></li>
</ul>
</div>
</div>
<div>
<h3>콘텐츠4</h3>
<div>
<ul>
<li><a href="/">콘텐츠4 게시물1</a></li>
<li><a href="/">콘텐츠4 게시물2</a></li>
<li><a href="/">콘텐츠4 게시물3</a></li>
<li><a href="/">콘텐츠4 게시물4</a></li>
</ul>
</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' 카테고리의 다른 글
| 자바스크립트 문자열 복사 하기 javascript clipboard (0) | 2022.11.25 |
|---|---|
| window.load document.ready 차이와 사용 객체 (0) | 2022.11.24 |
| html5 css3 홈페이지 메인 콘텐츠 영역 만들기 콘텐츠는 왕이다 contents is king (0) | 2022.11.23 |
| html5 css3 네비게이션 메뉴 수평 정렬 하기 display flex 사용 (0) | 2022.11.22 |
| html5 css3 네비게이션 메뉴 목록 태그 ul 초기화 하기 (0) | 2022.11.22 |
댓글