css3의 display flex 속성은 html5 태그 요소를 수평 또는 수직 정렬하도록 한다. display flex의 기본값은 좌측에서 우측으로 단일로 진행하는 수평정렬이다. flex-direction 과 justify-content 등의 속성에 옵션을 주어 정렬 방법과 표현 방식을 다르게 설정할 수 있다.
html5 css3 네비게이션 메뉴 수평 정렬 하기
display flex 사용
css3의 display flex 속성은 일정하게 나열된 html5 요소들을 수평 또는 수직으로 정렬하는 역할을 한다.
과거에는 float 를 사용하여 정렬을 했지만 불편한 점이 많았었다. display flex 을 사용하면 수월하게 정렬을 할 수 있다. 기본값은 수평정렬이며 좌측에서 우측으로 진행한다.
네비게이션 메뉴를 만들 때 css의 display flex 속성을 사용하면 수월하게 작업할 수 있다. 메뉴를 수평 또는 수직으로 나열할 수도 있지만 단일 방향으로만 진행한다.
수정할 코드 준비
이미 작업한 html5 템플릿 코드에 display flex 속성을 지정하여 네비게이션 메뉴를 구성할 것이다.
지금까지 작업한 html 코드에 대한 결과는 다음과 같다.
ul 목록 태그를 사용하여 메뉴를 구성했으며, 초기화를 하여 목록 스타일을 제거했다.
변경할 부분은 노란색 부분의 메뉴부분이며 display flex 속성을 사용하여 수평정렬하여 바 형태인 네비게이션 메뉴로 만들어볼 것이다.
위 이미지에 대한 작업 기록은 이전 포스팅을 참고해 본다.
html5 css3 네비게이션 메뉴 목록 태그 ul 초기화 하기
홈페이지를 만들 때 메뉴를 추가할 때 목록 태그인 ul 을 할 수 있다. ul 태그는 목록을 나타낼 때 사용되는 태그로 메뉴나 페이징과 같은 간단하고 연속적인 데이터를 표현할 때 사용한다. 목록
lngnat.tistory.com
css3 display flex 수평 정렬 하기
css3 는 웹문서의 모양과 스타일을 지정하는 역할을 한다.
display flex 속성은 동일하게 사용될 요소들을 수평 또는 수직 정렬하는 역할을 한다.
display flex 의 기본값은 좌측에서 우측으로 단일 방향으로 정렬을 하게 된다.
justify-content 로 요소들의 정렬 방법을 정하고, flex-direct 으로 수평 또는 수직 정렬을 지정할 수 있다.
목록 태그인 ul 과 li 에 display flex 를 적용하는 방법은 다음과 같다.
태그 또는 선택자 {
display: flex;
}적용하기
수정할 테스트 코드도 준비되었고, display flex 를 사용하는 간단한 방법도 알게 되었다.
수직 정렬되어 있는 ul 태그를 display flex 를 이용하여 수평 정렬하기 위해 위의 방법을 사용해 보도록 한다.
<style>
/** 네비게이션 메뉴 */
.nav ul {
display: flex;
}
.nav ul li {
margin: 0rem 1rem 0rem 0rem;
}
</style>
<!-- 네비게이션 -->
<div class="nav">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</div>목록 태그로 사용하는 ul 태그에 display flex 속성을 지정하였다.
li 요소에는 margin 을 사용하여 안쪽 여백을 적용하였다. 여백이 없다면 각 요소는 다닥다닥 붙어 있어 보기가 좋지 않다.
위 코드를 적용한 결과는 다음과 같다.
아주 간단한 형태이지만 수평으로 정렬이 되었으며 안쪽여백인 margin 을 설정하여 메뉴를 구분하도록 하였다.
display flex 에 대한 설정이나 옵션들을 자세히 들어가면 종류가 많다.
전체 코드 보기
지금까지 작업한 전체 코드는 다음과 같다.
필요 이상의 작업은 하지 않고 꼭 필요한 부분만 진행했어도 코드가 길어보인다.
홈페이지의 화려함은 없지만 깔끔함이 보이기에 만족한다.
CSS3 를 잘 하는 사람들이라면 이정도는 쉬울 듯 하다.
이제 콘텐츠 부분을 만드는 일만 남았다.
<!-- 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">웹사이트 이름</div>
<hr/>
<!-- 네비게이션 -->
<div class="nav">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</div>
<hr/>
<!-- 콘텐츠 -->
<div class="contents">콘텐츠</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' 카테고리의 다른 글
| html5 css3 홈페이지 메인 콘텐츠 목록 만들기 (0) | 2022.11.23 |
|---|---|
| html5 css3 홈페이지 메인 콘텐츠 영역 만들기 콘텐츠는 왕이다 contents is king (0) | 2022.11.23 |
| html5 css3 네비게이션 메뉴 목록 태그 ul 초기화 하기 (0) | 2022.11.22 |
| html5 css3 여백 주기 붙어있는 요소들에 간격 추가하기 margin padding 사용 (0) | 2022.11.21 |
| 웹브라우저 해상도 크기 표시 너비와 높이 구하기 (0) | 2022.11.20 |
댓글