[Day 6] CSS 기초 :: FE 역량, CSS 상대단위, Selector 등

Selector 헷갈려!

오늘의 주제는 Css 기초. Css 는 그래도 조금 안다고 생각했는데, 모르고 있던 부분이 상당히 많았다. 예를 들면 Css 에서 사용하는 각 단위의 의미와 용도, box-sizing 을 왜 사용하는지, 다양한 Selector 의 종류 등. Selector 연습문제가 있었는데 어렵다기보다는 너~무 헷갈려서 많이 틀렸다. 그게 어려운건가? 어쨌든 ㅋㅋ 

내일부터는 계산기 목업 제작을 페어분과 같이 진행하는 시간이 있기 때문에! 누가 되지 않도록 모르는 부분은 꼼꼼히 공부하려고 노력했다.

오늘 컨디션은 어제보다는 조금 나은데, 아침에 늦잠을 자는 바람에 수영을 가지 못했다. 이렇게 운동을 계속 못하면 건강이 안좋아질텐데... 앞으로는 낮시간을 더 압축적으로 활용해서 늦어도 11시 30분 이전에는 꼭! 잘 수 있도록 노력해야지! 

오늘 배운 내용

Css 란 무엇인가? 

• 웹페이지의 스타일 및 레이아웃을 정의하는 스타일 시트 언어. 
• Html에 더 나은 사용자 경험을 제공할 목적으로 사용한다. 

• 사용자 인터페이스 (User Interface : UI) 란?
  • 인터페이스 : 컴퓨터와 교류하기 위한 연결고리. 
  • 사용자와 프로그램이 교류하기 위한 연결고리이며, 사용자 경험은 UX (User Experience)
• 직관적이고 쉬운 UI 제작, 이를 통한 좋은 사용자 경험 제공은 FE 개발자의 기본 소양이다.
• 다음은 이를 위해 FE 개발자가 가져야 할 역량이다.
  • 컴포넌트의 기능별 제작
  • 화면 구성 및 배치 (레이아웃)
  • 타이포, 색상 적용
  • 정렬, 배색에 대한 감각 및 좋은 UX에 대한 고민, 잘 적용된 웹/앱 분석능력
• 프로젝트의 규모가 커질수록, Css의 적용이 복잡하고 어려워진다. 
  • 관심사 분리 : 구별된 부분으로 분리시키는 디자인 원칙이다. 다음과 같은 장점이 있다.
    • 코드 단순화, 높은 유지보수성, 모듈 재사용의 자유로움 / 추상화
  • 아주 적은 Css 를 추가하는 등의 특수 경우를 제외하면, 별도의 css 파일로 구분하여 재사용 하는 것이 좋다. 
    • 예를 들면, 컴포넌트별 css 분리, 용도별 분리 (스타일 css, 레이아웃 css 등) 

em & rem

• css 에서 사용되는 길이단위에는 절대단위와 상대단위가 있으며, 상대 단위란 말그대로 어떤 기준에 따라 유동적으로 바뀔 수 있는 단위를 의미함.
• 상대 단위의 종류 : em, rem, vh, vw, % 등이 있다.
• em과 rem : css 의 font-size 속성 값에 비례하여 결정되는 상대단위이다.

font-size : 16px

0.5em = 16px * 0.5 = 8px
1em = 16px * 1 = 16px
2em = 16px * 2 = 32px

• em 과 rem 의 차이점 : 어디에 적용된 font-size 속성을 참조하느냐 여부에 따라 나뉜다. 
• em의 경우 em 단위가 적용되고 있는 바로 그 해당요소, 그 요소에 font-size 속성이 없을 경우에는 그 부모 요소까지 찾아가 font-size 속성을 참조한다.
• rem의 경우, r = root 즉 최상위 요소의 font-size를 기준값으로 한다.

body { font-size : 16px }

