CSS 기본 구문
<style>
*{
margin: 0; padding: 0; box-sizing: border-box;
}
body{
font-family: "맑은 고딕",sans-serif;
color: #333;
font-size: 14px;
line-height: 1.6;
}
</style>선택자 { 속성: 속성값; }
*{} : 모든 선택자에게 적용시킨다.
body{} :<body></body>안에 포함된 값에 대하여 적용시킨다.
◼ html 파일에서 css를 작성할 때
<style></style><style> 태그를 만들어 사이에 css 구문을 작성해준다.
ex)
<!DOCTYPE html>
<html lang="en">
<head>
<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>Document</title>
<style>
h1 { font-size: 56px; } -> 선택자 { 속성: 속성값; } 글씨 크기 56px
h1 { font-size: 56px; text-align: center; } -> 글씨 크기 56px, 글씨 중앙으로
</style>◼ 선택자의 우선순위
id > class > tag
선택자 :
1. 아이디 선택자 id #title ex) #title(#이 붙으면 아이디 선택자)
2. 클래스 선택자 class .class ex) .left(.이 붙으면 클래스 선택자)
3. 태그 선택자 tagname ex) h1, div, ul 등등<h1 id="title" class="left"></h1>
CSS
◼ text 속성
color : 글자 색상 색상명 black / 16진수법 #000000 / 컬러함수 rgb(r,g,b) / 투명도 포함된 컬러함수rgba()
font-size : 글자의 크기 (14px)
line-height : 줄의 높이
font-weight : 글자 두께
letter-spacing : 자간
text-decoration : 글자꾸미기
text-indent : 들여쓰기
◼ box model
width : 너비
height : 높이
padding : 안쪽 여백
margin : 바깥쪽 여백
border : 테두리
Display
◼ display: block
<p><div><h1>...<ol><ul><li><dl><dt><dd>...
▪ 한 행을 다 차지한다
▪ 너비, 높이를 지정할 수 있다
▪ width를 지정한 후, margin: 0 auto;를 주면 중앙 정렬을 할 수 있다.
◼ display: inline
<a><img><span><mark><sup><sub><ins><del>
▪ 컨텐츠 크기가 너비가 된다.
▪ 너비와 높이를 지정할 수 없다.
▪ 좌우 padding은 지정 가능하나, 상하의 padding은 지정 불가능하다.
▪ 공간이 있으면 가로로 쌓인다.
▪ 글자로 취급되어, 부모요소의 text-align으로 정렬이 된다.
◼ display: inline-block
<input><select><button>
▪ 높이와 너비를 지정할 수 없다.
▪ 공간이 있으면 가로로 쌓인다.
▪ 상 하 좌 우의 padding 지정이 가능하다.
▪ 글자로 취급되어 부모 요소의 text-align으로 정렬할 수 있다.
◼ display: flex
선택자
모든 선택자 / 아이디 선택자 / 클래스 선택자 / 태그 선택자
복합 선택자
◼ 하위 선택자
<div> <p></p> </div>css에 입력할 때
#div p
◼ 자식 선택자
<div id="wrap"> <div id="div"> <p id="p"></p> </div> </div>css 입력할 때
div > div
이 경우,<div id="wrap">바로 아래의<div id="div">에게 적용된다.
<p id="p">에는 적용되지 않는다.
형제 선택자
<div>
<h1></h1>
<p class="1"></p>
<p class="2"></p>
<p class="3"></p>
<p class="4"></p>
</div>◼ 인접 형제 선택자 +
css에
h2 + p를 입력하면,
h2는 포함되지 않고 바로 옆의<p class="1"></p>1개에게 적용된다.
◼ 일반 형제 선택자 ~
css에
h2 ~ p를 입력하면,
h2와 함께 같은 줄의<p class="1"></p>,<p class="2"></p>,<p class="3"></p>,<p class="4"></p>4개의p에 적용된다.
속성 선택자
속성 선택자는 지정한 속성을 가진 요소를 찾아 스타일을 적용한다.
▪ 사용하는 방법은 대괄호([,])사이에 찾으려는 속성을 지정하면 된다.
▪ 다음 예제는 a[href] 선택자를 사용해 <a>태그 중 href라는 속성이 있는 요소를 찾아내 배경색을 지정하는 것이다.
(예제에서는 다섯개의 <a>태그를 사용했지만 첫번째 <a>태그에는 href속성이 없기 때문에 배경색이 표시되지 않는다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
ul {
list-style:none;
}
li {
width:120px;
display:inline-block;
margin:10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
a[href] {
background:yellow;
}
</style>
</head>
<body>
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</body>
</html> <a> 이하에 href를 가진 모든 구문에 css를 적용시키려면 css 입력할 때 a[href]
◼ <a href="a"> 속성 선택자 활용법
▪ 글자가 완전히 일치할 경우
[href="a"]
▪ 앞글자가 a로 시작하는 경우[href^="a"]
▪ 뒷글자가 a로 끝나는 경우[href$="a"]
▪ a가 포함된 경우[href*="a"]
▪ css 입력시a[href="a"]와 같다.
가상 클래스 선택자
◼ 동적 선택자
▪ css 입력할 때 a:link { color: blue; } → 선택자가 방문하지 않은 링크일 때, 글자색을 blue로 변환
▪ css 입력할 때 a:visited { color: blue; } → 선택자가 방문한 링크일 때, 글자색을 blue로 변환
▪ css 입력할 때 a:hover { color: blue; } →<a>태그에 마우스를 올리면, 글자색을 blue로 변환
▪ css 입력할 때 a:active { color: blue; } →<a>태그를 선택한 상태일 때, 글자색을 blue로 변환
▪ css 입력할 때 a:focus { color: blue; } →<a>태그에 포커스가 들어갔을 때, 글자색을 blue로 변환
◼ 구조 가상 클래스 선택자
▪ first-child → 선택자에 해당하는 모든 요소 중 첫번째 자식 요소를 선택
▪ last-child → 선택자에 해당하는 모든 요소 중 마지막 자식 요소를 선택
▪ nth-child(n) → 선택자에 해당하는 모든 요소 중 n번째 자식 요소를 선택
▪ nth-of-type(n) → 선택자에 해당하는 type이 같은 요소 중 n번째 자식 요소를 선택
▪ nth-child(odd) → 선택자에 해당하는 모든 요소 중 홀수번째 자식 요소를 선택
▪ nth-child(even) → 선택자에 해당하는 모든 요소 중 짝수번째 자식요소를 선택
css 입력할 때 div:nth-child(1) 와 같다 !
◼ 부정 선택자
▪ not(선택자)
▪ css 입력할 때 div:not(banana) 와 같다!
가상 요소 선택자
▪ ::after → 콘텐츠의 뒤에 위치하는 공간을 선택
content 속성과 함께 사용
▪ ::befor → 콘텐츠의 앞에 위치하는 공간을 선택
content 속성과 함께 사용
css입력시 p::after{ content:"🔴"; } 와 같다 !
<p></p>안에 작성되므로,p의css를 그대로 받는다.
▪ ::first-letter → 콘텐츠의 첫 글자를 선택
블록 요소만 적용
▪ first-line → 콘텐츠의 첫 줄을 선택
블록 요소만 적용
▪ css 입력할 때 p::first-letter{ font-size:24px; } 와 같다 !
