고래씌
[CSS] 9. 시맨틱태그 본문
1. 시맨틱(Semantic, 의미) 태그 (의미있는 태그)
- 기존 영역분할에 사용되었던 div, span 등의 태그들은 태그의 이름만 봤을 때는 나누었다. 라는 것 이외의 의미를 파악할 수 없음.
☞ 태그만 봤을 때 태그의 목적을 알 수 없어 id나 class를 반드시 추가해야 한다.
- 이런 문제점을 해결하고자 태그의 이름만으로 어느정도 어떤역할을 하는지 알 수 있고 웹 접근성을 향상에 도움이 되는 시맨틱 태그가 추가됨(HTML5)
▶ [제공하는 태그]
- header 태그 : 문서의 제목, 머리말 영역
- footer 태그 : 문서의 하단부분, 꼬리말, 정보작성 영역
- nav 태그 : 나침반역할(다른페이지 이동, 사이트 이동)의 링크 작성 영역
- main 태그 : 현재 문서의 주된 콘텐츠 작성 영역
- section 태그 : 구역구문을 위한 영역
- article(작은 토막) 태그 : 본문과 독립된 콘텐츠를 작성하는 영역
- aside 태그 : 사이드바(양쪽), 광고 영역
☞ 8. 웹문서 구조(실습)를 하였던 파일을 가지고 모두 시멘틱 태그로 바꿔보았다.
☞ 시멘틱태그로 바꾸면 css파일에 있던 태그들도 모두 수정을 해주어야 한다.
■ 14_웹문서구조.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>19_시맨틱태그</title>
<link rel="stylesheet" href="resources/css/structure2.css">
<script src="https://kit.fontawesome.com/a2e8ca0ae3.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<header>
<!-- header의 첫번째 자식 사이트로고-->
<section>
<a href="#">
<img src="resources/image/다운로드.png" id="home-logo">
</a>
</section>
<section>
<!-- header의 두번째 자식div(검색창)-->
<article class="search-area">
<form action="#" name="search-form">
<!--form내부 input들을 그룹화시킬때 사용-->
<fieldset>
<input type="search" name="query" id="query"
placeholder="검색어를 입력해주세요"
autocomplete="off">
<!--autocompleto : html 의 기본자동완성 사용여부-->
<button type="submit" id="search-btn"
class="fa-solid fa-magnifying-glass"></button>
</fieldset>
</form>
</article>
</section>
<section></section>
</header>
<nav>
<!-- ul>(li>a)*5 -->
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">자유 게시판</a></li>
<li><a href="#">질문 게시판</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">1:1문의</a></li>
</ul>
</nav>
<section class="content">
<section class="content-1"></section>
<section class="content-2">
<form action="#" name="login-form" mehtod="post">
<!-- 아이디/비번/로그인버튼 영역 -->
<fieldset id="id-pw-area">
<!-- 아이디/ 비번 -->
<section>
<input type="text" name="inputId" placeholder="아이디">
<input type="password" name="inputPw" placeholder="비밀번호">
</section>
<!-- 버튼 -->
<section>
<button>로그인</button>
</section>
</fieldset>
<!-- 회원가입 / 아이디, 비번찾기 영역 -->
<article ID="signup-find-area">
<a href="#">회원가입</a>
<span>|</span>
<a href="#">ID/PW 찾기</a>
</article>
</form>
</section>
</section>
<footer class="footer">
<p>Copyright @copy; Whale Information Educational Institute class</p>
<article>
<a href="#">프로젝트 소개</a>
<span>|</span>
<a href="#">이용약관</a>
<span>|</span>
<a href="#">개인정보처리방침</a>
<span>|</span>
<a href="#">고객센터</a>
</article>
</footer>
</main>
</body>
</html>
■ structure2.css
*{box-sizing: border-box;}
body{margin: 0;} /* body태그의 기본 margin 제거 */
/* div{
border: 1px solid black;
} */
main{
width: 1140px;
margin:auto;
}
/* 추가 된 것 (color: black; 삭제, text-decoration:none; 삭제 */
a{
text-decoration: none;
color: black;
}
/* ------ */
/* 검색창 */
/* header*/
header{
height:200px;
display: flex;
}
/* flex-basis : 중심축 기준 각 아이템의 점유율 설정할수 있었다.*/
header > section:nth-of-type(1){
flex-basis : 15%;
}
/* 로고 */
header > section:nth-of-type(1){
display: flex;
justify-content: center;
align-items: center;
}
#home-logo{
width: 120px;
}
header > section:nth-of-type(2){
flex-basis : 70%;
display: flex;
justify-content: center;
align-items: center;
}
header > section:nth-of-type(3){
flex-basis : 15%;
}
.search-area{
width: 500px;
/* 검색창을 가로, 세로 가운데 정렬 */
/* fieldset의 부모에 display: flex;를 걸어줌 */
}
.search-area fieldset{
padding : 2px;
margin:0;
border : 2px solid blue;
border-radius : 10px;
display: flex;
}
#query{
padding: 10px;
font-size: 18px;
font-weight: bold;
border : none;
/*
outline : input태그에 포커스가 맞춰졌을때
이를 표현하기 위한 바깥쪽 선(테두리보다 바깥에 존재)
*/
outline : none;
width:92%;
}
#search-btn{
width:8%;
cursor:pointer;
font-size:1.2em;
color: #455BA8;;
background-color: white;
border: 0;
}
/* navigator */
nav{
width: 1140px;
height: 50px;
/* 네비게이션바 밑에 선 추가 */
border-bottom: 2px solid black;
position:sticky;
/*
sticky : 스크롤이 임계점에 도달했을 때 화면에 스티커처럼 붙임
- 평소상태는 static(기본값)
임계점 도달시 fixed로 변경.(화면의 특정위치에 고정)
* top, bottom, left, right 속성이 필수로 작성되어야함
=> 임계점 도달시 어느 위치에 부착할지를 지정하는 속성으로 사용
*/
top: 0; /* 최상단에 붙임 */
}
/* 한줄로 설정 */
nav > ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
height: 100%;
}
nav li{
flex : 0 1 150px;
/* 팽창, 수축, 기본값 */
}
nav a {
display: block;
height: 100%;
/* 글자를 가로로 가운데 정렬 */
text-align: center;
/* 글자를 세로로 가운데 정렬 */
/* 세로 가운데 정렬 1번째 방법 */
/* line-height: 48px; border 값을 제거해주어야 하기 때문에 48px 부여 */
/* 세로 가운데 정렬 2번째 방법 */
padding: 11px 0;
text-decoration: none; /* 밑줄제거 */
font-size: 18px;
font-weight: bold;
border-radius: 5px;
transition: 0.1s;
}
nav a:hover{
background-color: #455ba8;
color:white;
}
/* login */
.content{
height: 800px;
display: flex;
/* 네비게션바와의 위에 간격을 넣음 */
margin-top: 10px;
}
.content-1{flex-basis: 70%;}
.content-2{flex-basis: 30%;}
/* content-2의 자식인 form에다가 padding 값을 넣어야 로그인, 비밀번호 입력창간에 간격이 생김 */
.content-2>form[name="login-form"]{
padding: 10px;
}
#id-pw-area{
border: 1px solid #ddd;
margin: 0px;
padding: 0px;
display: flex;
flex-basis: 60%;
}
#id-pw-area > section:first-of-type{
flex-basis: 75%;
/* 정렬방향을 한줄로 */
display: flex;
/* 정렬방향을 아래로 향하게 함 */
flex-direction: column;
}
#id-pw-area input{
flex-basis: 50%;
border: 0;
border-right: 1px solid #ddd;
outline: 0;
margin: 0;
padding: 5px;
}
#id-pw-area input:first-child{
border-bottom: 1px solid #ddd;
}
#id-pw-area > section:last-of-type{
flex-basis: 25%;
display: flex;
/* 다른 요소와 충돌이 있을것을 방지 */
justify-content: center;
}
#id-pw-area input:focus{
border: 2px solid #455ba8
}
/* 로그인 버튼 */
#id-pw-area button{
width: 100%;
border:0;
background-color: white;
cursor: pointer;
}
#id-pw-area button:hover{
background-color: #455ba8;
color: white;
}
/* 회원가입 / ID/PW찾기 영역 */
#signup-find-area{
margin-top:10px;
padding-left: 5px;
flex-basis: 40%;
}
#signup-find-area a{
font-size:14px;
}
#singup-find-area > span{
padding:0 10px;
}
/* footer */
footer{
width: 99vw;
height:200px;
position:absolute;
bottom:0;
left:0;
}
footer{
background-color: #a3add342;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer > p{
font-weight: bold;
}
footer > div > *{
font-size: 14px;
}
footer span{
padding: 0 10px;
}
'Front-End > CSS' 카테고리의 다른 글
| [CSS] 8. 웹문서 구조(실습) (0) | 2023.11.07 |
|---|---|
| [CSS] 7. 변형 관련 스타일 (0) | 2023.11.07 |
| [CSS] 6. 글꼴(폰트)관련 스타일 (1) | 2023.11.03 |
| [CSS] 5. 글자관련 스타일 (1) | 2023.11.03 |
| [CSS] 4-3. FlexBox ③ (item 전용 속성-수축, 팽창 등) (0) | 2023.11.03 |
'Front-End/CSS' Related Articles
more