div1 { font-size : 10px, margin : 1em } /* 1em = 10px */
div2 { font-size : 14px, margin : 1rem } /* 1rem = 16px */

• em을 사용할 경우에는 각 요소마다 적용되는 값이 달라 예측하기 힘들기 때문에, 특수한 경우를 제외하고는 rem을 사용하는 것을 권장한다. 

vw & vh 그리고 %

• vw 와 vh 는 각각 viewport width, viewport height 라는 의미이다. 말그대로 현재 실행중인 viewport(스크린) 길이에 맞춰 상대적인 길이를 반환하겠다는 의미이다. 
• 상대적인 길이라는 점에서 % 단위와 공통점이 있었는데, 어느 부분에서 차이점이 있는지 궁금해서 찾아보았다. 차이점은 다음과 같다.
  • vw, vh 는 각각 height, width 속성에도 쓸 수 있다. (vw 라고 해서 width 속성에만 적용되는 단위가 아니라는 의미이다.) 예를들어 width의 크기를 40vh 라고 한다면, width를 현재 실행중인 스크린 창의 40/100 에 맞춘다는 의미.
  • 또 vh, vw 는 열린 창의 사이즈를 참조한 상대길이(스크롤바 포함) 이지만, %는 % 단위를 적용할 요소의 부모요소의 길이를 참조한다는 점이 차이점이다.
  • 참고 ) body 태그에서의 %는 html이 차지하는 모든 영역 (스크롤 하면 보이게 될 모든 영역)에 대한 상대 비율이다. (부모요소의 길이를 참조하기 때문에.) 

언제 어떤 단위를 사용하면 좋을까?

• 글꼴 사이즈를 정할 때 
  • 기기 or 브라우저의 사이즈에 영향을 받지 않는다면 px을 사용한다. 고정된 크기이기 대문에 사용자 접근성에 있어서 불리하고, 인쇄와 같이 크기가 정해져 있는 경우에 유용하다.
  • 일반적인 경우 : rem 사용. 위에서 서술한 바와 같이 em은 크기 예측이 힘들기 때문에 rem 사용을 권장한다.
• 화면 사이즈를 정할 때
  • 반응형 웹에서 기준점을 만들 때 : 디바이스의 크기를 나누는 기준은 주로 px 이다. 디바이스 화면의 너비에 따라 유동적인 레이아웃을 만들 수 있다. 
  • 화면 너비와 높이에 따른 상대적 크기가 중요할 때 : vw, vh 단위를 사용한다. 

Css Box

• block, inline-block, inline의 차이

	block	inline-block	inline
줄바꿈 여부	O	X	X
기본 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
widht, height 속성 사용가능 여부	O	O	X

• content-box 에서의 너비는 content-box의 width + padding + border 를 각각 계산하지만, border-box에서는 여백과 테두리를 포함하여 계산한다. 따라서 Css 에 다음과 같은 속성을 추가해야한다.

*{
box-sizing : border-box;
}

Css Selector

• Css 에는 기본 선택자(selector) 이외에도 자식/후손/형제 선택자, 가상클래스 선택자, UI 요소 상태 선택자 등 다양한 종류가 있다. 아래 내용은 그 종류를 간략하게 정리한 코드이다.

/* 전체 셀렉터 */
* { }

/* attribute 셀렉터 */
a[href] { }

/* 자식 셀렉터 */
header > p { }

/* 후손 셀렉터 */
header p {}

/* 형제 셀렉터 */
section ~ p { }

/* 인접 형제 셀렉터 */
section + p { }

/* UI요소 상태 셀렉터 */
input:checked + span { } /*체크 상태일 때 선택 */

/* 구조 가상 클래스 셀렉터 */
section > p:nth-child(2n+1) { } /*section의 자식 요소 p 중 홀수 번째 요소만 선택 */

/* 부정 셀렉터 */
input:not([type="password"]) { }

/* 정합성 확인 셀렉터 */
input[type="text"]:valid { }