클래스와 이미지 스프라이트
-
id : #id ( 한번 )
-
class : .class ( 여러번 )
-
이미지 스프라이트 : 여러 그림들이 하나로 뭉쳐져 있는 이미지 -> 서버 요청을 줄일 수 있어 좋음
백그라운드와 박스모델
background-image: url(./sp_search.png);
background-position: -3px -60px;
background-repeat: no-repeat;
----- 위에 3줄을 1줄로 줄이는 법 -----
background: url('./sp_search.png') -4px -4px no-repeat;- a태그에서 -모양의 그림이 남겨져있는데 없애려면 text-decoration : none 을 사용하면 없어진다.
- margin : 바깥과 바깥 사이의 간격
- border : 테두리
- padding : 안쪽과 안쪽 사이의 간격
box-sizing과 hex, rgb
- box-sizing은 content-box와 border-box로 나타낼 수 있다.
box-sizing : content-box -> content 박스의 크기
box-sizing : border-box -> border, padding, content 를 합친 크기* { -> * 태그는 모든 태그를 의미한다
box-sizing : border-box
}border : 2px solid #03cf5d -> border를 나타냄 #03cf5d는 hex표기법으로 인터넷에서 찾아볼 수 있음// 테두리와 간격을 없애주는 명령어
border : none;
padding : 0;
outline : none; -> input을 입력할 때 테두리가 나오는데 그 테두리 마저 없애주는 기능
margin : 0;vertical-align : middle등등.. -> 정렬기능전체코드
- naver.html
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- meta태그는 문서에 대한 정보를 나타냄 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>네이버</title>
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico">
<link rel="stylesheet" href="./naver.css">
</head>
<body>
<header>
<div id="header-center"> <!-- 가운데 정렬용 div -->
<!-- 속성명: 속성값; 속성명2: 속성값2 -->
<span>네이버를 시작페이지로</span>
<span>쥬니어네이버</span>
<span>해피빈</span>
<!-- <div style="display : inline-block">네이버를 시작페이지로</div>
<div style="display : inline-block">쥬니어네이버</div>
<div style="display : inline-block">해피빈</div> -->
<div id="header-search">
<!-- href 는 a태그의 부가정보 속성(attribute) -->
<a href="https://www.naver.com">
<h1>
<span>네이버</span>
</h1>
</a>
<h2 class="blind">검색창</h2>
<fieldset>
<input type="text">
<button>
<span class="blind">검색</span>
<span id="search-image"></span>
</button>
</fieldset>
</div>
</div>
</header>
<nav>
<ul> <!-- unordered list --> <!-- ol태그도 있음 ordered list -->
<li>메일</li> <!-- list item -->
<li>카페</li> <!-- list item -->
<li>블로그</li> <!-- list item -->
<li>지식인</li> <!-- list item -->
<li>쇼핑</li> <!-- list item -->
<li>네이버페이</li> <!-- list item -->
<li>네이버쇼핑</li> <!-- list item -->
</ul>
</nav>
<main>
<h2>실시간 검색어</h2>
<h3>연합뉴스</h3>
<ol>
<li>프론트엔드</li>
<li>할수있다</li>
<li>굿굿</li>
</ol>
<h3>언론사 목록</h3>
<ul>
<li><img src="image/서울신문.png" alt="서울신문"></li>
<li><img src="image/스포티비.png" alt="스포티비"></li>
</ul>
<h3>로그인</h3>
<h3>뉴스</h3>
<h3>법률</h3>
<h3>쇼핑</h3>
</main>
<footer>
<div>공지</div>
<div>creaters</div>
<div>회사소개</div>
</footer>
</body>
</html>- naver.css
/* *은 모든 태그 의미 */
* {
box-sizing: border-box;
}
/* 선택자 (selector) */
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
#header-center {
margin: 0 auto;
width: 1080px;
}
/* 자식 선택자 */
div#header-search h1 {
width: 198px;
height: 48px;
display: inline-block;
/* background-image: url('./sp_search.png');
background-position: -4px -10px;
background-repeat: no-repeat; */
background: url('./sp_search.png') -4px -4px no-repeat;
vertical-align: middle;
}
#header-search a {
text-decoration: none;
vertical-align: middle;
}
#header-search h1 span {
display: none;
}
div#header-search h2 {
display: none;
}
div#header-search fieldset {
margin-left: 20px;
padding: 12px 0px 12px 10px;
border: 2px solid #03cf5d;
width: 521px;
height: 49px;
display: inline-block;
vertical-align: middle;
}
#header-search fieldset input {
border: none;
padding: 0;
outline: none;
}
#header-search fieldset button {
width: 49px;
height: 49px;
border: none;
padding: 0;
background :#03cf5d;
}
#search-image {
background-image: url(./sp_search.png);
background-position: -3px -60px;
background-repeat: no-repeat;
width: 21px;
height: 21px;
display: inline-block;
margin: 14px;
}
/*
div#header-center h1 {
자손 선택자
}
*/
안녕하세요