코드스테이츠 3일차

3일차, 뭔가 익숙해진거 같기도 하고, 아닌거 같기도한 애매한 느낌이 듭니다. 하지만, 왠지 잘할 수 있을 것 같다는 근거없는(?) 자신감이 생깁니다 ㅋㅋㅋ
자, 그러면 오늘 배운 내용을 잠깐 복습하는 시간을 가져보려 합니다. 저번시간은 HTML이었는데
이번에는 CSS입니다. 자 시작합니다~~

CSS (Cascading Style Sheets)는 HTML로 작성한 웹 애플리케이션의 구조에 디자인을 적용할 수 있는 스타일 시트 언어입니다.
HTML이 웹 페이지의 구조를 담당한다면, CSS는 HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 담당합니다.

사용자 인터페이스(UI; user interface)에 관해서 설명하기 전, 인터페이스(interface)에 대해서 알아보겠습니다. 쉽게 설명하자면 인터페이스는 컴퓨터와 교류하기 위한 연결고리입니다.
컴퓨터에 대해 잘 모르는 일반 사용자라도 쉽게 사용할 수 있는 인터페이스에는 앞에 “사용자"를 붙여 사용자 인터페이스, UI라고 부릅니다.

셀렉터는 요소 이름이나 id, 또는 클래스를 선택합니다.
셀렉터로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성합니다.
요소에 적용할 수 있는 내용을 속성이라고 합니다. 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분합니다. 세미콜론을 적는 습관을 들이는 것이 좋습니다.

(내가 잘 몰랐던 것)
background와 background-color 모두 배경 색상을 지정할 수 있다.
그러나, background-color 즉 색깔만 지정할 수 있는 반면에, background는 color 이외의 다른 background 옵션들까지 지정해줄 수있다. background는 다른 color / image / repeat / attachment / position과 background 옵션들을 추가적으로 부여할 수 있다.

<link rel="stylesheet" href="index.css" />
<link> 요소는 HTML 파일과 다른 파일을 연결하는 목적으로 사용합니다. 
<link> 요소의 rel 은 연결하고자 하는 파일의 역할이나 특징을 나타냅니다. 
CSS(Cascading Style Sheet)는 stylesheet이므로 rel 속성에 stylesheet 를 추가합니다.
href 속성에는 파일의 위치를 추가해야 합니다. 
지금 작성한 두 파일은 한 폴더 내에 있으므로 파일 이름만 입력합니다. 
다른 폴더에 파일이 존재하는 경우, 절대 경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결할 수 있습니다.

CSS 스타일을 적용할 수 있는 방법은 3가지가 있습니다. 그 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일, CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style 요소 내에 작성하는 내부 스타일 시트, 그리고 앞서 설명한 외부 스타일 시트입니다. 아래의 예제는 세 가지 방법 중 인라인 스타일에 해당합니다.

<nav style="background: #eee; color: blue">...</nav>
[코드] CSS 스타일 적용법 중 인라인 스타일

그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않습니다.

1) id로 이름 붙여서 스타일링 적용하기
2) class로 스타일을 분류하여 적용하기

저는 text-align 부분에서 justify라는 녀석이 잘 이해가 안됐었는데요...
https://developer.mozilla.org/ko/docs/Web/CSS/text-align
이 주소에 들어가서 보시면 저처럼 바로 이해되실겁니다!!

그리고 상대단위와 절대단위를 배웠습니다!

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

inline 요소 VS block 요소 VS inline-block 요소

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

자식 셀렉터
자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택합니다. 
아래 예시의 경우 <header> 요소 바로 아래에 있는 두 개의 <div> 요소는 선택되지만, 
<p> 요소의 자식인 <div> 요소는 선택되지 않습니다. 
(마찬가지로 후손 셀렉터와의 차이를 반드시 알고 있어야 합니다.)

header > div { }



후손 셀렉터
후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택합니다. 
(자식 셀렉터와의 차이점을 반드시 알고 있어야 합니다.)

header div {}


형제 셀렉터
형제 셀렉터는 같은 부모 요소를 공유하면서, 
첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택합니다. 
아래 예시의 경우 <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>