[Course 1 ] Part1. HTML/CSS/JS로 만드는 스타벅스 웹사이트_CSS(1)

Minji Lee·2023년 5월 10일

프론트엔드 웹 개발의 모든 것 초격차 패키지 Online.

목록 보기

4/9

CSS

/* 선택자: 스타일을 적용할 대상 */
선택자 {
	/* 속성: 스타일의 종류 */
	/* 속성은 값이다. */
	속성1: 값;
	속성2: 값;
}

주석: /* 설명 작성 */ 수정사항이나 설명 등을 작성(주석) → cmd+/

CSS 작성 방식

1. 내장 방식

HTML 파일 내부에 <style></style>의 내용으로 스타일을 작성하는 방식

→ HTML파일과 CSS파일 분리하는 것이 더 좋음(유지보수가 더 좋음)

<style>
	div {
		color: red;
		margin: 20px;
	}
</style>

2. 인라인 방식

요소의 style속성에 직접 스타일을 작성하는 방식(선택자 없음)

→ 권장하지 않음!(유지보수 측면에서 좋지않음)

<div style="color: red; margin:20px"></div>

3. 링크방식

<link />로 외부 CSS문서를 가져와서 연결하는 방식 → 병렬로 연결

<link rel="stylesheet" href="./css/main/css">

div {
	color: red;
	margin: 20px;
}

4. @import 방식

CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식 → 직렬로 연결

<link rel="stylesheet" href="./css/main/css">

/* main.css */
**@import url("./box.css");**

div {
	color: red;
	margin: 20px;
}

/* box.css */
.box{
	background-color: red;
	padding: 20px;
}

CSS 선택자

기본 선택자

→ 순서 알아두기!

1) 전체 선택자 *: 모든 요소를 선택

* {
	color: red;
}

2) 태그 선택자 ABC: 태그 이름이 ABC인 요소 선택

li {
	color: red;
}

3) 클래스 선택자 .ABC: HTML class속성의 값이 ABC인 요소 선택

<div class="orange">오렌지</li>

.orange {
	color: red;
}

4) 아이디 선택자 #ABC: HTML id 속성의 값이 ABC인 요소 선택

<div id="orange">오렌지</li>

#orange {
	color: red;
}

복합 선택자

1) 일치 선택자 ABCXYZ: 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택

<span class="orange">오렌지</span>

span.orange{
	color: red;
}

2) 자식 선택자 ABC > XYZ: 선택자 ABC의 자식 요소 XYZ 선택

<ul>
	<li class="orange">오렌지</li>
</ul>

ul > .orange {
	color: red;
}

3) 하위(후손)선택자 ABC XYZ: 선택자 ABC의 하위 요소 XYZ 선택. ‘띄어쓰기’가 선택자의 기호!

<div>
	<ul>
		<li class="orange">오렌지</li>
	</ul>
	<span class="orange">오렌지</span>
</div>
<span class="orange">오렌지</span> <!-- 해당 코드는 적용 안됨 -->

div .orange {
	color: red;
}

4) 인접 형제 선택자 ABC+XYZ: 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

<ul>
	<li>수박</li> 
	<li class="orange">오렌지</li> <!-- 해당 클래스를 기준으로 다음 요소 -->
	<li>망고</li>  <!-- 해당 요소 선택 -->
	<li>사과</li>
</ul>

.orange + li {
	color: red;
}

5) 일반 형제 선택자 ABC~XYZ: 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

<ul>
	<li>수박</li> 
	<li class="orange">오렌지</li> <!-- 해당 클래스를 기준으로 다음 요소 -->
	<li>망고</li>  <!-- 해당 요소 선택 -->
	<li>사과</li>  <!-- 해당 요소 선택 -->
</ul>

.orange ~ li {
	color: red;
}

가상 클래스 선택자

1) Hover ABC:hover: 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

a:hover{
	color: red;
}

2) Active ABC:active: 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

a:active{
	color: red;
}

3) Focus ABC:focus: 선택자 ABC 요소가 포커스되면 선택

→ focus가 될 수 있는 요소는 input, a, button, label, select등 대화형 콘텐츠가 해당

→ tabindex=”-1”을 추가하면 focus가 되지 않는 요소에도 focus 추가 가능

input:focus{
	background-color: orange;
}

4) First Child ABC:first-child: 선택자 ABC가 형제 요소 중 첫째라면 선택

<div class="fruits">
	<span>딸기</span> <!-- 해당 span태그만 css 적용됨-->
	<span>수박</span>
	<div>오렌지</div>
	<p>망고</p>
</div>

