ㅁ < CSS >
- Cascade Style Sheet
- HTML 문서상의 요소들에 스타일을 지정하는 언어
ㅁ 참고로 style 태그를 body에 작성해도 상관없지만 head에 작성하는 것이 권장된다.
ㅁ CSS 스타일 지정 방식
(1) internal 내부 방식
- html 문서 내에 <style> 태그를 통해 스타일 구문을 작성하는 방식
(2) external 외부 방식
- 별도의 *.css 파일에 스타일 구문을 작성한 후 html 문서에 <link> 태그로 가져오는 방식
(여러 태그에 스타일 구문을 작성하면 너무 길어짐)
(3) inline 인라인 방식
- 요소 내에 style 속성을 통해 스타일 구문을 작성하는 방식
ㅁ 기본적인 스타일 작성 구조
- 선택자로 요소를 선택. 중괄호 안에 어떤 스타일을 적용할건지.
선택자 {
style속성: 값;
style속성: 값;
...
}
ㅁ 간단한 3가지 방식 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* style 태그에 들어오는 순간 CSS 영역이다.
CSS 영역 내에서의 주석은 이렇다. */
p {
color: blue;
}
div {
color: red;
background-color: blue;
}
</style>
<link rel="stylesheet" href="../assets/assets/css/00_css.css">
</head>
<body>
<!-- internal 방식 적용 -->
<p>Hello CSS</p>
<div>안녕하세요</div>
<!-- external 방식 적용 -->
<pre>반갑습니다</pre>
<!-- inline 방식 적용 -->
<span style="color: blueviolet; background-color: aqua;">다음에 뵙겠습니다</span>
</body>
</html>
- head의 link 태그로 외부 파일을 가져올 수 있다.
- span은 인라인 요소. div는 블럭 요소.
- assets에 외부 스타일 시트 파일을 담을 css 폴더 만들었다.
그리고 00_css.css 파일 만들었다.
ㅁ < 선택자 >
- 특정 html 요소를 선택하고자할 때 사용하는 기능
- 선택자를 통해 요소를 선택하여 "스타일"(css), "기능"(자바스크립트)을 적용시킬 수 있다.
- 태그 선택자. 해당 태그의 모든 요소들 선택됨.
- 아이디 선택자. id 속성값이 아이디명과 일치하는 요소 하나만 선택됨.
- 클래스 선택자. 클래스 속성값이 클래스명과 일치하는 모든 요소들 선택됨.
※ html 전용 속성 : id, class
- id : 특정 요소 하나만을 선택하기 위해 부여하는 속성 (고유한 값으로 설정) (#)
- class : 여러 요소를 한꺼번에 선택하기 위해 부여하는 속성 (중복값 작성 가능, 여러개 작성 가능) (.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div { color: red; }
h1, div { background-color: yellow; }
</style>
<style>
#p1 { color: green; }
#p2 { color: blue; }
#p1, #p2 { background-color: pink; }
</style>
<style>
.c1 { color:tomato }
.c2 { color: cornflowerblue; }
.c100 { background-color: silver;}
li.c100 { font-size: 30px;}
</style>
</head>
<body>
<h1>기본선택자</h1>
<div>태그 선택자 테스트1</div>
<div>태그 선택자 테스트2</div> <br><br>
<p id="p1">id 선택자 테스트1</p>
<p id="p2">id 선택자 테스트2</p> <br><br>
<ul>
<li class="c1">클래스 선택자 테스트1</li>
<li class="c1 c100">클래스 선택자 테스트2</li>
<li class="c2 c100">클래스 선택자 테스트3</li>
<li class="c2">클래스 선택자 테스트4</li>
</ul>
<pre class="c100">클래스 선택자 테스트5</pre>
</body>
</html>
- li 요소 중에서 클래스명을 특정해서 선택도 가능.
- 태그선택자와 조합해서 제한두기
ctrl alt 방향키로 4줄 선택하고, 글쓰면 동시에 써짐.
ㅁ 기타 선택자
(1) 자손 선택자 ( > )
- 특정 요소의 바로 하위에 있는 요소를 자손이라고 한다.
(2) 후손 선택자 ( 공백 )
- 특정 요소의 하위에 있는 모든 요소를 후손이라고 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test1 > h4 { background-color: red; }
/* id test1의 자손 중에서 h4를 선택 */
#test1 > ul > li { background-color: blue; }
#test1 li { color: cyan; }
</style>
</head>
<body>
<h1>기타 선택자</h1>
<div id="test1">
<h4>div의 자손 및 후손</h4>
<h4>div의 자손 및 후손</h4>
<ul>div의 자손 및 후손
<li>ul의 자손 및 div의 후손</li>
<li>ul의 자손 및 div의 후손</li>
</ul>
</div>
</body>
</html>
- h4와 ul이 div의 자손.
- h4와 ul, li는 div의 후손.
- h4와 ul은 형제관계 (동위관계). 같은 레벨에 있는 요소들.
(3) 동위관계 선택자(일반) (~)
- 특정 요소 뒤에 같은레벨로 존재하는 요소들 모두 선택
(4) 동위관계 선택자(인접) (+)
- 특정 요소 바로 뒤에 있는 요소 하나만 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test2 ~ div { background-color: green; }
#test2 ~ h4 { background-color: pink; }
#test2 + div { color: azure;}
#test2 + h4 { color: violet;}
/* 요소가 제대로 선택되지 않았음.
정말로 물리적으로 얘 바로 뒤에 있어야 함. id="test2"다음에 있는건 div이지 h4가 아니어서.*/
</style>
</head>
<body>
<div>
<div id="test2">div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<h4>h4</h4>
<div>div5</div>
</div>
</body>
</html>
- div1은 선택이 안됐음.
(5) 속성 선택자 : 요소[속성성택자]
- 선택하고자 하는 요소내의 속성들을 가지고 요소를 선택하는 방법
- 기준이 되는 선택자 뒤에 [ ]을 이용해서 속성과 속성값을 제시
i) 요소[속성] : 해당 속성을 가지고 있는 요소 선택
ii) 요소[속성=속성값] : 해당 속성이 저 속성값과 "일치"하는 요소 선택
iii) 요소[속성*=속성값] : 해당 속성의 저 속성값이 "포함"되어 있는 요소 선택
iv) 요소[속성^=속성값] : 해당 속성이 저 속성값으로 "시작"되는 요소 선택
v) 요소[속성$=속성값] : 해당 속성이 저 속성값으로 "끝"나는 요소 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test3 input[readonly] { color: red; }
#test3 input[name="content"] { color: green; }
#test3 input[value*="니다."] { background-color: yellow; }
#test3 input[class^="in"] { font-size: 30px; }
#test3 input[class$="le"] { font-style: italic;}
</style>
</head>
<body>
<div id="test3">
제목 : <input type="text" name="title" value="가입인사드립니다." readonly class="in-title"> <br>
내용 : <input type="text" name="content" value="반갑습니다." class="in-content">
</div>
</body>
</html>
(6) 구조 선택자
- 요소 : first-of-type : 선택된 요소들 중 첫번째 요소 선택
- 요소 : last-of-type : 선택된 요소들 중 마지막 요소 선택
- 요소 : nth-of-type(n) : 선택된 요소들 중 n번째 요소 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test4 p:first-of-type { color: red; }
#test4 p:last-of-type { color: blue; }
#test4 pre:first-of-type { color: green; }
#test4 p:nth-of-type(4) { color: violet; }
#test4 p:nth-of-type(3n) { color: chocolate } /* 3의 배수번째 선택 */
</style>
</head>
<body>
<div id="test4">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
<p>테스트7</p>
</div>
</body>
</html>
- 테스트 7이지만 6번째 p라서 선택되었다.
(7) 상태 선택자
- 텍스트 상자에 입력하기 위해 텍스트 상자를 클릭해서 커서가 깜빡이고 있으면 focus된 상태이다.
- checkbox도 체크하면 checked 상태
- 버튼도 클릭이 가능한 상태는 enabled, 불가능하면 disabled 상태.
- 요소의 상태에 따라 선택되는 선택자
i) 요소:focus : 해당 요소에 focusing이 되는 순간 스타일 적용
ii) 요소:checked : 해당 요소에 checked 되는 순간 스타일 적용
iii) 요소:enabled : 해당 요소가 활성화 상태일 경우 스타일 적용
iv) 요소:disabled : 해당 요소가 비활성화 상태일 경우 스타일 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test5 input:focus { background-color: pink; }
#test5 input:checked { width: 20px; height: 20px;} /* 기본적으로 선택된 요소(체크박스)에만 반영됨 */
#test5 input:checked + label { font-size: 20px; }
/* 동위관계 선택자 +를 사용해서 checked 상태가 되었을 때 바로 뒤에 있는 요소도 변경 가능. */
#test5 button:enabled { background-color: violet; }
#test5 button:disabled { background-color: tomato;}
</style>
</head>
<body>
<form action="/server/test.do" id="test5">
이름 : <input type="text" name="userName"> <br>
과일 :
<input type="checkbox" name="fruit" value="apple" id="apple">
<label for="apple">사과</label>
<input type="checkbox" name="fruit" value="banana" id="banana">
<label for="banana">바나나</label>
<br>
<button type="submit">제출</button>
<button type="button" disabled>클릭불가버튼</button>
</form>
</body>
</html>
(8) 반응 선택자
- 사용자의 액션에 따라 선택되는 선택자
i) 요소:active : 해당 요소를 마우스로 누르고 있는 동안 스타일 적용
ii) 요소:hover : 해당 요소에 마우스가 올라가 있는 동안 스타일 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test6 * {
width: 50px;
height: 50px;
background-color: yellow;
cursor:pointer
}
#test6 div:first-of-type:active { background-color: red; color: white; }
#test6 div:last-of-type:hover { background-color: orange; color:green; cursor: pointer; }
</style>
</head>
<body>
<div id="test6">
<div>active테스트</div> <br>
<div>hover테스트</div>
</div>
</body>
</html>
기존 / 클릭했을 때 / 올리기만 했을 때
- cursor: pointer; 하면 커서가 손모양으로 변함.
- #test6 * 을 하면 id가 test6인 요소의 모든 자식 요소를 선택하는 CSS 선택자입니다.
이 선택자를 사용하면 #test6 요소의 모든 자식 요소에 스타일을 적용할 수 있습니다.
- #test6 *는 #test6의 모든 자식 요소들에 스타일을 적용합니다.
- #test6는 #test6 자체에만 스타일을 적용합니다.
(9) 의사 요소 pseudo element
- 특수문자를 html 문서 내에 직접 써도 되지만, html 내에 말고 스타일로도 쓸 수 있다.
i) 요소::before : 요소 앞의 가상공간을 선택해서 content 추가가능
ii) 요소::after : 요소 뒤의 가상공간을 선택해서 content 추가가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test7 > span + span::before { content: "→"; }
/* span+span으로는 여름, 가을, 겨울이 선택됨. */
#test7 > span:last-of-type::after { content: "♥" }
</style>
</head>
<body>
<div id="test7">
<span>봄</span>
<span>여름</span>
<span>가을</span>
<span>겨울</span>
</div>
</body>
</html>
ㅁ 에밋(emmet) 문법
- html 요소를 보다 빠르게 생성시킬 수 있는 방법.
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
- id가 test3인 div의 자손으로 h3, ul이 있다. 그 ul의 자손으로는 li요소가 3개 있다.
div#test3>h3+ul>li*3
#test3>h3+ul>li*3
- div의 태그는 너무 많이 쓰이다 보니까 태그명 생략도 가능함.
- p 태그 사이에 문구를 쓴채로 생성.
에밋문법에 $붙이면 알아서 넘버링됨.
<div id="test4">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
</div>
ㅁ 선택자 우선순위
- 스타일 적용이 안되는 경우가 많다. 선택자들 사이에 우선순위가 있어서. 그런데 너무 많고 복잡하다.
css는 안되면 다양한 방법으로 계속 시도해 볼 수 밖에 없다.
(1) 기본적으로 css는 위에서부터 아래로 적용됨 (마지막에 작성된 스타일 반영)
동일한 요소를 동일한 방법으로 적용하면 기존에 작성된 스타일은 무시된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h3 { color: blue; }
h3 { color: red; }
h3 { color: orange; }
</style>
</head>
<body>
<h3>선택자 우선순위 테스트</h3>
</body>
</html>
f12(개발자 도구)에서 h3 클릭하면 style을 볼 수 있다.
(2) 동일한 요소를 다양한 선택자로 선택시에는 작성 순서에 상관없이 우선순위에 따라 적용된다.
태그선택자 < 클래스선택자 < 아이디선택자 < 인라인스타일 < !important
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test8 { background-color: pink; }
.class8 { background-color: yellowgreen; } /* 안먹힘 */
h3 { background-origin: teal; /* 안먹힘 */
width:300px; height: 300px; /* 먹힘 */ }
</style>
</head>
<body>
<h3 id="test8" class="class8">선택자 우선순위 테스트</h3>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test8 { background-color: pink; }
.class8 { background-color: yellowgreen; } /* 안먹힘 */
h3 { background-origin: teal; /* 안먹힘 */
width:300px; height: 300px; /* 먹힘 */ }
</style>
</head>
<body>
<h3 id="test8" class="class8" style="background-color: crimson;">선택자 우선순위 테스트</h3>
</body>
</html>
- 인라인 스타일이 적용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test8 { background-color: pink; }
.class8 { background-color: yellowgreen; }
h3 { background-color: teal !important;
width:300px; height: 300px; }
</style>
</head>
<body>
<h3 id="test8" class="class8" style="background-color: crimson;">선택자 우선순위 테스트</h3>
</body>
</html>
- !important가 적용된다.
