프론트엔드 두 번째 교육 !!!

김윤경·2023년 3월 23일

CSS JavaScript TIL UDR html 언더독레볼루션 프론트엔트

FrontEnd

목록 보기

2/12

썸네일 출처 : https://aengduandyou.com/

2023.03.23 Today I Learned(TIL)

01. Style 적용

인라인 스타일 : html 파일 내부 태그 안에 style을 적용하는 것
내부 스타일 : html 파일 내부 head에 style 태그를 작성하여 style을 적용하는 것
링킹 스타일 : html 파일 외부에 CSS 파일을 생성하여 style을 적용하는 것

먼저 html 파일을 생성해주고 스타일을 입히는 여러가지 방법들을 이용해보았슴 !!!
(meta태그들은 원래 적어줘야 되는데 밑에는 생략했숨당)

<!-- index2.html 파일입니다. -->
<!DOCTYPE html>
<html lang="en">
<head>
  	<!-- 링킹 스타일 -->
    <link rel="stylesheet" href="style.css">
    <title>CSS</title>
    <!-- 내부 스타일 -->
    <style>
        h2 {
            color: hotpink;
        }
    </style>
</head>
<body>
    <!-- 인라인 스타일 -->
    <h1 style="color: pink;">인라인 스타일입니다.</h1>
    <h2>내부 스타일시트입니다.</h2>
    <p>링킹 스타일시트입니다.</p>
</body>
</html>

/*링킹 스타일 시트 생성*/
/*style.css파일입니다.*/
p {
    color: lavender;
}

아래는 결과임둥

✨ 스타일이 먹는 우선순위 (인라인 스타일 > 내부 스타일 > 링킹 스타일)
---> 인라인 스타일을 우선적으로 스타일이 먹힌다.

02. 선택자

선택자 : 원하는 태그만 선택해서 css 먹이는 것

선택자는 내부 스타일시트나 링킹 스타일시트에만 사용함

/*선택자 형식*/
선택자 {
		스타일 (ex. color, font-weight 등등) ;
}

✨선택자의 종류✨
1. 모든 요소 선택 : *
2. 같은 선택자의 경우 뒤에 오는게 우선순위가 높음
3. 태그 선택자
4. class 선택자(.)

/*1번 - 모든 요소의 색이 brown으로 변경됨*/
* {
	color : brown;
}
/*2번 - 모든 요소의 색이 blue로 변경됨*/
* {
	color : brown;
}
* {
	color : blue;
}
/*4번 - 모든 p 태그의 색이 lightpink로 변경됨*/
p {
	color : lightpink;
}
/*5번 - class가 likelion인 태그의 색이 hotpink로 변경됨*/
.likelion {
	color : hotpink;
}

03. class 선택자

✨class 선택자의 종류✨
1. 태그 선택자.class 선택자
2. 태그 선택자.class 선택자.class 선택자

<!-- index2.html 파일입니다. -->
<h2 class="korea">test1</h2>
<p class="korea">test2</p>
<p class="korea sejong">test3</p>

/*style.css파일입니다.*/
.korea {
    color: crimson;
}
p.korea {
    color: blue;
}
p.korea.sejong {
    color: green;
}

이것도 결과임둥

04. id 태그

id 태그(#) : 내가 원하는 하나에만 css를 먹이고 싶을 때 사용
id 태그는 한 페이지에서 중복되면 안된다 !!!!!!!

<!-- index2.html 파일입니다. -->
<h2 id="korea"> test1 </h2>
<h2 class="korea"> test1 </h2>
<p class="korea"> test2 </p>
<p class="korea sejong"> test3 </p>
<p id="sejong"> test4 </p>

/*style.css파일입니다.*/
#korea {
    color: blueviolet;
}
.korea {
    color: crimson;
}
p.korea {
    color: blue;
}
p.korea.sejong {
    color: green;
}
#sejong {
    color: brown;
}