1. CSS(Cascading Style Sheets)란?
CSS(Cascading Style Sheets)는 HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일 시트 언어입니다.
HTML에서도 디자인적인 요소를 추가해 웹 문서를 작성할 수 있지만 CSS를 따로 사용하는 이유는 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있기 때문입니다. 웹 문서의 내용과 디자인이 구분되어 있으면 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않고 반대의 경우도 마찬가지로 내용에는 전혀 영향을 미치지 않고 디자인만 수정할 수 있기 때문에 편리합니다. 또한 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있기 때문에 CSS를 사용합니다.
2. 스타일 시트
스타일 시트 작성 방법은 3가지가 있습니다. 내부스타일, 외부스타일, 인라인스타일 이렇게 3가지입니다.
■ 내부스타일
내부스타일은 HTML문서 안에 스타일시트를 작성한 것입니다. 내부스타일에서 <style> 태그는 HTML문서의 <head> 태그 내부에 작성합니다. CSS 문법은 다음과 같습니다.
선택자 {속성:값;}선택자는 어떤 요소를 선택할 것인지 알려주고 중괄호 안에 속성과 값을 입력해 어떻게 디자인할 것인지 알려줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순상생활</title>
<style>
h3{
color: rgb(146, 131, 120);
}
</style>
</head>
<body>
<h3>짱 멋져요 김군순</h3>
</body>
</html>이렇게 <head> 태그 안에 <style> 태그를 열고 선택자는 <h3>, 속성은 color, 값은' rgb(146, 131, 120)'로 입력해 주면 아래 그림과 같이 기본값이 검정 글씨에서 입력한 값의 색상으로 변한 것을 볼 수 있습니다.
짱 멋져요 김군순
■ 외부스타일
외부스타일은 CSS문서를 따로 생성한 후 HTML문서에서 <link> 태그로 외부에 작성한 파일에 접근해 불러오는 방법입니다.
/* 외부 CSS문서 */
h3{
color: rgb(146, 131, 120);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순상생활</title>
<!-- 외부스타일 -->
<link rel="stylesheet" href="./ex01css.css">
</head>
<body>
<h3>짱 멋져요 김군순</h3>
</body>
</html>순서대로 위는 CSS문서파일, 아래는 HTML문서 파일입니다. 이렇게 CSS문서에는 따로 <style> 태그를 넣을 필요 없이 CSS문법만 적어주면 됩니다. 그리고 아래의 HTML문서에서 마찬가지로 <head> 태그 부분에, <style> 태그 없이 불어오기만 하면 적용이 됩니다.
■ 인라인스타일
인라인스타일은 위의 2가지 방식과는 다르게 요소 내 style속성으로 스타일을 지정하는 방법입니다. 그렇기 때문에 <head> 태그 부분이 아닌 <body> 태그에서 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순상생활</title>
</head>
<body>
<h3 style="color: rgb(146, 131, 120);">짱 멋져요 김군순</h3>
</body>
</html>코드를 보면 이전에 HTML태그를 사용할 때와 같이 style속성을 사용하여 스타일을 지정하고 있는 것을 볼 수 있습니다.
3. CSS 기본 선택자
선택자는 특정 요소를 선택할 때 사용합니다. 어떤 선택자를 사용해 어떤 요소에 적용하는지 알아보겠습니다.
■ 전체선택자
전체선택자는 말 그대로 문서의 모든 요소에 적용할 때 사용합니다. 전체선택자를 사용할 때는 '*'을 사용합니다.
*{
속성 : 값;
}
■ 태그선택자
태그선택자는 특정 태그를 사용한 모든 요소에 적용할 때 사용합니다. 태그선택자는 태그 이름을 통해 사용할 수 있습니다.
/* 모든 h3태그를 사용하는 요소에 적용 */
h3{
속성 : 값;
}
/* 모든 p태그를 사용하는 요소에 적용 */
p{
속성 : 값;
}위에서 처음 스타일시트 작성할 때 사용한 방법과 같습니다. 이렇게 적용하고자 하는 태그의 이름을 사용합니다.
■ 아이디선택자
아이디선택자는 위의 선택자들보다 더 특정한 요소에 스타일을 적용하기 위해 사용하는 선택자입니다. 요소에 아이디를 지정해 주고 그 아이디를 불러와 사용합니다. 아이디선택자는 #을 사용해 적용할 수 있습니다.
아이디선택자는 중복이 불가능해서 한 문서에 한 번만 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>selector</title>
<style>
#fact{
속성 : 값;
}
</style>
</head>
<body>
<h3 id="fact">존잘 김군순</h3>
</body>
</html>이렇게 h3요소의 id를 fact로 지정해 주고 #을 사용해 적용할 수 있습니다.
■ 클래스선택자
클래스 선택자는 아이디선택자와 비슷합니다. 특정 요소에 클래스를 지정해 주고 클래스명을 통해 스타일을 적용합니다. 클래스명을 불러올 때는 '.'을 사용합니다.
아이디선택자와 다른 점은 중복사용이 가능하다는 것입니다. 그렇기 때문에 여러 요소에 동일한 클래스를 지정해 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>selector</title>
<style>
.fact{
속성 : 값;
}
</style>
</head>
<body>
<h3 class="fact">존잘 김군순</h3>
<h3 class="fact">천사 김군순</h3>
<h3 class="fact">천재 김군순</h3>
</body>
</html>이렇게 여러 h3요소의 클래스를 fact로 지정해 주고 '.'을 사용해 적용할 수 있습니다.
■ cascade
스타일을 적용할 때 적용되는 우선순위가 있습니다. 만약 전체선택자, 태그선택자, 클래스선택자, 아이디선택자에서 같은 속성을 다 다른 값으로 주었을 때 모든 값을 동시에 적용할 수 없기 때문에 우선순위에 따라 적용됩니다.
아이디선택자(100) > 클래스선택자(10) > 태그선택자(1) > 전체선택자(0)
이렇게 가중치에 따라 우선순위가 존재합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>selector</title>
<style>
.fact{
color: rgb(207, 210, 30);
}
#real{
color: rgb(61, 29, 177);
}
</style>
</head>
<body>
<h3 class="fact">존잘 김군순</h3>
<h3 id="real" class="fact">천사 김군순</h3>
<h3 class="fact">천재 김군순</h3>
</body>
</html>이렇게 스타일을 적용했을 때, 아래의 그림과 같이 클래스선택자보다 아이디선택자가 더 우선되어 적용된 것을 볼 수 있습니다.
존잘 김군순
천사 김군순
천재 김군순
이 외에도 선택자에 따른 우선순위를 넘어 <body> 태그 안의 요소에 직정 스타일을 속성으로 주어 적용하는 인라인스타일은 아이디선택자보다 우선합니다.
속성 : 값 !important;그리고 이렇게 값 뒤에! important를 작성한 경우에는 가장 우선해서 적용됩니다.
'순이코딩 > Web' 카테고리의 다른 글
| [Web] CSS 태그(4) - box 모델 / margin, padding / radius / background / position / z-index / overflow / float (0) | 2023.07.31 |
|---|---|
| [Web] CSS 태그(2) - 계층선택자, 사이즈, hover와active, display (0) | 2023.07.29 |
| [Web]HTML 태그(2) - 하이퍼링크, 이미지, 폼 (0) | 2023.07.27 |
| [Web]HTML 태그(1) - 텍스트, 목록, 테이블 (0) | 2023.07.26 |
| [Web] 웹 이란? / HTML 기초 (0) | 2023.07.25 |
