0023. Front-end 공부하기14 - Styling(1) : CSS, selector, layout, flexbox

섹션 15. Styling

1강. CSS와 selector

 

스타일링은 웹사이트 전체 레이아웃 구성을 포함하여 버튼의 색깔, 테두리, 폰트의 크기, 색상 등을 모두 포함하는 개념

 

1) CSS, Cascading Style Sheets

• 스타일링을 위한 일종의 언어
• Cascading : 계단식, 하나의 엘리먼트가 여러 개의 스타일 규칙을 만족할 경우에 해당 스타일들을 마치 계단을 한 칸씩 내려가는 것처럼 우선순위를 가지고 적용되게 만듦
  - 결과적으로, 하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음
• 셀렉터와 실제 스타일로 이뤄져 있음

 

2) Selcector

엘리먼트에 스타일이 적용되는 규칙

선택자 : 스타일을 어떤 엘리먼트에 적용할지를 선택하게 해주는 것

 

CSS의 기본 문법(출처 : soaple)

 

각 선언들을 ; 으로 구분

 

 

3) Selector의 유형

선택자의 유형에 따라 나뉨

 

(1) Element selector

단순하게 특정 HTML 태그를 선택하기 위한 엘리먼트 셀렉터

선택자에 HTML태그의 이름을 써주면 됨

 

 

 

(2) ID selector

HTML에서는 엘리먼트의 ID를 정의할 수 있는데, ID 셀렉터는 이 아이디를 기반으로 선택하는 형태

# 뒤에 아이디를 넣어서 사용

 

위 : ID가 section인 엘리먼트 정의한 HTML 코드, 아래 : 엘리먼트의 배경 색깔을 검은색으로 바꾸는 CSS 속성 (출처 : soaple)

 

 

(3) Class selector

ID는 고유하다는 성질 때문에 하나의 엘리먼트에만 사용해야 하지만, 클래스는 여러 개의 엘리먼트를 분류하기 위해 사용

영어로는 classification이라고 함

점 뒤에 클래스 명을 넣어서 사용

위 : 클래스가 medium인 엘리먼트를 정의한 HTML코드, 아래 : 해당 엘리먼트의 글자 크기 CSS 속성 (출처 : soaple)

 

p.medium : 엘리먼트 셀렉터 + 클래스 셀렉터, 해당 HTML 태그에 클래스가 있는 경우에만 스타일 적용
- HTML 태그명 뒤에 점을 찍고, 클래스 이름을 넣어주면 됨

h1 태그에 class가 medium인 경우에만 스타일 적용 (출처 : soaple)

 

 

(4) Universal selector

보편적인, 특정 엘리먼트에만 적용되는 것이 아니라 전체 엘리먼트에 적용하기 위한 셀렉터

흔히 별표*라고 부르는 에스터리스크를 사용

모든 엘리먼트의 글자 크기를 20px로 하고 글짜 색깔을 파란색으로 하는 css 속성 (출처 : soaple)

 

(5) Grouping selector

여러 선택자를 그룹으로 묶어 하나의 스타일을 적용

위처럼 똑같은 스타일들이 각기 다른 셀렉터로 나눠져있다면 반복적인 것이 여러 곳에 나와서 유지보수도 힘들고 매우 비효율적임

  

Grouping selector를 사용하여 위처럼 바꿔주면 굉장히 간결해지고 유지보수도 용이함

같은 스타일을 여러 조건의 선택자에 적용하고 싶을 때에는 각 선택자를 콤마로 구분하여 그루핑 셀렉터 사용

 

 

(6) Element의 상태와 관련된 selector

상태 : 마우스 커서가 엘리먼트 위에 올라오거나 엘리먼트가 활성화되어 있는 경우 등을 의미

 

• :hover
  - 마우스 커서가 element 위에 올라왔을 때
• :active
  - 주로 <a> 태그(link)에 사용되는데, element가 클릭됐을 때를 의미
• :focus
  - 주로 <input> 태그에서 사용되는데, element가 초점을 갖고 있을 경우를 의미
• :checked
  - radio button이나 checkbox 같은 유형의 <input> 태그가 체크되어 있는 경우를 의미
• :first-child, :last-child
  - 상위 element를 기준으로 각각 첫 번째 child, 마지막 child일 경우를 의미

출처 : soaple

 

<참고. 다양한 css selector>

https://www.w3schools.com/css/css_selectors.asp 

CSS Selectors

https://www.w3schools.com/csSref/css_selectors.asp 

CSS Selectors Reference

 

 

2강. 레이아웃과 관련된 css 속성

1) 레이아웃과 관련된 속성

레이아웃 : 정해진 공간에 가구나 물건들을 어떻게 배치할지를 결정하는 것을 의미

화면에 element들을 어떻게 배치할 것인가?를 의미함