.fruits span:first-child{
	color: red;
}

5) Last Child ABC:last-child: 선택자 ABC가 형제 요소 중 막내라면 선택

<div class="fruits">
	<span>딸기</span> 
	<span>수박</span>
	<div>오렌지</div>
	<p>망고</p> <!-- 해당 태그만 css 적용됨-->
</div>

.fruits p:last-child{
	color: red;
}

6) Nth Child ABC:nth-child(n): 선택자 ABC가 형제 요소 중 (n)째 라면 선택

<div class="fruits">
	<span>딸기</span> 
	<span>수박</span> <!-- 해당 태그만 css 적용됨-->
	<div>오렌지</div>
	<p>망고</p> 
</div>

.fruits *:nth-child(2){
	color: red;
}

짝수 번째 요소 스타일 속성 적용

<div class="fruits">
	<span>딸기</span> 
	<span>수박</span> <!-- 해당 태그 css 적용됨-->
	<div>오렌지</div>
	<p>망고</p> <!-- 해당 태그 css 적용됨-->
</div>

.fruits *:nth-child(2n){
	color: red;
}
/* n은 0부터 시작 */
/* 2n=n*2를 의미 -> 짝수 번쨰 태그에만 css 속성 적용 */

홀수 번째 요소 스타일 속성 적용

<div class="fruits">
	<span>딸기</span> <!-- 해당 태그 css 적용됨-->
	<span>수박</span> 
	<div>오렌지</div> <!-- 해당 태그 css 적용됨-->
	<p>망고</p> 
</div>

.fruits *:nth-child(2n+1){
	color: red;
}
/* n은 0부터 시작 */
/* 2n+1=n*2+1를 의미 -> 홀수 번쨰 태그에만 css 속성 적용 */

다양한 방식

<div class="fruits">
	<span>딸기</span> 
	<span>수박</span> <!-- 해당 태그 css 적용됨-->
	<div>오렌지</div> <!-- 해당 태그 css 적용됨-->
	<p>망고</p> <!-- 해당 태그 css 적용됨-->
</div>

.fruits *:nth-child(n+2){
	color: red;
}
/* n은 0부터 시작 */
/* n+2를 의미 -> 두번쨰 태그부터 마지막 태그까지 css 속성 적용 */

7) Not ABC:not(XYZ): 선택자 XYZ가 아닌 ABC 요소 선택

<div class="fruits">
	<span>딸기</span> 
	<span>수박</span>
	<div>오렌지</div> <!-- 해당 태그 css 적용됨-->
	<p>망고</p> <!-- 해당 태그 css 적용됨-->
</div>

.fruits *:not(span){
	color: red;
}
/* span태그가 아닌 모든 요소들 */

가상 요소 선택자

1) before ABC::before: 선택자 ABC 요소의 내부 앞에 내용을 삽입 → 인라인 요소

<div class="box">
	Content!
</div>

.box::before{
	**content**:'앞!';
}

2) After ABC::after: 선택자 ABC 요소의 내부 뒤에 내용을 삽입 → 인라인 요소

<div class="box">
	Content!
</div>

.box::after{
	**content**:'뒤!';
}

속성 선택자

1) Attr [ABC]: 속성 ABC을 포함한 요소 선택

<input type="text" value="Hello" disabled />

[disabled]{
	color: red;
}

2) Attr=Value [ABC=”XYZ”]: 속성 ABC을 포함하고 값이 XYZ인 요소 선택

<input type="password" value="1234" />

[text="password"]{
	color: red;
}

스타일 상속

상속되는 CSS 속성들 → 모두 글자/문자 관련 속성들(모든 것은 아님!)
- font-style: 글자 기울기
- font-weight: 글자 두께
- font-size: 글자 크기
- line-height: 줄 높이
- font-family: 폰트
- color: 글자 색상
- text-align: 정렬

강제 상속

: 상속받는 구조가 아님에도 강제로 상속 받도록 하는 방법 → inherit 사용

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 300px;
  height: 200px; /* 부모 요소의 height가 바뀌어도 child도 같이 바뀜*/
  background-color: orange;
}
.child {
  width: 100px;
  height: inherit;
  background-color: orange;
}

선택자 우선순위

우선순위: 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

같은 우선 순위인 경우 마지막에 있는 스타일 속성 적용

💡 !important > 인라인 선언 > ID 선택자 > Class 선택자 > 태그 선택자 > 전체 선택자 > 상속(body)

Minji Lee

이전 포스트

[Course 1 ] Part1. HTML/CSS/JS로 만드는 스타벅스 웹사이트_HTML

다음 포스트