초기화를 진행한 html5 태그들은 서로 붙어있고 보기가 불편하다. 여백은 가시성을 높여지고 화면에 표시되는 콘텐츠들의 구역을 구분짓는 역할을 한다. 초기화 되어 서로 붙어있는 태그들에 여백을 줄 때는 css3의 바깥여백과 안쪽여백을 줄 수 있다. 바깥여백은 margin 속성을 안쪽여백은 padding 속성을 이용한다.
html5 css3 여백 주기
붙어있는 요소들에 간격 추가하기
margin padding 사용
html5 태그를 이용하여 레이아웃을 할 때 먼저 모든 태그들의 요소들에 대한 초기화를 한다.
초기화 이후 다닥다닥 붙어있는 모양새가 너무 보기 싫다.
여백을 주면 조금은 나아보이고 화면에 표시할 콘텐츠들이 항목별로 구분되는 효과를 볼 수 있다.
여백을 주는 방법은 초기화할 때 사용했던 margin 과 padding 속성을 사용한다.
margin 과 padding은 각각 html 태그 요소의 바깥 여백과 안쪽 여백을 만드는 역할을 한다.
html5 태그 초기화한 모습
여백에 대해 찾아보면 요소와 요소 사이에 여백을 준다고 한다.
여백은 빈공간을 말한다. 요소와 요소 사이에 공간을 주어 가시성을 높으면서 나열된 콘텐츠들을 구분하는 기본적인 역할을 한다.
아래는 웹사이트의 메뉴까지 넣은 작업물을 캡쳐한 것이다.
모든 html 요소를 초기화했기 때문에 태그 요소가 다닥다닥 붙어있어 보기 불편하다.
모든 html 태그 요소의 여백을 초기화하는 것은 서로 다른 웹브라우저의 크기와 같은 코드로 다르게 나오는 웹화면을 똑같이 나오게 하기 위함이기도 하다.
html 태그 요소의 여백을 초기화하는 코드는 다음과 같다.
* {
margin: 0;
padding: 0;
}margin 바깥여백 padding 안쪽여백
margin과 padding은 각각 여백을 주는 역할을 한다.
여백을 주는 기준이 있을 것인데 각 html 태그 요소마다 보이지 않는 선을 기준으로 한다.
F12 ( 개발자모드 ) 를 눌러 마우스를 아무거나 찍어 보고 스크롤을 내려보면 maring 과 padding이 어떻게 구분되는지 알 수 있다.
아래는 티스토리 메인에 있는 스토리 아이콘의 여백을 개발자모드에서 확인한 결과이다.
여백을 적용하자
이전에 만들었던 html5 템플릿에 여백을 적용해 보도록 한다.
지금까지 진행했던 html5 코드는 이전에 포스팅한 내용을 참고한다.
html 네비게이션 메뉴 만들기 ul 태그의 사용
html에서 네비게이션바 또는 메뉴를 만들 때 ul 태그를 사용한다. ul 태그는 목록을 만들어주는 태그로 주로 목차같은 요소로 사용된다. 쓰임새가 정갈하기에 익숙해지면 여러모로 편리한 태그이
lngnat.tistory.com
가시적이고 직관적으로 보기 위해 우선 선을 적용한다.
선을 적용하면 각 요소의 크기를 가늠해 볼 수 있다.
<style>
#debug, #header, #nav, #contents, #footer {
border:1px solid black;
}
</style>먼저 margin 에 10px 를 적용한다.
margin은 지정한 요소의 바깥여백을 만드는 역할을 한다.
maring 요소를 padding 요소로 바꾸고 눈으로 확인해 본다.
padding은 지정한 요소의 안쪽여백을 만드는 역할을 한다.
<style>
#debug, #header, #nav, #contents, #footer {
border:1px solid black;
margin: 20px;
}
</style>
<style>
#debug, #header, #nav, #contents, #footer {
border:1px solid black;
padding: 20px;
}
</style>아래는 결과화면이다.
margin과 padding 을 따로따로 설정하고 눈으로 확인하면 이해가 편하다.
이제 지정한 html 태그 요소에 margin과 padding 을 모두 지정해 보도록 하자.
그리고 결과화면을 확인해 본다.
다닥다닥 붙었을 때와는 다르게 시원시원하게 떨어진 느낌이 있다.
이제 남은 것은 조금씩 코딩하면서 여백을 조절하면 된다.
여백을 조절할 때는 em, rem 과 같은 상대크기와 pt, px 와 같은 절대크기를 이용한다.
크기에 대한 부분은 나중으로 미뤄본다.
위의 이미지에 대한 전체 코드는 다음과 같다.
<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html>
<head>
<!-- 반응형 meta 명시 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/** 비영어권 문자열 깨짐 방지 */
@charset "utf-8";
/** 모든 여백 제거 */
* {
margin: 0; /* 바깥 여백 */
padding: 0; /* 안쪽 여백 */
}
</style>
<style>
/** class 공통 */
.debug, .header, .nav, .contents, .footer {
border:0px solid black;
margin: 1rem;
padding: 1rem;
}
</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 네비게이션 메뉴 수평 정렬 하기 display flex 사용 (0) | 2022.11.22 |
|---|---|
| html5 css3 네비게이션 메뉴 목록 태그 ul 초기화 하기 (0) | 2022.11.22 |
| 웹브라우저 해상도 크기 표시 너비와 높이 구하기 (0) | 2022.11.20 |
| html 네비게이션 메뉴 만들기 ul 태그의 사용 (0) | 2022.11.20 |
| html5 css3 웹페이지 초기화 모든 css 스타일 요소를 무효화 (0) | 2022.11.19 |
댓글