레이아웃과 관련된 CSS 속성들은 화면상의 배치와 관련이 있다고 생각하면 됨

 

(1) display

엘리먼트를 어떻게 표시할지 그 방법에 관한 속성

모든 엘리먼트는 그 종류에 따라서 기본적으로 정해진 디스플레이 속성 값을 갖고 있음

 

출처 : soaple

 

대부분의 엘리먼트는 블록 또는 인라인 값을 가짐

위의 값들이 많이 사용됨

 

display 속성의 대표적인 값들

• display: none;
  - element를 화면에서 숨기기 위해 사용
  - <script> 태그의 display 속성 기본값은 display: none;
• display: block;
  - 블록 단위로 element를 배치
  - <p>, <div>, <h1>~<h6> 태그의 display 속성 기본값이 display: block;
• display: inline;
  - element를 라인 안에 넣는 것
  - <span> 태그의 display 속성 기본값이 display: inline;
• display: flex;
  - element를 블록 레벨의 flex container로 표시
  - container이기 때문에 내부에 다른 element들을 포함.

 

(2) visibility

가시성

엘리먼트를 화면에 보여주거나 감추기 위해 사용하는 속성

 

visibility 속성의 대표적인 값들

• visibility: visible;
  - element를 화면에 보이게 하는 것
• visibility: hidden;
  - 화면에서 안 보이게 감추는 것
  - element를 안 보이게만 하는 것이고, 화면에서의 영역은 그대로 차지

 

(3) position

엘리먼트를 어떻게 위치시킬 것인지 즉, 포지셔닝을 어떻게 할 것인지를 정의하기 위해 사용

 

position 속성의 대표적인 값들

• static
  - 기본값으로 element를 원래의 순서대로 위치시킴
• fixed
  - element를 브라우저 window에 상대적으로 위치시킴
• relative
  - element를 보통의 위치에 상대적으로 위치시킴
• absolute
  - element를 절대 위치에 위치시킴

 

(4) 가로, 세로 길이와 관련된 속성들

 

<추가. CSS 값의 단위>

https://www.w3schools.com/cssref/css_units.asp 

CSS Units

 

 

2) Flexbox

레이아웃에서 가장 많이 쓰이고 중요함

 

 

flexbox는 container와 item으로 나눠짐

컨테이너에 포함되는 엘리먼트들이 바로 flexbox의 flexitem이 된다.

 

 

flex-direction

아이템들이 어떤 방향으로 배치될 것인지를 지정

 

(1) flex-direction 속성의 대표적인 값들

• row
  - 기본값이며 아이템을 행(row)을 따라 가로 순서대로 왼쪽부터 배치
• column
  - 아이템을 열(column)을 따라 세로 순서대로 위쪽부터 배치
• row-reverse
  - 아이템을 행(row)의 역(reverse) 방향으로 오른쪽부터 배치
• column-reverse
  - 아이템을 열(column)의 역(reverse) 방향으로 아래쪽부터 배치.

flex-firection 방향 (출처 : soaple)

두 개의 축 main axis, cross axis (출처 : soaple)

 

align-items

컨테이너 내에서 아이템을 어떻게 정렬할 것인지를 결정

정렬기준 : 크로스 엑시스

 

(2) align-items 속성의 대표적인 값들

• stretch
  - 기본값으로써 아이템을 늘려서(stretch) 컨테이너를 가득 채움
• flex-start
  - cross axis의 시작 지점으로 아이템을 정렬
• center
  - cross axis의 중앙으로 아이템을 정렬
• flex-end
  - cross axis의 끝 지점으로 아이템을 정렬
• baseline
  - 아이템을 baseline 기준으로 정렬

 

align-items (출처 : soaple)

 

 

justify-content

컨테이너 내에서 아이템들을 어떻게 나란히 맞출 것인지를 결정

맞추는 기준은 align items와 반대로 main axis를 기준으로 하게 됨

 

(3) justify-content 속성의 대표적인 값들

• flex-start
  - main axis의 시작 지점으로 아이템을 맞춤
• center
  - main axis의 중앙으로 아이템을 맞춤
• flex-end
  - main axis의 끝 지점으로 아이템을 맞춤
• space-between
  - main axis를 기준으로 첫 아이템은 시작 지점에 맞추고 마지막 아이템은 끝 지점에 맞추며, 중간에 있는 아이템들 사이(between)의 간격(space)이 일정하게 되도록 맞춤
• space-around
  - main axis를 기준으로 각 아이템의 주변(around) 간격(space)을 동일하게 맞춤

justify-content (출처 : soaple)

 

<참고자료 : css의 더 많은 Flexbox 속성>

https://www.w3schools.com/css/css3_flexbox.asp 

CSS Flexbox (Flexible Box)