[C/F TIL] 3일차 - CSS 기초, 박스모델, di, class, selector

Code States
Front-end boost camp
Today
I
Learned

😷 미세먼지 쩌는 4월 13일, 코드스테이츠 부트캠프 3일차 회고!

---

🤧 CSS 기초

• CSS는? : 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어로, 좋은 사용자 경험을 제공하기 위한 도구
• UI란? : 사용자 인터페이스(user interface), 컴퓨터와 교류하기 위한 연결고리란 뜻의 인터페이스 + 사용자 => 평범한 사용자 누구나 사용할 수 있도록 소통하는 것
• 직관적이고 쉬운 UI제작은 프론트엔드 개발자의 기본 소양!
• UX란? : 좋은 사용자 경험(user experience)으로 같은 내용일지라도 사용자가 편리하게 사용할 수 있도록 고려하고, 배치하여 코딩으로 디자인하는 것.

🤧 CSS 따라하기

• index라는 제목의 html, css파일을 각각 만들어주었다.
• CSS의 문법 구성 알아보기 ▼
  
• html 문서에서 css 문서 연결시키는 방법

## <link> 요소 사용
<link rel="stylesheet" href="index.css"/>
<link rel="stylesheet" href="layout.css"/>

--> rel : 연결하고자 하는 파일의 역할이나 특징
--> href : 파일의 위치, 절대 경로 또는 상대 경로 활용

• layout.css 파일도 만들어 주었다.

---

• CSS 스타일을 적용할 수 있는 방법 3가지 :

1) 인라인 스타일 : 같은 줄에서 스타일을 적용
2) 내부 스타일 시트 : CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style요소 내에 작성
3) 외부 스타일 시트 : 따로 css파일을 작성하여 연결시키는 방식

• 기본적인 셀렉터(selector)
  
  --> 나는 상단 노랑색 박스인 'this is the ~~~'부분을 빨강글씨로 하고 싶었는데, H4요소에 스타일을 먹이니 원하지 않는 다른 부분도 빨강 글씨가 되었다. 그럴땐? : id로 분류하여 적용해본다. (. 사용)

▲ html 문서에 넣은 id 요소 코드

▲ id를 씌운 부분에만 적용된 것을 볼 수 있다.

• 아래에 있는 리스트 요소에 밑줄을 치고 싶다. id를 사용해야할까? 노노, id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이기에, 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서는 class를 사용해야한다. (클래스는 .사용)

▲ html 문서에 class 맥여주기

▲ 밑줄! 완성! 여러개의 요소에 1개의 class를 맥여서 같은 효과 완성!

• 반대로, 여러 class를 하나의 요소에 적용하고 싶다면? : 띄어쓰기로 적용하려는 class들의 이름을 구분한다!
  
  ▲ 아까 화면과 달라진점? 빨강 부분 selected 클래스를 띄어쓰기로 구분하여 적어줬음!

▲ css문서에 selected라는 클래스 속성 하나 적어주고 우왕 완성

• 💯💯💯 반드시 알아둘 것!! 💯💯💯
  

🤧 텍스트 꾸미기

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

## 글꼴 속성 : font-family
.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

## 글자 크기
.title {
  font-size: 24px;
}

## 기타
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height

## 정렬
가로로 정렬 : text-align
이 외에 : left, right, center, justify(양쪽 정렬)

• 폰트의 경우, 더욱 다양한 폰트를 사용하고 싶다면? 웹 폰트 기술 활용! Google Fonts 등
• 텍스트를 담는 태그는 div, span 등 사용
• center, font 태그 사용 금지! : 초기 HTML에는 스타일을 별개로 정의하지 않았지만, 요즘은 관심사 분리라는 패러다임을 적용하기 때문에 CSS파일에 따로 기재한다. HTML은 구조 설계/ CSS는 스타일링 이라는 것 명심!

🤧 절대 단위와 상대 단위

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

• 글꼴 사이즈를 정할 때는 : 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적 크기로 정하는 경우 px(픽셀)을 사용/ 일반적인 경우 상대 단위 rem 추천. root의 글자크기에 따라 접근성 용이, em 은 부모 엘리먼트에 따라 상대적으로 크기가 변해 계산이 어려움

