1장 - CSS 기초
CSS란?
- HTML 등의 마크업 언어로 작성된 문서가 웹사이트에 표현되는 방법을 정해주는 언어
- 레이아웃, 폰트, 색상처리 등의 디자인 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들기 위한 언어
3가지 스타일 시트
- 인라인 스타일 시트
- 인라인 스타일시트는 요소에 직접 스타일을 하는 방식이며, 유지보수에 부담을 주므로 직접 사용을 권고하지 않는다.
- 내부 스타일 시트
- 내부 CSS는 문서의 표현을 위한 명령들을 HTML문서 안에
<style>태그로 기재하여 HTML 내부에 함께 저장되는 형태
- 외부 스타일 시트
- 문서의 표현을 위한 명령들을 따로 CSS파일 (확장자 .css)로 저장해두어 HTML문서에 파일명으로 연결해주는 형태
2장 - CSS 선택자
CSS Selector
- 선택자란 CSS로 UI를 디자인할 때 “어디를 어떻게 꾸며줄까??” 라는 질문에 “어디”에 해당하는 부분
선택자의 종류
전체 선택자
- 전체 선택자는 모든 태그를 지정할 때 사용하는 선택자
*사용body와*이 같다고 생각할 수 있지만*은 안에 있는 것들 하나하나 다 포함되는 개념이고, body는 전체부분만 해당된다.4
/* 예시 */
* {
font-family: cursive;
color: red;
}
*로 했을 때 border
body로 했을 때 border
태그 선택자
- 태그 이름을 그대로 가져다 쓰는 선택자
li {
font-weight: bold;
}클래스 선택자
- HTML 요소에 class로 붙인 이름을 가져다 쓰는 선택자
- 도트( . )를 클래스 이름 앞에 붙여서 작성
.orange {
background: orange;
}- class는 아래처럼 중복이 가능
<li class="orange big hilight">오렌지</li>아이디 선택자
- HTML 요소에 id로 붙인 이름을 가져다 쓰는 선택자입니다.
- ‘#’ 기호를 붙여서 표기
#tomato {
background: tomato;
width: fit-content;
font-size: 1.5em;
}- id는 class와 다르게 한 개씩만 적용 가능
일치 선택자
- 선택자 여러개를 동시에 만족하는 요소를 선택
/* span 태그의 class가 orange일 때 적용 */
span.orange {
background: orange;
}
/* li 태그의 id가 apple이고 class가 green일 때 적용 */
li#apple.green {
color: yellowgreen;
}
/* h1 태그의 id가 change, class가 yellow low primary일 때 적용 */
h1.yellow.low#change.primary {
background: violet;
}자식, 후손, 형제 선택자 공통조건
- 가장 마지막 선택자가 타겟이고 앞에는 전부 조건이다 !!
자식 선택자
- 현재 요소 내의 바로 아래 자식 요소만을 가리키는 선택자
- 자식 선택자가 아니면 안될 때만 사용 !!
/* ul 태그의 자식 중 class가 orange인 것에 적용 */
ul > .orange {
background: orange;
}
/* body 태그의 자식인 div 태그의 자식인 ul 태그의 자식 중 class가 apple인 것에 적용 */
body > div > ul > #apple {
color: red;
}후손 선택자
- 바로 인접 자식이 아니어도 후손 요소 중에 어느 단계에 있기만 해도 선택
- 일반적으로 자식 선택자 대신 후손 선택자를 사용
- 띄어쓰기를 이용
/* div태그의 후손 중에 class가 orange인 것에 적용 */
div .orange {
background: orange;
}
/* body태그의 후손인 div태그의 후손인 em태그의 후손에 적용 */
body div em {
background: skyblue;
}그룹 선택자
- 여러 개의 선택자를 나열해서 선택
,로 연결
p, span {
font-style: italic;
font-size: 1.5em;
color: red;
}인접 형제 선택자
- 현재 요소 바로 뒤에 나오는 형제 요소 한개만을 선택
+로 연결
/* class가 orange인 것의 형제이고 li태그인 것 중 바로 뒤에 나오는 형제 요소 선택 */
.orange + li {
background: pink;
font-size: 1.5em;
width: fit-content;
}일반 형제 선택자
- 현재 요소 바로 뒤에 나오는 형제 요소 전체를 선택
~로 연결
/* class가 orange인 것의 형제이고 li태그인 것 중 뒤에 나오는 형제 요소들 전체 선택 */
.orange ~ li {
background: red;
width: fit-content;
font-size: 1.5em;
}속성 선택자
- 속성 선택자는 html태그의 속성을 사용하여 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* type이 password인 것들에 적용 */
[type="password"] {
color: red;
width: 100px;
}
[disabled] {
opacity: 0.3;
}
/* input태그에서 checked 속성이 적용되어 있는 것들에 적용 */
input[checked] {
}
</style>
</head>
<body>
<div><input type="text" value="hello" /></div>
<div><input type="password" value="1234" /></div>
<div><input type="text" value="금지금지" disabled /></div>
</body>
</html>가상 클래스 선택자
- 가상 클래스 선택자를 이용해서 여러 상황이 발생했을 때 모양이 달라지게 적용시킬 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a {
color: orange;
}
a:hover {
font-size: 20px;
font-weight: 700;
color: red;
}
.box {
width: 100px;
height: 100px;
background: red;
transition: 0.7s;
}
.box:hover {
width: 200px;
background: orange;
}
.box:active {
height: 200px;
background: yellowgreen;
}
#common {
width: 100px;
margin-top: 20px;
padding: 5px;
outline: none;
transition: 0.6s;
}
#common:focus {
border-color: red;
width: 200px;
}
</style>
</head>
<body>
<a href="#">Hello!</a>
<div class="box"></div>
<input type="text" id="common" />
</body>
</html>수도 클래스 선택자
- n은 0부터 1, 2, 3 .. 순으로 올라간다.
- 짝수와 홀수번째 요소를 선택할 때는
:nth-child(2n), :nth-child(2n+1)로 쓸 수도 있지만:nth-child(even), :nth-child(odd)로 쓸 수 있음 !
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 홀짝은 2n, 2n+1도 되지만 키워드도 따로 있다.*/
#fruits li:nth-child(even) {
background: pink;
}
#fruits li:nth-child(odd) {
background: violet;
}
#food li:last-child {
background: aqua;
}
#food li:not(.melon) {
list-style: none;
}
.sports div:nth-child(3) {
background: blue;
}
.sports p:nth-of-type(2) {
background: blue;
}
.sports div:nth-of-type(3) {
background: blue;
}
</style>
</head>
<body>
<div class="sports">
<div>축구</div>
<div>농구</div>
<p>하하호호</p>
<div>배구</div>
<div>야구</div>
</div>
<ul id="food">
<li class="melon">메론빵</li>
<li>버거킹</li>
<li>냉면</li>
</ul>
<ul id="fruits">
<li>딸기</li>
<li>망고</li>
<li>사과</li>
<li>오레지</li>
<li>바나나</li>
<li>자몽</li>
<li>라임</li>
</ul>
</body>
</html>
.sports div:nth-child(3) { background: blue; }에 대해 적용이 안된 것을 볼 수 있다. 이유는:nth-child는 모든 요소에 대해 적용되므로 3번째 자리에는 p태그가 있기 때문에 적용이 되지 않았다..sports div:nth-of-type(3) { background: blue; }은 위와 다르게 적용되었다. 이유는:nth-of-type은 같은 종류의 요소들에만 적용되기 때문에 3번째 요소는 하하호호가 아니고 배구이므로 css가 적용되었다.
수도 클래스 선택자 (2) - ::before, ::after
- 도형을 만드려면 display 속성은 필수 !
- before, after에는 content속성은 무조건 써야함 !
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
li::before {
content: "번호";
}
li::after {
/*
- 도형을 만드려면
display속성 필수
- before, after에는
content속성은
무조건 써야함
*/
content: "";
width: 10px;
height: 10px;
background: red;
display: inline-block;
}
</style>
</head>
<body>
<!-- ul>li{$}*10 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
연습문제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*
1. id="list"인 요소에 <li> 요소중
홀수번째 요소만 선택후 배경색상 yellow 적용
2. id="list"인 요소에 <li> 요소중
짝수번째 요소만 선택후 배경색상 gray 적용
3. id="list"인 요소에 <li> 요소중
첫번째 <li>요소만 선택후 폰트색상 red 적용
4. id="list"인 요소에 <li> 요소중
마지막번째 <li>요소만 선택후 폰트색상 green 적용
5. id="list"인 요소에 <li> 요소중
두번째 <li>요소만 선택후 font-style: italic 적용
6. id="list"인 요소에 <li> 요소중
3번째 이전 요소만 선택후 border: 2px dotted aqua 적용 (1, 2번째만 선택)
7. id="list"인 요소에 <li> 요소중
3번째 이후요소만 선택후 border: 2px dashed violet 적용 (3번째부터 끝까지 선택)
*/
#list li:nth-child(odd) {
background: yellow;
}
#list li:nth-child(even) {
background: gray;
}
#list li:first-child {
color: red;
}
#list li:last-child {
color: green;
}
#list li:nth-child(2) {
font-style: italic;
}
#list li:nth-child(-n+2) {
border: 2px dotted aqua;
}
#list li:nth-child(n+3) {
border: 2px dashed violet
}
</style>
</head>
<body>
<!-- #wrap>ul#list>li{리스트$}*7 -->
<div id="wrap">
<ul id="list">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
<li>리스트5</li>
<li>리스트6</li>
<li>리스트7</li>
</ul>
</div>
</body>
</html>- 6번 문제에 대해 n은 0부터 1씩 커지므로 -n을 이용해야 한다는 점을 알았다.
연습문제 (2)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Selector Challenge</title>
<style>
/*
### CSS 선택자 문제
1. `id`가 "main-content"인 요소 내의 모든 `<span>` 태그를 선택하세요.
2. 클래스가 "post"이면서 `data-status` 속성값이 "popular"인 `<article>` 요소 내부의 모든 `<p>` 태그를 선택하세요.
3. `<nav>` 바로 다음에 오는 모든 `<ul>` 요소의 첫 번째 `<li>`를 선택하세요.
4. `<article>` 요소 중 첫 번째 요소만 선택하세요.
5. 모든 `<a>` 태그 중 "href" 속성값이 "#"으로 시작하는 요소를 선택하세요.
6. "main-content" 바로 안의 첫 번째 `<article>` 요소를 제외한 모든 `<article>` 요소를 선택하세요.
*/
#main-content span {
background: pink;
}
article.post[data-status="popular"] p {
background: yellowgreen;
}
nav > ul li:nth-child(1) {
background: skyblue;
}
article:first-child {
background: orange;
}
a[href^="#"] {
background: olive;
}
#main-content article:not(:first-child) {
background: red;
}
</style>
</head>
<body>
<div id="main-content">
<article class="post" data-status="popular">
<h2>Most Popular Post</h2>
<p>Content of the most popular post...</p>
<footer>
<span class="date">2024-03-10</span>
<span class="author">Author 1</span>
</footer>
</article>
<article class="post" data-status="recent">
<h2>Recent Post</h2>
<p>Content of the recent post...</p>
<footer>
<span class="date">2024-03-11</span>
<span class="author">Author 2</span>
</footer>
</article>
<aside>
<div class="advertisement">
<p>Advertisement goes here...</p>
</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</aside>
</div>
</body>
</html>- href뒤에
^를 붙이면 #으로 시작하는 요소만 선택 가능 $를 붙이게 된다면 #으로 끝나는 요소만 선택도 가능
a[href^="#"] {
background: olive;
}
a[href$="#"] {
background: olive;
}#main-content article:not(:first-child)에서 not을 이용해서 쉽게 표현할 수 있었다.
상속
부모요소에 적용한 스타일이 후손요소들에게까지 영향을 주는 특성
- 상속이 적용되는 속성들
1. font 관련 속성: font-size, font-weight, font-style, line-height, font-family, color
2. text 관련 속성: text-align, text-indent, text-decoration, letter-spacing, opacity
-> 즉, 글자와 텍스트 관련된 것들은 상속이 적용됨 ! - 주로 body나 전체에 기본 텍스트, 글씨체 등 폰트 기본설정을 깔아놓고 필요한 부분들은 따로 지정해서 바꿈
우선순위 (명시도)
HTML 요소에 동일한 속성이 적용될 경우 어떤 것을 우선으로 적용하는지에 대한 내용
- 다양한 태그와 id, class가 존재한다면 합산으로 우선순위를 정함
- 실무에서는 최대한 많은 조상을 나열하여 규칙을 설정하여 진행한다 ! ex
ex) id, class, class, class...
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 1점 */
div {
color: blue;
}
/* 100점 */
#c-y {
color: yellow;
}
/* 10점 */
.c-g {
color: green;
}
/* 1점 */
body {
color: aqua;
}
/* 1점 */
div {
color: red;
}
/* 1점 */
h1 {
color: lightcoral;
}
/* 다양하게 존재할 경우에는 합산으로! */
/* 11점 */
.bbb h1 {
color: orangered;
}
/* 101점 */
#aaa h1 {
color: gray;
}
/* 112점 */
#aaa div.bbb h1 {
color: greenyellow;
}
/* 111점 */
#aaa .bbb h1 {
color: tomato;
}
/* 12점 */
div.bbb > h1 {
color: violet;
}
</style>
</head>
<body>
<div id="c-y" class="c-g" style="color: orange">안녕하세요1</div>
<div id="c-y" class="c-g">안녕하세요2</div>
<div class="c-g">안녕하세요3</div>
<div>안녕하세요4</div>
<p>안녕하세요5</p>
<!-- #aaa>.bbb>h1{안녕하세요6} -->
<div id="aaa">
<div class="bbb">
<h1>안녕하세요6</h1>
</div>
</div>
</body>
</html>
백엔드 개발자