이번 주는 CSS에 대해 배움
html : 웹페이지 뼈대 - css : 꾸미기, 살 붙이기
1. 스타일 적용
인라인 스타일: html 파일 내부 태그 안에 style을 적용하는 것내부 스타일: html 파일 내부 head에 style 태그를 작성하여 style을 적용하는 것링킹 스타일: html 파일 외부에 CSS 파일을 생성하여 style을 적용하는 것
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
h2 {
color: rgb(103, 34, 182);
}
</style>
</head>
<body>
<h1 style="color: rgb(226, 113, 214);"color:>인라인 스타일입니다.</h1>
<h2>내부 스타일 시트입니다.</h2>
<p> 링킹 스타일 시트입니다.</p>
</body>
</html>
/*style.css 안에 링킹 스타일 시트 생성*/
p {
color: pink;
}
➡️ 우선순위 : 인라인 > 내부 > 링킹
2. 선택자
🐰 목적: 선택해서 스타일이나 동작을 부여
--> 내부 스타일시트 또는 링킹 스타일시트에만 적용함
ex) 선택자 p { 정보; }
⭐️ 선택자 종류
1. 모든 요소 선택: *
2. 같은 선택자 경우 뒤에 오는 것이 우선순위 높음
3. 태그선택자
4. class 선택자
-📌 * 은 제일 마지막에 적용됨
3. class 선택자
class: 비슷한 종류의 요소를 묶어놓는 방법
<h3 class="likelion"> h3태그입니다. </h3>
<h4 class="likelion2"> h4 tag입니당 </h4>
📌 . 붙으면 클래스 임을 눈치채기!
📌 클래스 선택자가 2개 붙을 수 있음
<h3 class="likelion"> h3태그입니다. </h3>
<h3 class="korea"> test1 </h3>
<p class="korea"> test2 </p>
<p class="korea sejong"> test3 </p>
p.korea {
color: blue;
}
p.korea.sejong {
color: yellow;
}
4. id 태그
id: 단 하나만 존재하는 요소를 표현하기 위한 방법
클래스와는 다르게 한 페이지에서 사용되는 id는 절대 중복 불가
<body>
<h3 id="korea"> test1 </h3>
<p class="korea"> test2 </p>
<p id="sejong"> test3 </p>
</body>
#korea {
color:crimson;
}
.korea {
color: yellow;
}
#sejong {
color: green;
}
5. Github & Gitbash
깃허브 사용법 배움!!!!
gitbash 설치하는데 맥 사용자는 terminal로 간단하게 설치 가능!
📌 add 와 admmit 은 함께 가는 아이들
꼭 외워주기 ❤️
git add.
git commit -m “저장할 이름”
6. 2week를 마치며
깃허브에 첫 push까지 마친 뿌듯-한 하루 😃
안녕하세요ꯁ