CSS BASICS
in Programming on HTML/CSS
CSS 선택자
전체 선택자 : *{ property : value; property : value} 이렇게 쓰면 모든것에 대해 적용된다. 문서의 글꼴이나 디자인 등을 초기화할 때 사용한다.
태그 선택자 :
class 선택자 :
id 선택자 :
문서 구조를 이용한 선택 (부모와 자식)
가상 클래스:
a:hover{} : 마우스 링크 위로 돌아다닐 때
a:active{} : 링크가 클릭됐을 때 (찰나)
a:link{} : 평상시 하이퍼링크 걸린 화면
<style> a:link{ text-decoration:none; color : cyan; } </style>a:visited{} :한번 다녀왔을 때
a:focus{}
first-child
last-child
<a href = "http://google.com">google</a>google에 밑줄이 쳐진다. 이걸 제어해주는게 가상 클래스
가상 요소
속성 선택자
[], [속성명 = “값”] style태그에.
~= :특정 단어가 포함된 요소
^= : 특정 단어로 시작하는 요소
$= : 특정 단어로 끝나는 요소
*= :
<input type = "text">
CSS 태그들
- style태그는 head안에 쓴다.
<style>
selector { property : value; property : value}
</style>
- flow : body 태그 내에서 문서가 자연스럽게 배치되는 태그들. a,h,div,input, heading tag
- sectioning tag : 문서의 구조와 관련된 태그들. article, nav,section, aside
heading tag : h1 ~h6 타이틀을 정의하는 태그들.
Globla Attributte :
- HTML의 모든 요소와 사용할 수 있는 속성을 얘기한다.class, id, data-* ,style 등등
- class와 ID
구체성
선택자의 종류에 따른 구체성
- 인라인 명시: 1000
- id 선택자 : 100, #id
- class 선택자 : 10, .item
- 요소 선택자 : 1
- !important: 다무시 걍 얘가 제일 우선
h1 { color : green !important}
h2{} : 1
body h2{} : 2
.one{} : 10
#all{} : 100
p.one em.two > li::first-line{} : >는 구체성값x . 따라서 33
띄어쓰기 : 자손선택
> : 자식 태그
+ : 인접형제 선택자
*.three{} *는 아무런 구체성값을 가지지 않는다. 그래서 10
ex)
CSS 파일
div > p {
color : red;
font-size: 2em;
}
div + p{
color : blue;
}
.wrap .list .b{
color : orange;
}
/* 띄어쓰기 : 자손선택
*/
HTML 파일
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel = "stylesheet" type ="text/css" href ="CSS.css">
</head>
<body>
<div>
<div>CSS 테스트 입니다.</div> <!-- 아무것도 적용이 되지 않음.ㄹ -->
<p>CSS 테스트 입니다.</p> <!-- div > p 가 적용된다. -->
<p>CSS 테스트 입니다.</p> <!-- -->
<p>CSS 테스트 입니다.</p> <!-- -->
</div>
<div class="wrap">
<strong>CSS 테스트 입니다.</strong>
<p>CSS 테스트 입니다.</p>
<ul class = "list">
<li class = "item a">first</li>
<li class = "item b">second</li>
<li class = "item c">third</li>
</ul>
</div>
</body>
</html>
결과가 어떻게 될까?
(추후 추가)
CSS 적용방법
- Inline : 태그에 직접적용 , 구체성이 가장 높지만 재활용 못해서 자주 사용하진 않는다. style 이라는 글로벌 속성으로 적용
- Internal : style 태그 내에 정의한 규칙대로 스타일이 적용된다. 많이 사용되지만 페이지마다 따로 적용해야하는 한계가 있다.
- External : 재활용해야하는 스타일을 하나의 파일로 작성해서 사용하는 방법, 파일로 만든 스타일을 <link>태그로 불러와 적용한다.
- Import : 스타일 시트내에서 다른 스타일을 불러오는 방식, 성능 문제로 최근에는 자주 사용되지 않는다.
CSS 예시
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>회원가입</title>
<style>
h1{
text-align : center; /*인라인 요소만 가운데로, 블록요소 가운데로 보내기 위해서는 마진을 사용해야한다.*/
}
/*div 태그의 class 명이 wrap인 애는 아래와같은 조건을 주거라
div#container{
} #은 id 값
*/
div.wrap {
margin : 0 auto;
border : 1px solid gray;
width : 1000px;
}
table{
margin :0 auto; /*이렇게 하면 가운데로 간다.*/
}
</div>
</style>
</head>
<body>
<div class="wrap">
<h1>[ 회원 가입 ]</h1>
<table border ="1">
<tr>
<th>아이디</th>
<td><input type="text" placeholder ="3~5자리의 영문자">
<input type="button" value="중복확인"></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" placeholder ="이름입력"></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password"></td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td><input type="password"></td>
</tr>
<tr>
<th>이메일</th>
<td><input type="email"></td>
</tr>
<th>성별</th>
<td><input type="radio" name = "gender" value = "남성" checked>남성
<input type="radio" name = "gender" value = "여성">여성</td>
</tr>
<tr>
<th>생년월일</th>
<td><select>
<option value="">2020</option>
<option value="">2019</option>
<option value="">2018</option>
<option value="">2017</option>
<option value="">2016</option>
</select>년<select>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select>월
<select>
<<option value="">1</option>
</select>일
</td>
</tr>
<tr>
<th colspan="2"><input type = "button" value="회원가입">
<input type = "reset" value="취소"></th>
</tr>
</div>
</body>
</html>
상속
- 부모태그가 가진 css가 내부에 속한 자식 태그에게물려지는 특징
- 박스 모델 속성(margin, border, padding)은 상속되지 않는다.
- 상속된 속성은 구체성 자체가 없다!
