day02_CSS basic

Frontend

day02_CSS basic

AIHYEONJI 2025. 4. 3. 13:59

1. CSS 문법
선택자 {
속성 : 값;
}
1.1 선택자
선택자는 "어떤 HTML 요소에 스타일을 적용할지"를 지정한다. 만약 <p> 태그에 스타일 적용하고 싶다면 p라는 선택자 사용

1.2 속성(property)과 값(value)
중괄호 { }안에는 스타일을 정의하는 속성과 값이 들어감.
- 속성 : 변경하고 싶은 스타일의 종류 ex- color, fint-size, background-color, margin, padding
- 값 : 해당 속성에 어떤 값을 적용할지 정한다. ex- blue ...

<!DOCTYPE html>

<head>

<style>

body {

background-color: aqua;

}

h1 {

color: deeppink;

text-align: center;

}

</style>

</head>

<body>

</body>

</html>

2. 스타일 적용방법

2.1 인라인 스타일
HTML 태그안에 직접 style 속성으로 CSS를 작성하는 방식
pros : 빠르게 특정 요소에 스타일 적용 가능
cons : 유지보수가 어려움, 스타일 중복문제 발생

2.2 내부스타일 시트 -> <head> 안에 넣어야함.
<style> 태그를 사용하여 CSS 작성함.
pros : 한 문서 안에서 스타일을 통일되게 관리 가능
cons : HTML과 CSS가 섞여 있어 코드가 복잡해질 수 있음.

2.3 외부스타일 시트
CSS파일을 따로 만들어서 HTML 문서에서 link태그로 연결
pros : 코드 분리로 관리가 쉬움, 재사용 가능
cons : 파일이 분리되어 연결이 필요함

<!DOCTYPE html>

<head>

<style>

/* . = class , .class지정이름 */

.internal {

color: deepskyblue;

font-weight: bold;

}

</style>

</head>

<body>

<p class="internal">이 문장은 내부 스타일시트로 스타일이 적용되었습니다.</p>

이 문장은 인라인 스타일로 스타일이 적용되었습니다.

</p>

</body>

</html>

3. 다양한 선택자
1. 태그 선택자 : h1
"모든 h1태그"

2. 클래스 선택자 : .into
"class="intro"인 요소"

3. 아이디 선택자 : #favorite-list
"id=#favorite-list인 요소"

4. 그룹 선택자 : p,li
"모든 <p>와 <Li>"

5. 클래스 선택자 : .highlight
"class="highlight"인 <Li>"

6. 의사 클래스 : a:hover
"마우스 올린 <a> 태그"

7. 속성 선택자 : a[href^="https"]
"href가 https로 시작하는 <a>"

8. 자식 선택자 : ul#favorite-list > li
"ul 바로 아래 있는 Li"

9. 자손 선택자 : ul#favorite-list p
"ul 안에 있는 모든 p"

10. 형체 선택자(인접) : p.intro + p
".intro 클래스 바로 다음에 오는 p"

<!DOCTYPE html>

<head>

<style>

/* 태그 선택자 */

h1 {

color: deepskyblue;

text-align: center;

}

/* 클래스 선택자 */

.intro {

font-weight: bold;

color: deeppink;

}

/* 아이디 선택자 */

#student-list {

background-color: #f9f9f9;

padding: 30px;

}

/* 그룹 선택자 */

li {

font-size: 12px;

}

/* 클래스 선택자 */

.highlight {

color: gold;

}

/* 의사 클래스 선택자 ~ 하이퍼링크 꾸미기*/

/* 한번도 다녀온 적 없은 링크 */

a:link {

text-decoration: none;

color: deeppink;

}

/* 다녀온 적 있는 링크 */

a:visited {

text-decoration: none;

color: deepskyblue;

}

/* 마우스 올려놨을 때 */

a:hover {

color: yellowgreen;

text-decoration: underline;

}

/* 가만히 누르고 있을 때 */

a:active {

color: blue;

text-decoration: underline;

}

/* 속성 선택자 */

a[href="#"] {

font-weight: bold;

color: red;

}

/* href^="단어" : 단어가 들어가있는 속성을 고름 */

a[href^="https"] {

font-weight: bold;

color: pink;

}

/* 자식 선택자 */

ul#student-list > li {

list-style-type: square;

}

/* 자손 선택자 */

ul#student-list p {

color: gray;

font-style: italic;

}

/* 형제 선택자 */

/* + : 바로 옆에 있는 */

p.intro + p {

background-color: aqua;

}

/* ~ : 그냥 형제 선택(복수 선택도 가능) */

p.intro ~ p {

font-size: 20px;

}

</style>

</head>

<body>

<p class="intro">이 문단은 첫번쨰 문단입니다.</p>

<p>이 문단은 두번째 문단입니다.</p>

<span class="intro">이 문장은 첫번째 문장입니다.</span>

</ul>

<hr />

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, ullam