이 글은 작성자의 개인 공부를 위해 작성한 글입니다.
실제 이론, 실습과 다른 부분이 있을 수 있습니다.
CSS(Cascading Style Sheets)란?
HTML이나 XML과 같은 마크업 언어로 작성된 문서의 표현을 디자인하는 스타일 언어이다.
CSS는 웹 페이지의 레이아웃, 색상, 폰트 등을 지정하여 문서의 시각적인 표현을 담당한다.
여러 웹 페이지에서 일관된 디자인을 유지하고, 문서의 내용과 표현을 분리함으로써 유지보수를 용이하게 한다.
⦁ 글씨를 원하는 색으로 바꾸기
1.<body> 안에다가 사용할 때
<body>
<h1 style="color: blue;">웰시코딩의 블로그의 오신 여러분 반갑습니다!</h1>
</body>
2. <head> 안에다가 사용할 때
<head>
<title>웰시코딩의 블로그</title>
<style>
h2{color:red}
</style>
</head>
3. 원하는 부분을 한꺼번에 바꾸기
<!DOCTYPE html>
<html>
<head>
<style>
li {
color:red; // 색상 빨간색
text-decoration:underline; // 밑줄
}
</style>
</head>
<body>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</body>
</html>
⦁ 아이디선택자 (하나하나 관리를 하기 위함, ex) 학번, 주민등록번호)
<!DOCTYPE html>
<html>
<head>
<style>
li {
color:red;
text-decoration:underline;
}
#select{ // #을 무조건 붙여줘야 한다.
font-size:50px;
}
</style>
</head>
<body>
<ui>
<li>HTML</li>
<li id="select">CSS</li> // CSS만 바꾸고 싶을 때 id 사용, id는 HTML의 문법이다.
<li>JavaScript</li>
</ui>
</body>
</html>
⦁ 클래스선택자 (대상을 관리하기 쉽도록 그룹핑함)
<!DOCTYPE html>
<html>
<head>
<style>
li {
color:red;
text-decoration:underline;
}
#select{
font-size:50px;
}
.deactive{ // id와 달리 class에서는 .을 쓴다
text-decoration: line-through;
}
</style>
</head>
<body>
<ui>
<li class="deactive">HTML</li>
<li id="select">CSS</li>
<li class="deactive">JavaScript</li>
</ui>
</body>
</html>
⦁ 아이디선택자와 클래스선택자의 공통점 및 차이
- 공통점
- 스타일 적용 : Class 선택자와 ID 선택자는 모두 HTML 요소에 스타일을 적용하는 데 사용된다.
- 다중 사용 : 하나의 HTML 문서에서 여러 요소에 동일한 클래스 또는 ID를 여러 번 사용할 수 있다.
- 차이점
- 유일성:
- Class: 하나의 HTML 문서에서 여러 요소에 동일한 클래스를 사용할 수 있으며, 클래스는 여러 요소에서 공유될 수 있다.
- ID: 하나의 HTML 문서에서 특정 ID는 고유해야 하며, 동일한 ID를 여러 번 사용해서는 안된다.
- 적용 범위:
- Class: 클래스는 여러 요소에 동시에 적용될 수 있으며, 여러 클래스를 동시에 적용할 수 있다.
- ID: 특정 ID는 문서에서 하나의 요소에만 적용된다. ID는 단일 요소에만 사용될 수 있다.
- 선택자 표현:
- Class: 클래스 선택자는 점(.)을 사용하여 정의된다. 예: .my-class
- ID: ID 선택자는 해시 기호(#)를 사용하여 정의된다. 예: #my-id
⦁ 가상클래스선택자
가상 클래스 선택자는 HTML 문서의 특정 상태나 위치에 있는 요소를 선택하는 데 사용되는 CSS 선택자 중 하나이다.
이러한 선택자는 일반적으로 특정 상태에 있는 요소에 스타일을 적용하는 데 사용된다.
가상 클래스는 콜론(:)으로 시작하며, 요소의 특정 상태에 스타일을 지정한다.
- 선택자들을 이용한 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a:link{ // 방문하지 않은 링크는 검정색이 된다.
color:black;
}
a:visited{ // 방문한 링크가 빨간색이 된다. 보안적인 문제로 속성이 제한이 된다.
color:red;
}
a:hover{ // 마우스를 올려놨을 때 노란색이 된다.
color:yellow;
}
a:active{ // 마우스 키를 누르고 있으면 초록색이 된다.
color:green;
}
a:focus{ // Tab키를 눌러 포커싱을 한다. 엔터를 누르면 링크가 들어가진다.
color:white;
}
input:focus{ // input을 받아 포커스가 잡힌다.
background-color:black;
color:white;
}
</style>
</head>
<body>
<a href="https://opentutorials.org">방문함</a>
<a href="https://a.a">방문안함</a>
<input type="text">
</body>
</html>'CSS' 카테고리의 다른 글
| CSS 미리어 쿼리 정리 (0) | 2024.01.07 |
|---|---|
| CSS 그리드 정리 (0) | 2024.01.07 |
| CSS 박스 모델 정리 (0) | 2024.01.07 |
| CSS 타이포그래피(font-size, color, text-align, font) 정리 (1) | 2024.01.01 |