[TIL] Unit 5. CSS 기초

string_main·2022년 5월 2일

@property Box Model CODESTATES CSS Soc selector

CSS

목록 보기

1/1

🌱용어 정리

CSS(Cascading Style Sheets) : 웹 페이지의 스타일 및 레이아웃을 정의하는 스타일시트 언어이자 더 나은 사용자 경험(UX)을 제공하기 위한 도구 (사용자가 HTML문서를 잘 이해할 수 있도록 돕는 역할)
UI(User Interface) : 컴퓨터에 무지한 일반 사용자도 애플리케이션을 쉽게 사용할 수 있게 하는 사용자 인터페이스
UX(User eXperience) : 사용자가 어떤 서비스를 이용하면서 느끼는 총체적 경험

🌱프론트엔드 개발자의 기본 소양

컴포넌트를 기능별로 묶어서 제작

화면의 구성이나 배치 (레이아웃 디자인)

굵은 글씨 등 타이포그래피와 색상 적용

정렬이나 배색에 대한 감각

UX에 대해 고민하고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험

직관적이고 쉬운 UI 제작

🌱CSS 문법

🌿기본 구성요소

body { /*셀렉터 및 선언 블록*/
	color: red; /*선언 = 속성명 + 속성값 + 선언 구문자*/
    font-size: 30px;
}

셀렉터(Selector) (요소 이름이나 id, 클래스 등 특정 요소를 선택)
선언 블록(Declaration block)
선언(Declaration)
속성명(Property)
속성값(Value)
선언 구분자(;)

🌿CSS 적용 방법

인라인 스타일

<!--html-->
<nav style="background: #eee; color: blue">...</nav>

내부 스타일 시트

<!--html-->
<style>
#hello1 {
  color: red;
  background-color: yellow;
}
</style>

외부 스타일 시트 (권장)

/*css*/
#hello1 {
  color: red;
  background-color: yellow;
}

<!--html-->
<link rel="stylesheet" href="index.css" />

import

/*css*/
#hello1 {
  color: red;
  background-color: yellow;
}

<!--html-->
<style type='text/css'>
@import url("mystyle.css");
</style>

🌱id & class

id : 고유(unique)한 이름을 붙일 때 사용 (중복 허용 X)
class : 여러 요소에 동일 스타일을 적용할 때 사용

id	class
# 으로 선택	. 으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소에 적용
특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용

🌱CSS 속성(Property)

color : 글꼴 색상 속성

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

font-family : 글꼴 속성, 글꼴이 존재하지 않거나 디바이스에 따라 지원하지 않는 글꼴이 있을 수 있어 fallback 글꼴을 추가할 수 있음

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

font-size : 폰트 크기 속성
font-weight : 폰트 굵기 속성
text-decoration : 밑줄, 가로줄 속성
letter-spacing : 자간 속성
line-height : 행간 속성
text-align : 가로 정렬 속성 (left. right, center, justify)

🌱관심사 분리(SoC:Separation of Concerns)

정의 : 컴퓨터 프로그램을 구별된 부분으로 분리시키는 디자인 원칙
관심사 분리라는 패러다임을 적용해 더 이상 <center>, <font>를 사용하지 않음 (HTML은 구조를 설계하는 일만 담당하고, CSS는 스타일링만 담당)

🌱절대 단위와 상대 단위

절대 단위 : px, pt 등
상대 단위 : %, em, rem, ch, vw, vh 등

🌿글꼴 사이즈를 정할 때

절대적인 크기로 정하는 경우 : px 사용

고정된 절대 단위이기 때문에 사용자 접근성이 불리
픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리
고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우가 있음

일반적인 경우 : rem 사용

root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절
사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리함
em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어려움. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변함

🌿화면 사이즈를 정할 때

반응형 웹(responsive web) 기준 : px 사용

반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 사이트이다.

화면 너비나 높이에 따른 상대적 크기가 중요한 경우 : vw(viewport width), vh(viewport height) 사용

1vw 는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻함 (화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트는 100vw, 100vh 를 사용해 구현한 것)
참고로 <body> 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율임

| 예시 사이트 |

https://www.tesla.com/

https://www.krause.studio/#four

https://redredefined.preciosacomponents.com/

🌱Box Model

모든 콘텐츠는 각자의 영역을 가지며, 하나의 컨텐츠로 묶이는 요소들이 하나의 박스가 된다.

🌿block 요소 vs inline 요소

block 요소 : <h1>, <p>, <div> 등
inline 요소 : <span> 등 (inline은 width, height 속성이 적용되지 않음)

	block	inline-block	inline
줄바꿈 여부	줄바꿈 일어남	줄바꿈 일어나지 않음	줄바꿈 일어나지 않음
기본 너비 (width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능	불가능

🌿Box 구성 요소

border : 테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용된다. (크기, 영역 파악 등)
margin : 바깥 여백 (속성값은 top, right, bottom, left로 시계방향이며, 음수 값 지정도 가능)
padding : 안쪽 여백

🌿Box를 벗어나는 콘텐츠 처리

콘텐츠가 차지하는 높이보다 작은 값 할당
박스 크기에 맞춰 콘텐츠를 더 이상 표시하지 않거나 박스 안에 스크롤을 추가 (overflow)

🌿Box 크기 측정 기준(Box Sizing)

content-box는 박스의 크기를 측정하는 기본값이다.
아래와 같이 여백을 고려하지 않고 계산하면 레이아웃 디자인이 어려워진다. (대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장함)

<!--html-->
<div id="container">
  <div id="inner">
    안쪽 box
  </div>
</div>

/*css*/
#container {
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

#inner {
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}

