HTML(10) - CSS 기초/css 위치에 따른 스타일 적용/기본 선택자/속성 선택자/계층 관련 선택자/가상 선택자(반응 선택자)
KCasey2020. 5. 14. 17:40
basic.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 기초</title>
<style type="text/css">
* {/* 전체 선택자("*") : 모든 태그에 적용 */
border: 5px solid black; /* solid : 채워짐, black : 검은색 */
padding: 50px;
margin: 50px;
}
/* 1. 태그 선택자 */ /* 요소별로 따로 스타일을 지정해줘도 되고 같은 스타일을 필요로할 시 태그끼리 묶어서 같이 스타일 적용 시켜줘도 됨 */
h1 {
color: blue; /* color : 글자 색상 */
font-size: 15px; /* 글자 크기 */
}
p {
color: red;
}
h1, p {
background-color: yellow;
}
</style>
</head>
<body>
<!-- CSS(Cascading Style Sheet) version 3
형식
선택자 {
속성: 값;
속성: 값;
....
}
html의 style 태그에 위와 같이 작성.
-->
</body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam gravida nunc lorem, sit amet finibus tortor viverra quis.
Nunc lectus eros, scelerisque ut molestie nec, facilisis eget diam.
Vestibulum eget diam porttitor, rhoncus nisi ac, condimentum enim.
Cras aliquet ultricies volutpat. Nulla vitae tellus dui.
Maecenas vel nibh sit amet neque luctus tincidunt. Vestibulum quam nibh,
scelerisque at leo elementum, dapibus elementum elit. Phasellus congue sed
lacus in volutpat. In ac nunc a urna gravida laoreet. Etiam tellus purus,
posuere quis accumsan eget, dapibus eget tellus. Pellentesque eget elit libero.
Aenean congue dolor massa, non euismod risus dictum ultricies.
Sed sit amet aliquam neque. Praesent semper magna justo, in tempus odio blandit et.
</p>
<h1>두번째 제목</h1>
<h2>세번째 제목</h2>
</html>
css_location.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 위치에 따른 스타일 적용</title>
<link type="text/css" rel="stylesheet" href="css/extern.css"></link><!-- 3. 외부 스타일 불러오기 -->
<link type="text/css" rel="stylesheet" href="css/extern2.css"></link>
<style type="text/css">
/* 2. 내부 스타일*/
p2 {
color: blue;
}
p1 {
color: maroon;
}
</style>
</head>
<body>
<!-- 스타일 적용 방법
1. 인라인 스타일 적용 : 각 태그에서 style 속성 설정.
2. 내부 스타일 적용 : style 태그에 설정
3. 외부 스타일 적용 : css 파일을 생성하여 설정
스타일 적용 우선순위
1.인라인 스타일 > 내부 스타일 / 외부 스타일 순서대로 진행되기 때문에 최종적으로 오늘 스타일이 적용됨 > 3.브라우저 스타일
-->
<!-- 1. 인라인 스타일 -->
<p1 style="color: red;">인라인 스타일 적용</p1><br><!-- p1이라는 태그를 그냥 만들어 줌 -->
<!-- 2. 내부 스타일 적용 (위에 style 태그로 적용) -->
<p2>내부 스타일 적용</p2><br>
<!-- 3. 외부 스타일 (프로젝트 내에 css 파일을 생성해줌) --><!-- 장점 : 한번 만들어 두면 여러 파일에 적용시킬 수 있음 -->
<p3>외부 스타일 적용</p3><br>
<p4>또 다른 외부 스타일 적용</p4>
</body>
</html>
extern.css
@charset "UTF-8";
p3 {
color: green;
background-color: yellow;
}
p1 {
color: silver;
}
p1 {/* 중첩되는 속성이 없기 때문에 따로 적어주어도 적용이 됨 */
background-color: #7163bc;
}
/*
다른 스타일들 작성..
다른 스타일들 작성..
*/
extern2.css
@charset "UTF-8";
p4 {
color: aqua;
font-size: 12px;
}
/*
다른 스타일들 작성..
다른 스타일들 작성..
*/
basic_selector.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 선택자</title>
<style>
.c1 {
color: teal;
background-color: navy;
}
.c2 {
color: fuchsia;
background-color: silver;
}
/* 태그 선택자와 클래스 선택자의 조합 : 태그와 클래스 모두 만족하는 라인에만 적용됨 */
h2.c1 {/* h2태그 중에서 class가 c1인 요소만 선택하라 */
color: navy;
background-color: pink;
}
.c1,.c2, h2 {/* 클래스도 여러개 한번에 스타일 적용 가능 */
font-size: 10pt;
}
/* 아이디 선택자 스타일 */
#id1 {
color: blue;
background-color: pink;
}
#id2 {
color: orange;
background-color: yellow;
}
h4#id1 {
color: aqua;
background-color: gray;
}
/* 속성 선택자 스타일 */
h3[text] {
color: red;
background-color: gray;
}
p[text] {
color: blue;
background-color: silver;
}
h3[text="attr3"] {
color: green;
background-color: pink;
font-size: 25px;
}
input[type="text"] {
color: white;
background-color: red;
}
input[type="password"] {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<!-- 기본 선택자의 종류
1. 전체 선택자(*) : 모든 태그(요소)를 선택.
2. 태그 선택자 : 지정한 태그를 선택.
3. 클래스 선택자(.) : 태그의 클래스 속성을 선택
4. 아이디 선택자(#) : 태그의 id 속성을 선택.
5. 속성 선택자 : 태그의 특정 속성과 속성의 값으로 선택.
클래스와 아이디 선택자의 차이 : 클래스는 여러개의 비슷한 요소들을 묶어주는 느낌,
아이디는 한 요소에 한 아이디를 적용하는 느낌으로 주로 쓰인다.
-->
<h2>클래스 선택자</h2>
<h3 class="c1">class가 c1인 h3요소</h3>
<p class="c1">class가 c1인 p요소</p>
<h3 class="c2">class가 c2인 h3요소</h3>
<p class="c2">class가 c2인 p요소</p>
<h2 class="c1">class가 c1인 h2요소</h2>
<h2>그냥 h2인 요소</h2>
<p>그냥 p인 요소</p>
<hr>
<h2>아이디 선택자</h2>
<h3 id="id1">id1인 h3 요소</h3>
<p id="id1">id1인 p 요소</p>
<h3 id="id2">id2인 h3 요소</h3>
<p id="id2">id2인 p 요소</p>
<h4 id="id1">id1인 h4 요소</h4>
<h4>그냥 h4 요소</h4>
<hr>
<h2>속성 선택자</h2>
<h3 text="attr1">text 속성이 부여된 h3요소(attr1)</h3><!-- text 속성에 노란줄 뜨는 이유 : 원래 없는 속성인데 내가 그냥 만들어 준거라서! -->
<h3 text="attr2">text 속성이 부여된 h3요소(attr2)</h3>
<p text="attr3">text 속성이 부여된 p요소(attr3)</p>
<h3 text="attr3">text 속성이 부여된 h3요소(attr2)</h3>
<p>속성 없는 p요소</p>
<hr>
<fieldset>
<legend>로그인</legend>
<form>
ID : <input type="text" name="id"><br>
PW : <input type="password" name="pw"><br>
<input type="submit">
</form>
</fieldset>
</body>
</html>
attribute_selector.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style type="text/css">
/* 일반 속성 선택자 */
p[text] {
color: red;
}
p[text="red"] {
color: yellow;
background-color: purple;
}
p[text~="bb"] {
color: yellow;
background-color: green;
}
p[text|="a1"] {
color: yellow;
background-color: blue;
}
p[text^="img"] {
color: yellow;
background-color: red;
}
p[text$="png"] {
color: yellow;
background-color: gray;
}
p[text*="ong"] {
color: yellow;
background-color: pink;
}
</style>
</head>
<body>
<!-- 속성 선택자의 형식
[속성] : 속성의 값과 상관없이 해당 속성 모두 선택
[속성="값"] : 속성의 값에 해당하는 태그 선택
[속성~="값"] : 공백으로 구분한 속성 값들 중 하나가 주어진 값과 동일한 태그 선택
[속성|="값"] : 속성 값이 해당 값과 동일하거나, 주어진 값으로 시작하고 '-'로 이어진 값을 갖는 태그 선택
[속성^="값"] : 속성 값이 주어진 값으로 시작하는 태그 선택
[속성$="값"] : 속성 값이 주어진 값으로 끝나는 태그 선택
[속성*="값"] : 속성 값이 주어진 값을 부분 문자열로 갖는 태그 선택
-->
<p text="hello"> 일반 속성 선택자</p>
<p text="red"> 속성값이 같은 태그 선택자</p>
<p text="aa bb cc"> ~에 해당하는 태그 선택자</p>
<p text="a1-a2-a3"> |에 해당하는 태그 선택자</p>
<p text="img/pic.jpg"> ^에 해당하는 태그 선택자</p>
<p text="img/pic.png"> $에 해당하는 태그 선택자</p>
<p text="Hong Gil Dong"> *에 해당하는 태그 선택자</p>
</body>
</html>
hierachy_selector.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>계층 관련 선택자</title>
<style type="text/css">
/* 후손 선택자 */
div.c1 ul{/* div 안에 ul이 있으면 스타일 적용하라는 의미 */
color: red;
}
div.c1 h2{/* 후손선택자는 띄어쓰기로 구분해준다 */
color: blue;
}
div.c1 li {
background-color: yellow;
}
/* 자손 선택자 */
div.c2 > h3 {
color: red;
}
div.c2 > tel > home {
color: fuchsia;
}
/* 인접 형제 선택자 스타일 */
h2 + h3 + ul {/* h2와 h3에 붙어있는 ul에만 스타일 적용 */
color: lime;
}
div + h3 {
color: orange;
}
div + h3 + h4 + p {
color: white;
background-color: navy;
}
/* 일반 형제 선택자 : h4 다음에 나오는 형제들 모두 선택하여 스타일 적용 */
h4 ~ p {/* h4에서 p태그까지 스타일 적용 */
background-color: red;
}
</style>
</head>
<body>
<!-- 후손 선택자 -->
<div class="c1">
<h2>후손 선택자 예제</h2>
<ul>후손 선택자
<li>자식의 자식(후손1)</li>
<li>자식의 자식(후손2)</li>
</ul>
</div>
<h2>그냥 있는 h2 태그</h2>
<hr>
<!-- 자손 선택자 -->
<div class="c2">
<h3>자손 선택자 예제1</h3>
<p>자손 선택자 예제2</p>
<tel>
<office>02-123-4567</office><br>
<home>010-1234-5678</home>
</tel>
</div>
<hr>
<!-- 인접 형제 선택자 -->
<div class="c3"><!-- h2,h3,ul은 div의 자손 -->
<h2>인접 형제 선택자1</h2><!-- h2,h3,ul은 서로 형제 -->
<h3>인접 형제 선택자2</h3>
<ul>목록
<li>항목1</li>
<li>항목2</li>
</ul>
</div>
<h3>인접 형제 선택자 3</h3><!-- div,h3,p,p는 서로 형제 -->
<h4>그냥 끼어있는 태그</h4>
<p>인접 형제 선택자 4</p>
<p>인접 형제 선택자 5</p>
<h2>...</h2>
<p>인접 형제 선택자 6</p>
<hr>
<!-- 일반 형제 선택자 -->
</body>
</html>
pseudo_class01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가상 선택자(반응 선택자)</title>
<style type="text/css">
h1:hover {/* 글씨에 마우스를 태그위에 갖다대면 스타일 적용됨 */
color: red;
}
h1:active {/* 마우스로 클릭하면 스타일 적용됨 */
color: blue;
font-size: 50px;
}
div#sp1 {
width: 100px; height: 100px;
border: 1px solid black;
}
div#sp1:hover {
background-color: green;
}
div#sp1:active {
color: white;
}
input:focus {
color: white;
background-color: gray;
}
input[type="checkbox"]:checked + div {/* 체크박스가 체크 되면 다음 div에 스타일 적용*/
height: 0px;
}
input + div {
overflow: hidden;/* overflow: hidden; : div영역보다 큰 자료가 오면 오버플로우 영역은 출력 안함 */
width: 300px; height: 200px;
transition-duration: 1s;/* 보이기 효과 주기 */
}
</style>
</head>
<body>
<!-- 반응 선택자 이벤트에 따라 적용되는 스타일
이벤트에 따라 적용되는 스타일.
마우스의 동작에 따라 다른 스타일을 적용
-->
<h1>클릭하세요.</h1>
<div id="sp1">div 공간입니다.</div>
<hr>
<!-- 상태 선택자
태그의 상태에 따라 적용되는 스타일.
:checked : 체크 박스의 체크 상태에 따라 스타일 적용
:focus : 입력 양식이 포커스를 가지게 되면 적용.
:enabled : 사용 가능한 입력 양식에 적용.
:disabled : 사용 불가능한 입력 양식에 적용
-->
<input type="text"><br>
<input type="checkbox">보이기/숨기기(숨기려면 체크하세요.)
<div>
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam gravida nunc lorem, sit amet finibus tortor viverra quis.
Nunc lectus eros, scelerisque ut molestie nec, facilisis eget diam.
Vestibulum eget diam porttitor, rhoncus nisi ac, condimentum enim.
Cras aliquet ultricies volutpat. Nulla vitae tellus dui.
Maecenas vel nibh sit amet neque luctus tincidunt. Vestibulum quam nibh,
scelerisque at leo elementum, dapibus elementum elit. Phasellus congue sed
lacus in volutpat. In ac nunc a urna gravida laoreet. Etiam tellus purus,
posuere quis accumsan eget, dapibus eget tellus. Pellentesque eget elit libero.
Aenean congue dolor massa, non euismod risus dictum ultricies.
Sed sit amet aliquam neque. Praesent semper magna justo, in tempus odio blandit et.
</p>
</div>
</body>
</html>
