📍 개요
◾ CSS의 스타일 방식과 선택자 및 연산자 종류에 대한 개념을 알아보고 실습하는 시간을 가졌습니다.
⭐ CSS 스타일 방식 3가지
◾ 인라인(in-line) 방식
CSS 파일을 별도로 만들지 않고 .HTML 파일 내에서<body> 부분의 태그들에 style 속성을 통하여 스타일을 주는 방식입니다.
❗유지보수가 어렵기 때문에 실무에서 권장되지 않습니다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<title>인라인 방식</title>
</head>
<body>
<p style="color:yellow;background-color:black;">Hello world</p>
</body>
</html>◾ 내부(embedded) 방식
인라인 방식과 동일하게 .HTML 파일 내에 작성하지만 <head> 안에 <style> 태그를 사용하는 방식입니다.
HTML 파일과 CSS를 동일한 파일 내에 유지하면서도 외부 CSS 파일처럼 관리할 수 있도록 해줍니다.
그러나 코드가 길어지면 관리가 복잡해진다는 단점이 있습니다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<title>내부 스타일</title>
<style>
p {
color: yellow;
background-color: black;
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>◾ 외부(link) 방식
<head> 안에 <link> 태그를 이용하여 외부 CSS 파일을 HTML에 연동해주는 방식입니다.
HTML과 CSS를 분리하기 때문에 코드의 유지보수와 관리가 쉬워집니다.
👉🏻 실무에서 가장 많이 사용합니다!
/* link-style.html */
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<title>외부 스타일</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello world</p>
</body>
</html>
/* style.css */
p {
color: yellow;
background-color: black;
}📁 선택자 종류 및 예제
1️⃣ 전체 선택자 👉🏻 *
문서의 모든 요소에 스타일이 적용되며 별표로 표현합니다.
/*universal-selector.html*/
<h1>Subject</h1>
<p>HTML</p>
/*style.css*/
* {
color: red;
}
2️⃣ 타입 선택자 👉🏻 태그
태그들을 선택하여 스타일 적용합니다.
/*type-selector.html*/
<h1>Subject</h1>
<p>HTML</p>
<p>CSS</p>
/*style.css*/
h1 {
color: blue;
}
p {
font-size: 24px;
font-weight: bold;
}3️⃣ 아이디 선택자 👉🏻 #
CSS에서 아이디 선택자는 # 기호를 사용하여 스타일을 적용합니다.
아이디 선택자는 HTML 요소의 id 속성 값에 따라 특정 요소를 선택하여 스타일을 정의할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>아이디 선택자 예제</title>
<style>
/* 아이디 선택자를 사용하여 스타일 정의 */
#header {
color: red;
font-size: 24px;
}
#content {
font-size: 16px;
}
</style>
</head>
<body>
<div id="header">이것은 헤더입니다.</div>
<div id="content">이것은 콘텐츠입니다.</div>
</body>
</html>4️⃣ 클래스 선택자 👉🏻 .
클래스 선택자는 . 점을 사용하여 CSS에 표현합니다.
id 속성은 고유한 값이기 때문에 한 번만 사용할 수 있었다면 클래스 선택자는 여러 번 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>클래스 선택자 예제</title>
<style>
/* 클래스 선택자를 사용하여 스타일 정의 */
.red-style {
color: red;
}
.blue-style {
color: blue;
}
</style>
</head>
<body>
<!-- 같은 클래스를 가진 여러 요소 -->
<p class="red-style">첫 번째 문단</div>
<p class="blue-style">두 번째 문단</p>
<p class="red-style">세 번째 문단</div>
</body>
</html>5️⃣ 특성 선택자 👉🏻 [ ]
특성 선택자는 HTML 요소의 속성 값을 기반으로 스타일을 적용합니다.
연산자를 활용해서 여러 조건을 줄 수 있습니다.
예제를 통해 설명드리기 전에 CSS에는 어떤 연산자들이 있는지 살펴보겠습니다.
📋 연산자 종류
✅ = 속성값 모든 문자열 일치
✅ *= 속성 값 포함(부분 일치)
✅ ^= 속성 시작 부분 일치
✅ $= 속성 끝 부분 일치
✅ |= 하이픈으로 구분된 값 일치
<!DOCTYPE html>
<html>
<head>
<title>정확한 값 일치 선택자</title>
<style>
/* "type" 속성이 "button"인 모든 입력 요소 선택 */
[type='button'] {
color: yellow;
}
/* "class" 속성이 "btn" 문자열이 포함된 모든 요소 선택 */
[class*='btn'] {
color: blue;
}
/* "type" 속성이 "r"로 시작하는 요소 선택 */
[type^='r'] {
color: red;
}
/* "type" 속성이 "l"로 끝나는 요소 선택 */
[type$='l'] {
color: orange;
}
</style>
</head>
<body>
<button type="button" class="btn">button</button>
<button type="submit" class="btn">submit</button>
<button type="reset" class=>reset</button>
<button type="cancel">cancel</button>
</body>
</html>6️⃣ 그룹 선택자 👉🏻 ,
여러 개의 쉼표로 구분해서 한 번에 동일한 스타일을 적용할 수 있습니다.
/*style.css*/
h1,
h2,
h3 {
color: blue;
}7️⃣ 복합 선택자 👉🏻 공백 > ~ +
✅ 공백 자손선택자
✅ > 자식 선택자
✅ ~ 일반형제 선택자
✅ + 인접 형제 선택자
📁 선택자 우선순위
| 선택자 | 가중치 |
| 인라인 스타일 | 1000점 |
| ID 선택자 | 100점 |
| 클래스 선택자, 가상클래스, 속성 선택자 | 10점 |
| 타입 선택자, 가상 선택자 | 1점 |
| 전체 선택자 | 0점 |
🧐 예제를 통해 선택자 우선순위를 익혀보세요!
우선순위 문제☝️
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 요소선택자 1 + id 선택자 100 = 101 */
div #id1 {
color: green;
}
/* 요소선택자 1 */
p {
color: black;
}
/* id 선택자 100 */
#id1 {
color: blue;
}
/* 클래스선택자 10점 */
.class {
color: yellow;
}
</style>
</head>
<body>
<div>
<p id="id1" class="class">1. 이 글자는 어떤 색일까요?</p>
<!-- 인라인 스타일 1000점 -->
<p id="id2" class="class" style="color: red">2. 이 글자는 어떤 색일까요??</p>
<!-- 정답 1. green 2. red -->
</div>
</body>
</html>우선순위문제✌️
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 클래스 + 유형 선택자 */
/* 11 */
.ul a {
color: yellow;
}
/* 클래스 선택자 */
/* 10 */
.click {
color: green;
background: black;
}
/* 유형 선택자 */
/* 유형 선택자가 아무리 많아도 클래스 선택자를 이길 수 없음 */
/* 12점이 아니라 9점으로 생각해야 한다! */
html body main section article div ul li p strong span a {
background: purple;
color: blue;
}
</style>
</head>
<body>
<main>
<section>
<article>
<div>
<ul class="ul">
<li>
<p>
<strong>
<span>
<a href="#" class="click"> 1. 이 글자는 어떤 색일까요? 2. 배경색은 어떤 색일까요? </a>
<!-- 정답: 글자 yellow, 배경 black -->
</span>
</strong>
</p>
</li>
</ul>
</div>
</article>
</section>
</main>
</body>
</html>📁 가상 선택자
: first 형제 요소 중 첫 번째 요소 선택
: last-child 형제 요소 중 마지막 요소 선택
: nth-child n번째 요소 선택
: not() 괄호에 부합하지 않은 요소 선택
여기서 헷갈렸던 점이 n번째 요소라고 하니 랜덤 선택인 것으로 착각했었습니다.
그러나 nth-child는 랜덤이 아닌 명시와 규칙으로 요소를 선택합니다.
li:first-child(3){ // 선택자 3번째 자식 요소
color: red;
}
li:nth-(3n){ // 3의 배수 자식 요소 (3, 6, 9, ...)
color: blue;
}
li:nth-(3n+1){ //3의 배수 + 1 자식 요소 (1, 4, 7, ...)
color: aqua;
}
li:nth-child(even){ // 짝수
color: grey;
}
}li:nth-child(odd){ // 홀수
color: greenyellow;
}👉🏻 따라서 가상선택자는 규칙에 따라서 요소를 선택하는 기준이 달라질 수 있습니다.
❗ +, - 연산만 가능
❗ 랜덤이 아닌 명시하여 지정
📁 Flexbox와 가상 선택자를 활용한 CSS 예제
이번 예제는 함께 따라해보시면 CSS의 전반적인 이해에 도움이 될텐데요.
- 🦊지지 강사님
- 💙로지 강사님
- 💙라이캣 강사님
- 💙개리 강사님
Flexbox와 가상 선택자를 사용하여 다양한 색상으로 스타일링된
도형들을 가로로 배치하고, 특정 도형에만 스타일을 적용해보겠습니다.
✅ 조건
✔️ Flexbox를 사용하여 도형들을 가로로 배치하고, 중앙 정렬 및 간격 조정을 합니다.
✔️ 가상 선택자를 사용하여 특정 도형의 글자 색상과 테두리를 설정합니다.
✔️ CSS 클래스를 활용하여 각 도형의 배경 색상과 텍스트 스타일을 조절합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* .small-text 클래스를 가진 요소의 폰트 크기를 기본의 50%로 설정 */
.small-text {
font-size: 0.5em;
}
/* .container 클래스: 자식 요소를 flexbox로 가로로 배치하고, 가운데 정렬하며, 요소 사이의 간격을 설정 */
.container {
display: flex;
align-items: center;
gap: 5px;
}
/* .box 클래스: 크기와 중앙 정렬, 기본 텍스트 색상과 폰트 크기 설정 */
.box {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: black;
font-size: 18px;
}
/* 짝수 번째 .box 요소의 글자 색상을 하얀색으로 설정 */
.box:nth-child(even) {
color: white;
}
/* 첫 번째 .box 요소의 테두리를 검정색으로 설정 */
.box:first-child {
border: 10px solid black;
}
/* 마지막 .box 요소의 테두리를 검정색으로 설정 */
.box:last-child {
border: 10px solid black;
}
/* .red 클래스: 배경 색상을 빨강으로 설정 */
.red {
background-color: red;
}
/* .orange 클래스: 배경 색상을 주황으로 설정 */
.orange {
background-color: orange;
}
/* .yellow 클래스: 배경 색상을 노랑으로 설정 */
.yellow {
background-color: yellow;
}
/* .green 클래스: 배경 색상을 초록으로 설정 */
.green {
background-color: green;
}
/* .blue 클래스: 배경 색상을 파랑으로 설정 */
.blue {
background-color: blue;
}
/* .darkblue 클래스: 배경 색상을 다크블루로 설정 */
.darkblue {
background-color: darkblue;
}
/* .purple 클래스: 배경 색상을 보라색으로 설정 */
.purple {
background-color: purple;
}
</style>
</head>
<body>
<!-- .container 클래스를 가진 div 요소 내에 .box 클래스를 가진 여러 개의 자식 div 요소를 배치 -->
<div class="container">
<div class="box red">빨강</div>
<div class="box orange">주황</div>
<div class="box yellow">노랑</div>
<div class="box green">초록</div>
<div class="box blue">파랑</div>
<div class="box darkblue">남색</div>
<div class="box purple">보라</div>
</div>
<!-- 리스트 항목에 이모지와 함께 "강사님" 텍스트를 포함한 ul 요소 -->
<ul>
<li>🦊지지 <span class="small-text">강사님</span></li>
<li>💙로지 <span class="small-text">강사님</span></li>
<li>💙라이캣 <span class="small-text">강사님</span></li>
<li>💙개리 <span class="small-text">강사님</span></li>
</ul>
</body>
</html>💭 그 외로 궁금했던 사항들!
HTML/CSS를 우습게 보면 안된다.
어렵다기보단 분량이 많아 폭력 쓸 뻔 했다.
📝 4일차 부트캠프 회고
1️⃣ 잘했던 점
선택자와 CSS의 개념을 알아야 진행할 수 있는 무지개 박스 만들기 실습을 할 때, 사각형 박스들을 무엇으로 만들어야 되나 고민을 했다. "표를 가로로 길게 이어붙어야되나?" 라는 웃긴 생각도 해보고 약간의 힌트를 얻기 위해서 박스를 이어 붙이는 방법을 검색해보았더니 이런 레이아웃을 만드려면 flex라는 개념을 사용하면 된다는 것을 알았다. flex 컨테이너는 flex 아이템들을 유연하게 배치하고 정렬할 수 있는 큰 틀이다. 일반적으로 떠올리는 컨테이너처럼, flexbox를 사용하면 아이템들을 가로 또는 세로 방향으로 배치하고 다양한 크기의 아이템들을 유연하게 조정하여 복잡한 레이아웃을 간편하게 만들 수 있다.
작성된 코드에서 container 클래스를 가진 div 요소가 flex 컨테이너 역할을 하고 내부의 box 요소들이 flex 아이템으로 배치해주었다. 이 방법을 사용하여 박스들을 가로로 배치하고, 정렬과 간격을 설정할 수 있었던 것이다. 3일차 때 "화면에 그려질 레이이아웃 배치방법"에 대해 어떤 것으로 처리해야될지 궁금한 점이 있었는데, 이번 실습을 하면서 왠지 이걸로 해결하면 될 것 같아 검색해보았더니 flexbox로도 레이아웃을 만들 수 있다는 것을 알았다.(궁금증 해결! 실제로 많은 페이지들이 이 기술을 사용한다고 한다.) 내일 이 부분에 대해서 수업시간에 배운다고 하니 집중을 해서 완벽히 알 수 있도록 해야겠다.2️⃣ 부족했던 점
수업을 하면서 느꼈는데 짧은 시간 내에 많은 것을 배우다보니 화면을 구현해내는데 너무 많은 시간이 흘렀다. 주어진 시간이 있으면 다른 분들은 다 끝냈는데 나만 뒤쳐지는 것 같은 느낌! 쉬는 시간을 이용해서 마무리까진 했지만 속도를 빨리 내야될 것 같다. 오전 9시부터 오후 6시까지 부트캠프가 진행되는데 솔직히 이야기하면 끝난 이후에도 거의 자기 전까지 블로그를 쓰고 있다. 그래도 계속 정리하고 공부하다보면 언젠가는 개발 속도도 빨라지고 이해하는 능력도 빨라지지 않을까싶다. 나도 스터디 정말 참여하고 싶은데 아직까진 수업+회고록쓰기 때문에 버겁다. 코테까지 준비하면 잠은 포기해야될 것 같다.
3️⃣ 향후 개선 방향
이론도 중요하지만 진행했던 예제를 블로그 쓰면서 살짝 변형해서 올려보는 것도 도움이 될 것 같다.
'🎨 HTML, CSS' 카테고리의 다른 글
| [🥸HTML/CSS]📝랜딩페이지 좌우 여백, 헤더 고정, 스크롤 탑 버튼➰(반응형 웹페이지) (0) | 2024.08.20 |
|---|---|
| [🥸HTML/CSS]📝랜딩페이지 시맨틱 구조 분석 및 설계➰(반응형 웹페이지) (3) | 2024.08.19 |
| [🥸HTML/CSS]📝웹 접근성 스크린리더 관련 클래스명➰(sr-only) (0) | 2024.08.13 |
| [🥸HTML/CSS]📝CSS 박스 모델과 Display 속성➰(Flex 레이아웃) (0) | 2024.08.09 |
| [🥸HTML/CSS]📝HTML구조와 시맨틱 태그 종류(➰당근마켓, 네이버 분석) (2) | 2024.08.07 |