1.CSS란
CSS란 Cascading Style Sheets의 약자입니다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어입니다.
2.CSS 문법
선택자 { 속성명1:속성값1; 속성명2:속성값2; .. }
p { text-align: center; color : blue; }
3. CSS주석
HTML 문서에서도 주석을 사용한 것처럼 CSS에서도 주석을 사용할 수 있습니다.
주석 표시방법 : /* */사이에 내용을 입력
4. CSS를 적용하는 방법
1) 인라인 스타일
HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다. 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.
예)< p style="text-align: center;">가운데 정렬이 됩니다.!< /p>
가운데 정렬이 됩니다.!
2) 내부 스타일 시트
내부 스타일 시트를 이용하는 방법은 HTML 문서 내의 태그에 < style>태그를 사용하여 CSS스타일을 적용합니다.
< style>
ul {
list-style-type: none;
color: hotpink;
}
< /style>- 외부 스타일 시트
외부에 작성된 스타일 시트 파일은 .css 확장자를 사용하여 저장됩니다. 스타일을 적용할 웹 페이지< head> 태그< link> 태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용됩니다.
예)
style.css
ul{
list-style-type: none;
color : blue;
}
<head>
<link href="style.css" rel="stylesheet"
type="text/css">
</head> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 스타일시트</title>
<link href="css/style.css" rel="stylesheet"
type="text/css">
</head>
<body>
<h2>외부스타일시트</h2>
<p>css를 적용하는 방법</p>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>5. CSS 선택자
-
전체 선택자
스타일을 모든 요소에 적용할 때 사용합니다. 전체 선택자는 한 번에 많은 요소를 선택하고 한꺼번에 스타일을 적용하기 위해 사용합니다.ex) *{margin :0; padding: 0;}
-
HTML 요소 선택자
특정 태그가 쓰인 모든 요소에 스타일을 적용합니다.ex) h2 { color :orange;}
-
id 선택자
#기호를 사용하여 id 속성을 가진 요소에 스타일을 지정합니다.#color { color: blue } /*요소에 관계업이 id가 color인 요소 */ h2#color { color : blue } /* h2 요소에 id가 color인 요소 */ <h2 id="color">안녕하세요.</h2> -
class 선택자
특정 집단을 클래스(class)라 고하며, 점(.)기호를 사용하여 같은 클래스 이름을 가지는 요소들을 모두 선택해줍니다..color {color:blue; } /*요소에 관계없이 class가 color인 요소*/ p.color {color: red;} /*h2요소이며 class가 color인 요소*/ <h2 class="color">안녕하세요.</h2>
5.그룹 선택자
그룹 선택자는 여러개의 요소를 나열하고 콤마(,)로 구분해 스타일을 한번에 정의해 줍니다.
ex) h2,p{text-align : center;}
6.하위 선택자
조상의 요소 하위의 모든 요소를 선택하는 선택자 입니다. (자식, 자손을 모두 포함)
<body>
<h2>하위 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li>
<a href="https://www.google.co.kr">구글</a>
</li>
<li>
<p>다음</p>
</li>
<li>
<a href="https://www.nate.com">네이트</a>
</li>
</ul>
</body>ex)
ul a {text-decoration : none} /ul 요소의 하위(자식, 자손을 모두 포함) 요소의 a요소의 밑줄을 제거 /
-
자식 선택자
부모의 요소 하위의 모든 자식을 선택하는 선택자입니다.
예)
ul >a{text-decoration: none; }
-
인접 형제 선택자
동일한 부모의 요소를 갖는 자식 요소들의 관계입니다.
선후 관계는 형-동생의 관계이고 이는 먼저 나온요소 --> 나중 나온 요소"를 의미합니다.
ex)
a + li { color: red;} /a요소의 형제 중 바로 다음에 위치한 동생 요소가 li인 경우 선택하겠다 라는 의미 /
-
일반 형제 선택자
형제 관계를 갖는 요소 중에서 형 요소 다음에 나오는 모든 동생요소를 선택하겠다라는 의미입니다.
ex)
a ~ li {color : red;} /a요소의 형제 중에서 다음에 위치한 동생li요소를 모두 선택하겠다는 의미 입니다.
10.속성 선택자
html 태그에서 src, href, style, type..과 같은 속성을 선택자로 지정할 수 있습니다.
=(equal) 기호를 중심으로 ,~ 등의 특수문자를 조합으로 해서 종류가 나눠집니다.<img src="apple.jpg"> ------ ---- ----- 요소 속성 속성값
{속성명} : 속성 이름만으로만 선택
{속성명 = "속성값"} = 속성 이름과 속성값으로 선택
{속성명 ~="속성값"} 속성값이 완벽히 일치하는 문자를 가지는 요소를 선택
{속성명 *="속성값"} = 속성값이 포함된 모든 문자를 가지는 요소를 선택
{속성명 ^="속성값"} = 속성값이 접두사로 시작되는 모든 문자를 가지는 요소를 선택
{속성명 ㅣ= "속성값"} = 속성값이 접두사로 시작하는 문자 중에서 완벽히 일치하는 문자 또는 "_"
으로 연결된 문자를 가지는 요소를 선택
{속성명 $="속성값"} = 속성값이 접미사로 끝나는 모든 문자를 가지는 요소를 선택
0개의 댓글
