10강~11강을 요약해보도록 하겠습니다.
1) 만약 id나 class가 없다면?
css로 오로지 태그 이름만 설정할 수 있다면 어떤 일이 일어날까요?
<html 코드>
<!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">
<title>color test</title>
<link href="./color.css" rel="stylesheet">
</head>
<body>
<div>
안녕
</div>
<div>
나는 산와머니라고 해!
</div>
<css 코드>
@font-face {
font-family: "IM_Hyemin-Bold";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Bold.woff2")
format("woff");
font-weight: normal;
font-style: normal;
}
div {
font-size: 50px;
font-family: "IM_Hyemin-Bold";
}
<결과>
'안녕'과 '나는 산와머니라고 해!'라는 텍스트에 다른 효과를 주고 싶어도 주지 못하게 됩니다 (ㅠㅠ)
1-1) id의 등장
id는 자바스크립트에서 만든 태그들에 접근할 때 id를 기준으로 태그를 가져옵니다.
때문에 아이디는 구별자로써의 역할을 해야하기 때문에 여러 군데 쓰지 않는 것이 좋습니다.
<html 코드>
<!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">
<title>color test</title>
<link href="./color.css" rel="stylesheet">
</head>
<body>
<div id="hi">
안녕
</div>
<div id="sh">
나는 산와머니라고 해!
</div>
</body>
</html>id는 절대 중복해 사용 금지!
<css 코드>
@font-face {
font-family: "IM_Hyemin-Bold";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Bold.woff2")
format("woff");
font-weight: normal;
font-style: normal;
}
#hi {
font-size: 50px;
font-family: "IM_Hyemin-Bold";
color: red;
}
#sh {
font-size: 50px;
font-family: "IM_Hyemin-Bold";
color: blue;
}id는 css에서 #아이디명 으로 사용합니다.
<결과창>
이런 식으로 각기 다른 id에 대하여 다른 스타일을 줄 수 있습니다.
1-2) class의 등장
그렇다면 똑같은 효과를 여러 군데에 주고 싶을 땐 어떻게 해야할까요?
id마다 css에 똑같은 코드를 써야한다면 시간&노력 대비 손해겠죠.
그래서 나온 것이 class 입니다.
<html 코드>
<!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">
<title>color test</title>
<link href="./color.css" rel="stylesheet">
</head>
<body>
<div id="hi">
안녕
</div>
<div class="sh">
나는 산와머니라고 해!
<div class="sh">
비전공자 개발자 지망생이지~
</div>
</body>
</html>같은 효과를 주고 싶은 코드에 같은 class 명을 씁니다.
<css 코드>
@font-face {
font-family: "IM_Hyemin-Bold";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Bold.woff2")
format("woff");
font-weight: normal;
font-style: normal;
}
#hi {
font-size: 50px;
font-family: "IM_Hyemin-Bold";
color: red;
}
.sh {
font-size: 50px;
font-family: "IM_Hyemin-Bold";
color: blue;
}class는 .클래스명으로 사용합니다.
<결과창>
2) class를 이용해 자식 요소를 선택해보자!
class가 너무 많으면 관리가 힘듭니다.
때문에 class 수를 줄이기 위하여 다양한 방법을 사용하고 있는데요.
<html>
너무 복잡하니 body 부분만 보여드리도록 하겠습니다.
<body>
<div id="hi">
안녕
</div>
<div class="sh">
div 본인
<div>
div 자식
<div>
div 증손자
</div>
</div>
</div>
<span class="sh">
span 본인
<span>
span 자식
<span>
span 증손자
</span>
</span>
</span>
</body>
<css>
@font-face {
font-family: "IM_Hyemin-Bold";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Bold.woff2")
format("woff");
font-weight: normal;
font-style: normal;
}
#hi {
font-size: 50px;
font-family: "IM_Hyemin-Bold";
color: red;
}
.sh div {
font-size: 50px;
font-family: "IM_Hyemin-Bold";
color: white;
background-color: blue;
}
.sh span {
font-size: 50px;
font-family: "IM_Hyemin-Bold";
color: white;
background-color: brown;
}코드를 보시면 .sh div / .sh span이라는 부분이 있는데요. 의미는 다음과 같습니다.
.sh div : div class로 sh가 쓰인 영역의 자식들을 선택해라
.sh span : span class로 sh가 쓰인 영역의 자식들을 선택해라
<결과창>
그럼 본인을 제외한 자식과 증손자들이 선택되어 스타일이 적용된 것을 보실 수 있습니다.
2-1) 그럼 본인만 선택되려면 어떻게 해야할까요?
<html>
<body>
<div id="hi">
안녕
</div>
<div class="sh">
div 본인
<div>
div 자식
<div>
div 증손자
</div>
</div>
</div>
<span class="sh">
span 본인
<span>
span 자식
<span>
span 증손자
</span>
</span>
</span>
</body>바로 위의 코드와 동일한 코드입니다.
<css>
@font-face {
font-family: "IM_Hyemin-Bold";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Bold.woff2")
format("woff");
font-weight: normal;
font-style: normal;
}
#hi {
font-size: 50px;
font-family: "IM_Hyemin-Bold";
color: red;
}
.sh div {
font-size: 50px;
font-family: "IM_Hyemin-Bold";
color: white;
background-color: blue;
}
.sh span {
font-size: 50px;
font-family: "IM_Hyemin-Bold";
color: white;
background-color: brown;
}
div.sh {
background-color: burlywood;
}
span.sh {
background-color: rgb(222, 135, 135);
}위의 코드에서 div.sh / span.sh를 추가해주었습니다.
div.sh : div 중 sh클래스를 갖는 본인을 선택해라
span.sh : span 중 sh클래스를 갖는 본인을 선택해라
그냥 .sh로 쓰면 본인과 자식들 전부가 선택되므로 이런 활용법을 알아두면 좋을 것 같아요~
<결과창>
더욱 자세한 정보는 아래 사이트에서 공부했습니다.
CSS 선택자 (Selector) - 조합 선택자 (자식, 자손, 형제)
(7) 조합 선택자 - 조합 선택자는 기본선택자 2개 이상을 한 번에 사용하는 선택자 1) 조합 선택자의 종류 - 그룹 선택자 - 자식 선택자 - 자손(하위) 선택자 - 인접 형제 선택자 2) 그룹 선택자 - 그
amaze9001.tistory.com
3) 가상 선택자의 모든 것!
가상선택자를 사용해 html 스타일을 더욱 풍부하게 적용시켜 줄 수 있습니다.
3-1) hover 사용법
hover는 마우스를 갖다 대었을 경우 요소에 변화를 일으키게 됩니다.
<html>
<body>
<div>
<span> ID <input></span>
</div>
<div>
<span> PW <input></span>
</div>
<div>
<button>
로그인
</button>
</div>
</body>
<css>
button:hover {
border: solid red 5px;
background-color: yellow;
color: orange;
}가상 선택자는 적용하고 싶은 태그 뒤에 :hover라고 명시해주어 사용합니다.
<결과창>
3-2) focus 사용법
focus는 input이나 button을 선택했을 경우 나타나는 border의 스타일을 변경해주는 장치입니다.
주로 tab을 이용해 다음 줄로 넘어갈 때 생기는 선을 보셨던 적이 있으셨을 겁니다 : )
<html>
<body>
<div>
<span> ID <input></span>
</div>
<div>
<span> PW <input></span>
</div>
<div>
<button>
로그인
</button>
</div>
</body>위와 동일한 html 코드입니다.
<css>
button:hover {
border: solid red 5px;
background-color: yellow;
color: orange;
}
input:focus {
border: solid green 5px;
}
<결과창>
결과창에서 아실 수 있듯이 input 창에는 스타일이 적용되지만, 버튼에는 적용되지 않고 있습니다.
이럴 땐 전체를 뜻하는 '*'을 이용해 해결하실 수 있습니다.
<해결방법>
*:focus {
border: solid green 5px;
}
3-3) before / after 사용법
before / after는 선택한 요소 전과 후를 꾸며줄 수 있는 기능을 합니다.
<html>
<body>
<div>
<span> ID <input></span>
</div>
<div>
<span> PW <input></span>
</div>
<div>
<button>
로그인
</button>
</div>
</body>위와 동일한 html 코드입니다.
<css>
button:hover {
border: solid red 5px;
background-color: yellow;
color: orange;
}
*:focus {
border: solid green 5px;
}
div:before {
background-color: red;
content: "click";
}
div:after {
background-color: blue;
content: "click";
}div 전에는 빨간 백그라운드 컬러와 백그라운드 안에 content 'click'을 삽입했습니다.
또한 div 후에는 파란 백그라운드 컬러와 백그라운드 안에 content 'click'을 삽입했습니다.
<결과창>
앞 뒤에 꽉꽉 채워진 것을 볼 수 있습니다 ^^
추가로 블록 처리도 가능해 마치 div가 추가된 것 같은 효과도 줄 수 있습니다.
div:before {
background-color: red;
content: "click";
display: block;
}
div:after {
background-color: blue;
content: "click";
display: block;
margin-bottom: 10%;
}display : block;으로 처리하면요 ^^
4) 출석 인증
너무나도 밀린 빡공 일기 ㅋㅋ
초등학교 때 밀린 일기 쓰는 기분이네요...ㅎㅎ
그래도 부랴부랴 포스팅 쓰는 것이 아닌 하나하나 자세히 짚고 넘어가며 공부하고 있습니다~!
오늘 빡공 일기 끝!
다음 일기에서 만나요~
'대외활동 > 빡공단 12기 (HTML, CSS)' 카테고리의 다른 글
| CSS의 모든 것 1탄 : color / background-color / border / outline / font-size / font-family (0) | 2021.07.13 |
|---|---|
| HTML 미디어 태그 : img / vedio (0) | 2021.07.05 |
| HTML 인라인과 블록 (0) | 2021.07.04 |
| HTML 텍스트 설정 : 텍스트크기 / input / button (0) | 2021.07.03 |
| HTML 기본 구조 : p태그 / h태그 / Live Server (0) | 2021.07.02 |