• 화면 사이즈를 정할 때는 : 반응형 웹에서 기준점을 만들 때는 디바이스 크기를 나누는 기준을 보통 px로 정하며 크롬 브라우저에서는 테스트 가능/ 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우엔 vw, vh 추천.

🤧 박스모델

• block 박스 : 줄바꿈이 일어나지 않는 박스, 화면전체를 쓰는 태그 (div, h1, p 요소 등)
• inline 박스 : span 요소 등, width, height 속성이 적용되지 않는다. 자신의 부피만큼 화면을 씀
• inline-block 박스 : inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가짐, inline속성에 'display-inblock'속성을 적용하여 바꿈
  

🤧 박스를 구성하는 요소

• border(테두리) : 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있음. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듦 (기타 속성 검색 팁: border-style mdn)

• margin(바깥 여백) : 상하좌우에 여백을 추가함

## 예시)
p {
  margin: 10px 20px 30px 40px;
}

==> 각각의 값은 top, right, bottom, left	시계방향
==> 값을 하나만 넣으면 모든 방향의 여백에 적용
==> 두개 넣으면 top과 bottom에 적용
==> padding에도 똑같이 적용됨
====> 바깥 여백에는 음수 값도 지정 가능, 화면에서 사라지거나 다른 태그와 겹치게도 가능

## 물론, 아래와 같이도 가능함
p {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

• padding(안쪽 여백) : border을 기준으로 박스 내부 여백 지정, 값의 순서 및 적용값은 margin과 동일

---

• 박스를 벗어나는 콘텐츠 처리? :

## 예시1) 'overflow'속성으로 스크롤 생성
p {
  height: 40px;
  overflow: auto;
}

--> auto 값은 콘텐츠가 넘치는 경우 스크롤 자동 생성

## 예시2) 'overflow' 속성에 'hidden'값으로 넘치는 부분 가리기
p {
  height: 40px;
  overflow: hidden;
}

---

• 박스 크기 측정 기준 : 아래 예제를 확인해보자

## 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;
}

▼ 결과 : 개판이당

▼ 이유는 다음과 같다

==> 결론 : 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃에서 벗어날 수 있다. 여백을 고려해야함!

• 레이아웃을 쉽게하는 방법 : 여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만들기

## 예시) 모든 요소에 속성 추가하기 : *
* {
  box-sizing: border-box;
}

===> 진짜진짜 결론! : 앞으로 레이아웃과 관련된 이야기를 할 때는 border-box 계산법을 기준으로!!

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

🤧 CSS Selector 선택자

• 다양한 Selector 종류

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

* {}

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

h1 { }
div { }

section, h1 { } ## 복수 예시

• ID 셀렉터 : '#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' 요소 바로 아래에 있는 두 개의 'div' 요소는 선택되지만, 'p' 요소의 자식인 'div' 요소는 선택되지 않습니다. (마찬가지로 후손 셀렉터와의 차이를 반드시 알고 있어야 합니다.)

header > div { }

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

• 후손 셀렉터 : 후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택합니다. 아래 예시의 경우 'header' 요소의 자식인 'div' 요소뿐 아니라, 'p' 요소의 자식인 'div' 요소까지 모두 선택됩니다. (자식 셀렉터와의 차이점을 반드시 알고 있어야 합니다.)

header div {}

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

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

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 { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
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 { }

🤧 자기소개 페이지 꾸미기... 실습

▲ 이건 어제 html으로만 만든 페이지...

▲ 이건 css 씌운 페이지... 인데 너무 허접해서..

▲ 마치 이 짤과 같다. ㅋㅋ ㅠㅠ;; 쏘 쌔드

🤧 3일차 공부를 마치며...

떼흐잉. 박스모델, 셀렉터 부분 복습이 팔요하다. 저녁에 실습을 좀 더 해봐야겠음!! 이제 3일차인데 쩜 어려운걸? 클났땅!