CSS란?
CSS는 Cascading Style Sheet의 줄임말로 HTML문서를 시각적으로 꾸며주는 역할을 하는 언어.
웹페이지의 디자인을 담당
CSS문법
HTML 문서<head>태그안에 <style>~<style>에 CSS문법을 작성
HTML 문서 중 디자인을 적용시킬 태그 안에 style 속성에 작성
선택자{
속성명 : 속성값;
속성명 : 속성값;
...
}
p{text-align : center;}
p태그를 선택하여 가운데 정렬 CSS 적용방법
1. 인라인 스타일
HTML 요소 내부에 style 속성을 사용해서 적용하는 방법
해당 요소에만 스타일을 적용
<p style="CSS문법">안녕하세요</p>2. 내부 스타일
HTML 문서의 <head>태그 안에 <style> 태그를 사용해서 적용하는 방법
해당 문서에서만 스타일을 적용
<head>
<style>
h2{
font-size: 50px;
}
p{
font-size: 20px;
}
ul{
list-style-type: none;
color:deeppink;
}
li{
display: inline-block;
margin-right:20px;
font-weight: bold;
}
</style>
</head>3. 외부 스타일
웹 사이트 전체의 스타일을 하나의 파일에서 변경
<head> 태그 안에 <link> 태그를 사용해서 연결, 적용하는 방법
<link href="css파일 경로" rel="stylesheet">
rel 속성은 현재 파일과 링크된 파일 사이의 연관관계를 명시
ex) css가 같은 폴더 내에 있고 이름이 style.css일 경우
<link rel="stylesheet" href="./css/style.css">/*css파일 내용*/
h2{
font-size: 50px;
}
p{
font-size: 20px;/* 기본 글자크기 : 16px */
}
ul{
list-style-type: none;
color:deeppink;
}
li{
display: inline-block;
margin-right:20px;
font-weight: bold;
}CSS 선택자
1. 전체 선택자
스타일을 모든 요소에 적용하고 싶을 때
디테일한 스타일은 전체 선택자와 body에 적용한 스타일보다 우선시 됨
*{
/* 속성명 : 속성값;*/
}2. 태그 선택자, 요소 선택자
특정 태그가 쓰인 모든 요소에 스타일을 적용
태그명{
/* 속성명 : 속성값;*/
}3. id 선택자
웹 문서 안의 특정한 부분에 스타일을 적용
#기호를 사용해서 id속성을 가진 요소에 스타일을 적용
#id명{
/* 속성명 : 속성값;*/
}4. class선택자
특정 집단의 요소를 한번에 스타일 적용할 때 사용
.기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용
.class명 {
/* 속성명 : 속성값;*/
}<!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>클래스 선택자</title>
<style>
.redText {
color:red;
}
.blueText{
color:blue;
}
/* span태그 이면서 bigText라는 class를 가진 요소 선택 */
/* 태그명.클래스명 : 해당 태그들 중 해당 클래스를 가진 요소들 선택 */
span.bigText{
font-size: 30px;
}
</style>
</head>
<body>
<h2>클래스 선택자</h2>
<p>
<!-- 클래스명을 띄어쓰기로 구분하면 여러개 줄 수 있다. -->
<span class="redText bigText">클래스 선택자</span>는 <span class="blueText">특정 집단의 여러 요소를 한번에 선택</span>할 때 사용합니다.
</p>
<div class="bigText">
<span class="redText">특정 집단을 클래스(class)</span>라고 하며,<span class="blueText">. 기호를 사용</span>하여 같은 클래스 이름을 가지는 요소들을 모두 선택합니다.
</div>
</body>
</html>5. 그룹 선택자
여러개의 요소를 나열하고 ' , '로 구분해 스타일을 적용
선택자1, 선택자2{
/* 속성명 : 속성값;*/
}<!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>그룹 선택자</title>
<style>
h2{
color:red;
}
/*h2와 p태그만 속성을 적용한다.*/
h2, p{
text-align: center;
color:blue;
}
/* 태그#아이디명 : 해당 태그중 해당 아이디를 가진 요소 선택 */
/* 아이디가 bigText인 p태그만 css를 적용한다.*/
h2, p#bigText{
font-size: 50px;
}
</style>
</head>
<body>
<h2>그룹 선택자</h2>
<p>
여러개의 요소를 나열하고 ,로 구분해 스타일을 적용
</p>
<p id="bigText">
선택자를 다양하게 사용 가능
</p>
</body>
</html>6. 자손 선택자
조상요소 하위의 모든 요소에 스타일을 적용
자손은 자식을 포함
조상요소선택자 자손요소선택자{
/* 속성명 : 속성값;*/
} p.tx : p 태그들 중에 tx 클래스를 가진 요소 선택
<p class="tx">
p .tx : p 태그들 내부에 tx 클래스를 가진 요소 전부 선택(span, li)
<p>
<span class="tx"></span>
<ul>
<li class="tx"></li>
</ul>
</p><!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>자손 선택자</title>
<style>
ul a {
color:deeppink;
text-decoration: none;
}
</style>
</head>
<body>
<h2>자손 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li>
<a href="https://www.google.com">구글</a>
</li>
<li>
<p>
다음<br>
<a href="https://www.daum.net">다음</a>
</p>
</li>
</ul>
<ul>
<li><a href="https://www.nate.com">네이트</a></li>
</ul>
</body>
</html>7. 자식 선택자
부모의 요소 하위의 자식요소에 스타일을 적용
부모선택자 > 자식선택자{
/* 속성명 : 속성값;*/
}<!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>자식 선택자</title>
<style>
ul > a{
color:deeppink;
text-decoration: none;
}
ul > li > p > a {
color:blue;
text-decoration: none;
}
</style>
</head>
<body>
<h2>자식 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li>
<a href="https://www.google.com">구글</a>
</li>
<li>
<p>
다음<br>
<a href="https://www.daum.net">다음</a>
</p>
</li>
</ul>
<ul>
<li><a href="https://www.nate.com">네이트</a></li>
</ul>
</body>
</html>8. 인접 형제 선택자
동일한 부모 요소를 갖는 자식 요소들의 관계
선 후 과계는 형-동생의 관계이고, 연속된 요소를 뜻함
a태그 다음에 연속된 li태그 선택
형선택자 + 동생선택자{
/* 속성명 : 속성값;*/
}
a + i{
/* 속성명 : 속성값;*/
}<head>
<title>인접 형제 선택자</title>
<style>
h3 + p {
color:white;
background-color: deeppink;
font-size: 50px;
}
</style>
</head>
<body>
<h2>인접 형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<p>셋째</p>
<h4>넷째</h4>
</div>
</body>
</html>
9. 일반 형제 선택자
형제 관계를 갖는 요소 중에서 형 요소 다음에 나오는 모든 동생 요소를 선택해서 스타일 적용
형선택자 ~ 동생선택자{
/* 속성명 : 속성값;*/
}
a ~ i{
/* 속성명 : 속성값;*/
}<head>
<title>일반 형제 선택자</title>
<style>
h3 ~ p {
color:white;
background-color: deeppink;
font-size: 30px;
}
</style>
</head>
<body>
<h2>일반 형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p> ->적용
<p>셋째</p> ->적용
<h4>넷째</h4>
<a href="#">다섯째</a>
<p>여섯째</p> ->적용
</div>
</body>
</html>10. 속성 선택자
HTML 요소에서 src, href, style, type,.... 과 같은 속성을 선택자로 지정해서 스타일을 적용
[속성명]{
/* 속성명 : 속성값;*/
}
[src]{
/* 속성명 : 속성값;*/
}
[src='apple.png']{
src 속성이 'apple.png'인 요소들 선택
}<head>
<title>속성 선택자 - 1</title>
<style>
[href]{
text-decoration: none;
color:deeppink;
}
/* 클래스도 속성처럼 지정 가능하다. */
[class="attr"]{
color:white;
}
.attr{
background-color: brown;
}
h2[title]{
text-align: center;
}
</style>
</head>
<body>
<h2 title="h2 요소의 title 속성">속성 선택자 - 1</h2>
<p>
<a href="https://www.naver.com" target="_blank">네이버</a>
</p>
<p class="attr">
속성명과 속성값이 모두 일치하는 요소를 선택자로 지정
</p>
</body>
</html>
배움은 끝없이