text-align: center 작동하지 않을 때 해결법
글자나 하위 태그를 가운데 정렬하려고 할때 text-align: center 를 사용하여 해결하려 할 때 잘 작동하지 않을 때가 있다. 이떄는 보통 display: flex 를 같이 사용하지 않았거나 글자나 하위태그를 감싸
wotres.tistory.com
text-align 쓰는 법에 대해서 익히자..!
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* reset */
body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset,
legend, p, select, table, th, td, tr, textarea, button, form {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
/* skip menu */
#skip {
position: relative;
}
#skip a {
position: absolute;
top: -100px;
left: 0px;
border: 1px solid #fff;
color: #fff;
width: 140px;
text-align: center;
}
#skip a:active, #skip a:focus {
top: 0;
}
/* layout */
#header {
width: 100%;
height: 300px;
background-color: #222;
}
#cont_nav {
width: 100%;
height: 200px;
background-color: #333;
}
#cont_tit {
width: 100%;
height: 200px;
background-color: #444;
}
#cont_ban {
width: 100%;
height: 200px;
background-color: #555;
}
#cont_cont {
width: 100%;
height: 200px;
background-color: #666;
}
#footer {
width: 100%;
height: 300px;
background-color: #777;
}
.container {
width: 900px;
height: inherit;
background-color: rgba(0, 0, 0, 0.3);
margin: 0 auto;
}
/* header_menu */
.container {
position: relative;
}
#header_menu {
text-align: right;
}
#header_menu a {
text-decoration: none;
padding: 10px 0px 10px 13px;
display: inline-block;
color: #fff;
}
#header #header-tit {
text-align: center;
}
#header-tit h1 {
color: #fff;
background-color: #4aa8d4;
display: inline-block;
font-size: 28px;
padding: 5px 20px 6px 20px;
margin-top: 40px;
font-weight: normal;
text-transform: uppercase;
}
#header-tit a {
background-color: #2698cb;
padding: 5px 20px 6px 20px;
font-size: 18px;
color: #fff;
display:inline-block;
}
#header-tit a {
text-decoration: none;
margin-top: -5px;
}
</style>
</head>
<body>
<div id="skip">
<a href="#cont_nav">전체 메뉴 바로가기 </a> <a href="#cont_ban">배너 메뉴 바로가기
</a> <a href="#cont_cont">컨텐츠 메뉴 바로가기 </a>
</div>
<div id="wrap">
<div id="header">
<div class="container">
<div id="header_menu">
<a href="Designer">Designer</a> <a href="Publisher">Publisher</a> <a
href="Youtube">Youtube</a>
</div>
<div id="header-tit">
<h1>PROFESSIONAL PUBLISHER & DESIGNER</h1><br>
<a href="https://wtss.tistory.com/177#">webstoryboy.co.kr</a>
</div>
</div>
</div>
<div id="cont_nav">
<div class="container"></div>
</div>
<div id="cont_tit">
<div class="container"></div>
</div>
<div id="cont_ban">
<div class="container"></div>
</div>
<div id="cont_cont">
<div class="container"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
</div>
</body>
</html>'웹 프로그래밍(풀스택-->java) > 웹프로그래밍(프론트엔드-->java)' 카테고리의 다른 글
| 6. 전체 메뉴 수정 (0) | 2021.12.15 |
|---|---|
| 5. reset.css 기본 템플릿~! (0) | 2021.12.12 |
| 4. 웹 표준 사이트 만들기 - 헤더 아이콘 수정 (0) | 2021.12.12 |
| 2. 웹 표준 사이트 만들기 - 헤더 배경&메뉴 (0) | 2021.12.10 |
| 1. 웹 표준 사이트 만들기 (스킵네비게이션) (0) | 2021.12.10 |
