4/13 CSS 기초

오늘의 학습목표

• CSS의 사용 목적을 이해한다.
• CSS의 기본 문법과 구조를 이해한다.
• CSS를 HTML에 적용하는 방법에 대해서 이해한다.
• HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.
• CSS를 이용해 텍스트를 꾸밀 수 있다.
• CSS에서 쓰이는 단위의 두 가지 구분을 이해한다.
• 각 단위가 적합한 경우를 구분할 수 있다.
• MDN 또는 W3School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 사용할 수 있다.

Chapter1. CSS 기초

CSS (Cascading Style Sheets)

• 스타일시트 언어
• 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 사용
• HTML문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할

사용자 인터페이스(UI; user interface)

• 인터페이스(interface) ➡️ 컴퓨터와 교류하기 위한 연결고리
• UI ➡️ 컴퓨터에 무지한 일바 사용자가 쉽게 사용할 수 있는 인터페이스
• UI가 없다면 사용자는 애플리케이션과 소통이 불가능 하다
• UI를 만드는것이 프론트엔드 개발자의 역할

사용자 경험(UX; user experience)

• 사용자가 애플리케이션에 더욱 집중할 수 있도록 만드는 디자인적 요소
• 무료 아이콘 사이트(free app icon 검색)을 통해 아이콘을 얻을 수 있다

CSS문법 구성

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

https://fonts.google.com/

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

[그림] border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있습니다.

이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다. 일반적으로 box-sizing은 HTML 문서 전체에 적용합니다. box-sizing을 일부 요소에만 적용하는 경우, 혼란을 가중시킬 수 있습니다. 앞으로 레이아웃과 관련된 이야기를 할 때는 border-box 계산법을 기준으로 이야기합니다. 박스 크기 측정 기준 두 가지를 항상 기억해 주세요.

• content-box는 박스의 크기를 측정하는 기본값입니다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장합니다.
  

Chater2. 박스모델

웹페이지내의 모든 콘텐츠는 고유의 영역을 가지고 있는데 사각형으로 이루어져 있기 때문에 box라고 부른다.
줄바꿈이 되는 박스(Block), 줄바꿈 없이 옆으로 붙는 박스(inline ,inline-block)
html에도 block 요소가 있었다.

Html의 줄바꿈 요소
block 요소 : <h1>, <p>
inline 요소 : <span>

다양한 요소가 있지만 무작정 외우는 것 보다, 개발하면서 자연스럽게 익히는 것을 권장한다고 한다.

Chapter3. CSS Selector

전체 셀렉터
문서의 모든 요소를 선택한다.

*{}

태그 셀렉터
같은 태그명을 갖고 있는 모든 요소를 선택한다.
복수 선택 가능.

h1 {}
div {}

section, h1 {}

ID 셀렉터
#id 로 입력하여 선택한다.

#only {}

class 셀렉터
.class로 입력하여 선택한다.

.widget {}
.center {}

attribute 셀렉터
같은 속성을 가진 요소를 선택한다.

a[href] {}
p[id = "only"] {}
p[class ~= "out"] {}
p[class |= "out"] {}

자식/ 후손/ 형제 셀렉터

자식 셀렉터
첫번째로 입력한 요소 바로 아래인 자식 요소를 선택한다.(후손 셀렉터와의 차이점 인지할 것)

header > div {}

(예시)
<header>
	<div> <!-- 선택 -->
    	<p>
        	<div></div>
        </p>
    </div>
    <div> <!-- 선택 -->
    	<p>
        	<div></div>
        </p>
    </div>
</header>

후손 셀렉터
첫번째로 입력한 요소의 후손을 선택한다.

header div {}

(예시)
<header>
	<div> <!-- 선택 -->
		<p>
			<div> <!-- !!선택!! -->
			</div>
		</p>
	</div>
	<div> <!-- 선택 -->
		<p>
			<div> <!-- !!선택!! -->
			</div>
		<p>
	</div>
<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>