ex) #container의 너비를 300px로 지정했는데 개발자 도구로 확인 시 324px이 되는 경우
300px (콘텐츠 영역)
+ 10px (padding-left)
+ 10px (padding-right)
+ 2px (border-left)
+ 2px (border-right)

여백과 테두리 두께를 포함해 박스 크기를 계산하게 만드는 방법 (권장) : boder-box

/*css*/
* {
  box-sizing: border-box;
}

🌱셀렉터(Selector)

🌿기본 셀렉터

전체 셀렉터 : 문서의 모든 요소 선택

* { }

태그 셀렉터 : 같은 태그명을 가진 모든 요소 선택 (복수 선택 가능)

h1 { }
div { }

section, h1 { }

ID 셀렉터 : #으로 요소 선택

#only { }

class 셀렉터 : .으로 요소 선택

.widget { }
.center { }

attribute 셀렉터 : 같은 속성을 가진 요소 선택

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

🌿자식/후손/형제 셀렉터

자식 셀렉터 : 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 모두 선택

header > p { }

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>

후손 셀렉터 : 첫 번째로 입력한 요소 뿐만 아니라 후손까지 모두 선택

header p {}

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>

형제 셀렉터 : 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택

section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>

인접 형제 셀렉터 : 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소 선택

section + p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>

🌿기타 셀렉터

가상 클래스 셀렉터 : 요소의 상태 정보에 기반해 요소를 선택

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택*/
a:visited { } /*사용자가 방문한 <a>요소를 선택 */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택 */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택 */
a:focus { } /* 포커스가 들어와 있을 때 선택 */

UI 요소 상태 셀렉터

input:checked + span { } /*체크 상태일 때 선택 */
input:enabled + span { } /*사용 가능한 상태일 때 선택 */
input:disabled + span { } /*사용 불가능한 상태일 때 선택 */

구조 가상 클래스 셀렉터

p:first-child { } /*p 엘리먼트 중에서, 첫 번째 자식 엘리먼트를 선택*/
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { } /*section의 자식 엘리먼트 중에서, 홀수 번째 자식 엘리먼트가 p인 것을 선택*/
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { } /*div의 자식 엘리먼트 중에서, 마지막에서 두 번째 엘리먼트가 div인 것을 선택*/
section > p:nth-last-child(2n + 1) { }
p:first-of-type { } /*p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택 (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택)*/
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 셀렉터

input[type="text"]:valid { }
input[type="text"]:invalid { }

셀렉터 연습 게임

https://flukeout.github.io/

🌱알게된 점 & 느낀 점

아무리 훌륭한 기능을 가지고 있더라도 UI가 없으면 소용이 없다. 그 UI를 만드는 역할이 프론트엔드 개발자이다.
CSS는 배우기 가장 쉬운 동시에, 가장 어려운 언어이다. 규모가 조금만 커져도 CSS를 의미있게 구성하는 일이 어렵고, 한 부분을 변경해도 의도치 않은 다른 요소가 변경되는 일이 있어 다양한 모범 사례(Best practice)를 익혀야 한다.
셀렉터,,,,헷갈리니까 복습이랑 연습 꼭 하자,,,,

🌱추가 학습

다양한 CSS selector 이해하고 익숙해지기 (https://codestates.github.io/sw-checkpoint-css-selector-deploy/)
개발자 도구의 Element 탭을 이용하여 자주 가는 웹 사이트의 CSS 속성을 변경해 보기

| 참고자료 |

https://ko.wikipedia.org/wiki/%EA%B4%80%EC%8B%AC%EC%82%AC_%EB%B6%84%EB%A6%AC

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages

https://fresh-mint.tistory.com/entry/css-Pseudo-classes-Selector-%EA%B0%80%EC%83%81-%ED%81%B4%EB%9E%98%EC%8A%A4-%EC%84%A0%ED%83%9D%EC%9E%90

string_main

FE developer

[TIL] Unit 5. CSS 기초

CSS

🌱용어 정리

🌱프론트엔드 개발자의 기본 소양

🌱CSS 문법

🌿기본 구성요소

🌿CSS 적용 방법

🌱id & class

🌱CSS 속성(Property)

🌱관심사 분리(SoC:Separation of Concerns)

🌱절대 단위와 상대 단위

🌿글꼴 사이즈를 정할 때

🌿화면 사이즈를 정할 때

| 예시 사이트 |

🌱Box Model

🌿block 요소 vs inline 요소

🌿Box 구성 요소

🌿Box를 벗어나는 콘텐츠 처리

🌿Box 크기 측정 기준(Box Sizing)

🌱셀렉터(Selector)

🌿기본 셀렉터

🌿자식/후손/형제 셀렉터

🌿기타 셀렉터

🌱알게된 점 & 느낀 점

🌱추가 학습

| 참고자료 |

0개의 댓글