[HTML/CSS] CSS 기초

---

🕖 DAY +6 / 2022. 10. 27

SEB FE / Section1 / Unit5 / CSS 기초

---

📌 Today I Learned

• CSS 기초
• 박스 모델
• CSS selector

💬 CSS란?

웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어다.
UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있다.

CSS 문법의 구성

• 하나의 속성만 존재할 때는 세미콜론(;)을 붙이지 않아도 되지만, 속성과 값을 작성한 다음 세미콜론을 적는 습관을 들이는 것이 좋다.

id와 class의 차이점

• ID
  #으로 선택
  한 문서에 단 하나의 요소에만 적용
  특정 요소에 이름을 붙이는 데 사용

• class
  .으로 선택
  동일한 값을 갖는 요소 많음
  스타일 분류(classificatio)에 사용

예제

.blue {
  color: #0000ff;
}
<!-- blue class의 color 속성에 #0000ff 값을 할당한다 -->

.box {
  color: #000000; /* 글자 색상 */
  background-color: #c7b299; /* 배경 색상 */
  border-color: #ffffff; /* 테두리 색상 */
}
<!-- 글자, 배경, 테두리 색상은 각기 다른 속성을 가지고 있다 -->

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
<!-- font-family 속성을 통해 글꼴(폰트)을 설정할 수 있다 -->

글꼴의 이름은 따옴표를 붙여서 적용할 수 있다. 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있다. 이런 경우를 대비하여 fallback 글꼴을 추가할 수 있다. fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책이다. fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력할 수 있다. 입력된 순서대로 fallback이 적용된다.

기타 스타일링

• w3wschool
  https://www.w3schools.com/tags/att_name.asp

단위

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

💫 글꼴 사이즈를 정할 때

1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 절대적인 크기로 정하는 경우

   • px을 사용한다.
   • 픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다.
   • 모바일 기기처럼 작은 화면이면서 동시에 고해상도인 경우에 적합하지 않다.
   • 인쇄와 같이 화면의 사이즈가 정해진 경우 유리하다.

2. 일반적인 경우

   • 상대 단위 rem을 추천한다.
   • root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem등으로 조절하여 사용 가능하다.

💫 화면 사이즈를 정할 때

1. 반응형 웹(responsive web)에서 기준점을 만들 때

   • 유동적인 레이아웃이 적용되는 웹사이트를 말한다.
   • 데스크탑, 태블릿, 스마트폰 세로, 가로 등
   • 디바이스 크기별로 CSS를 다르게 적용해야 한다.
   • 디바이스 크기를 나누는 기준은 보통 px로 지정한다.

2. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우

   • vw, vh 사용을 추천한다.
   • 웹사이트의 보이는 영역을 Viewport라고 하는데 vw, vh는 각각 viewport width와 viewport height를 뜻한다.
   • 1vw는 보이는 영역 너비의 1/100을, 1vh는 보이는 영역 높이의 1/100을 뜻한다.
   • 화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트에서 사용된다. 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh를 사용해 구현한 것이다.

💬 박스 모델이란?

• 모든 콘텐츠에는 고유한 영역이 있다.
• 각자의 영역을 가지며 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다.
• 박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가진다.

예제

<!-- html 예제 -->
<h1>Basic document flow</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not</p>

<!-- css 예제 -->
h1 {
  background: gray;
  width: 60%;
}

p {
  background: rgba(255,84,104,0.3);
  width: 80%;
  height: 200px;
}

span {
  background: yellow;
  width: 100px;
  height: 100px;
}

block, inline-block, inline의 특징

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

박스를 구성하는 요소

border (테두리)
각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만든다.

p {
  border: 1px solid red;
}

margin (바깥 여백)
각각의 값은 top, right, bottom, left로 시계방향이다.

p {
  margin: 10px 20px 30px 40px;
}

값을 두 개만 넣으면 top과 bottom이 10px, left 및 right가 20px이다.

p {
  margin: 10px 20px;
}

값을 하나만 넣으면 모든 방향의 바깥 여백에 적용된다.

p {
  margin: 10px;
}

다음과 같이 방향을 특정한 속성도 존재한다.

p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

• 위와 같은 규칙은 padding에도 동일하게 적용된다.
  
  

content-box와 border-box
여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장한다.

아래 그림은 * {}에 기본적으로 들어가는 것이다.
초기화를 하고 시작하는 것이 좋다.

💬 CSS selector란?

CSS 속성을 적용할 대상을 선택하는 방법을 CSS selector라고 한다.

자식 / 후손 / 형제 셀렉터

💡 자식 셀렉터

• 자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다. 예제의 경우 <header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만, <span> 요소의 자식인 <p> 요소는 선택되지 않는다.

예제

header > p { }

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

💡 후손 셀렉터

• 후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택한다. 예제의 경우 <header> 요소의 자식인 <p> 요소를 뿐 아니라, <header> 요소의 자식의 자식인 있는 <p> 요소까지 모두 선택된다.

예제

header p { }

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

💡 형제 셀렉터

• 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다. 예제의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소를 모두 선택합니다.

예제

section ~ p { }

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

💡 인접 형제 셀렉터

• 인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다. 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소 중 첫 번째 <p> 요소를 선택합니다.

예제

section + p { }

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

CSS selector
CSS selector를 게임으로 배울 수 있는 사이트
https://flukeout.github.io/

👀 돌아보기

확실히 셀렉터는 많이 보고, 써보고, 배워야 할 것 같다.
퀴즈를 풀며 어느 정도 구별을 할 수 있지만 CSS 디너 게임을 진행하기엔 아직 부족한 점이 많다.
심화 과정들을 어려워하는 듯 싶은데... 조금 더 집중해서 이해하도록 하자.