[CS] CSS 기초 Day-6

#### CSS?
HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당합니다. CSS파일을 적용하여 전혀 다른 웹사이트로 탈바꿈할 수 있습니다.

CSS 스타일링

화려함만을 위해 CSS를 사용하는 것이 아닙니다. 콘텐츠의 배치와 위치, 텍스트 강조 및 밑줄 등 사용자 경험(UX, User Experience)를 제공하기 위함입니다. 때로는 색약이나 장애인이 웹페이지를 이용할 때 도움을 줄 수 있습니다.

단순히 디자이너만의 영역이 아닙니다. 콘텐츠를 적당한 위치에 배치하는 건 디자이너가 아니라도 할 수 있어야 합니다.

(UI, User Interface)가 없으면 소용이 없습니다. 아무리 훌륭한 기능을 가지고 있어도 UI가 없으면 소용이 없습니다. 복잡한 내용을 단순하게 만들어 사용자가 한눈에 볼 수 있도록 제안해야합니다.

CSS는 쉽다?

웹 개발자들은 배우기 가장 쉽다? 라고 얘기를 하면서도 가장 어려운 언어 중 하나라고 얘기합니다. 프로젝트 규모가 커질수록 CSS를 의미있게 구성하는 일이 어렵고 복잡해집니다. 상황에 따라 CSS 파일 일부를 변경했더니, 다른 페이지 HTML 요소에 영향을 미치는 상황이 연출됩니다.

CSS 파일 추가

<link rel="stylesheet" href="index.css" />

CSS 파일을 HTML 파일에 연결할 때, link 태그 안에서 href 속성을 통해 연결할 수 있습니다.

CSS를 별로듸 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가하는 방법도 있습니다. 하지만 구분차원에서 권장하지 않습니다.

CSS 스타일 적용의 방법
1. 인라인 스타일
2. CSS 파일 (내부, 외부 스타일 시트 사용)

동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서는 class를 사용합니다.
특정 class에만 요소를 만들거나 스타일링 할 때는 아래와 같이 ex) selected를 추가해 스타일링 할 수 있습니다.

<li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}

CSS 글자의 색상

글자의 색상을 변경하는 속성은 color입니다. HEX값을 사용하거나 주요 색상의 경우 이름을 사용할 수 있습니다. 배경 색상은 물론 테두리 색상도 명령어를 통해 변경할 수 있습니다.

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

CSS 글꼴

글꼴의 속성은 font-family 입니다.
따옴표를 사용하여 적용할 수 있습니다. 디바이스에 따라 지원하지 않을 수 있습니다. 이런 경우를 대비해 fallback 글꼴을 추가할 수 있습니다.

Google Fonts를 통해 다양한 웹 폰트를 쉽게 사용할 수 있습니다.

CSS 글자 크기

글자의 크기를 변경하기 위해서는 font-size 속성을 사용합니다.
글꼴 크기에서는 단위가 제일 중요합니다. 글꼴의 단위는 상대 단위와 절대 단위가 존재합니다.

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

상황에 따른 단위 선택

1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정한 경우
   px(픽셀)을 사용합니다. px는 글꼴의 크기를 고정하는 단위입니다. 글씨의 크기가 고정됩니다. 따라서 사용자의 환경에 따라 일반 텍스트보다 작게 보이는 결과를 초래할 수 있습니다.

특히 모바일 기기처럼 작은 화면이면서 고해상도 사용자에게 적합하지 않을 수 있습니다.

2. 상대 단위인 rem 사용을 권장합니다. 기본 크기는 1rem이며, 두배 크게 하고 싶다면 2rem, 또는 작게 할 때 0.8rem 등으로 조절해서 사용할 수 있습니다. em은 상대적 크기 변경이 어렵기 때문에 rem 을 추천합니다.

3. 반응형 웹에서의 기준점
   스마트폰, 태블릿, PC 환경에 따라 각각 다를 수 있습니다. 따라서 CSS를 달리 적용해야 합니다. 디바이스 기준을 일반적으로 px로 정합니다. 디바이스의 너비(width)와 높이(height)별 실제 보이는 테스트를 해 적절하게 적용할 수 있습니다.

4. 화면의 너비나 높이에 따른 상대적인 크기
   vw, vh를 사용합니다. (vw, viewport width)와 (vh, viewport height)를 뜻합니다.

자주 사용하는 기본 스타일링

1. 굵기 : font-weight
2. 밑줄, 가로줄 : text-decoration
3. 자간 : letter-spacing
4. 행간 : line-height
5. 정렬 : text-align (left, right, center, justify(양쪽 정렬))

박스 모델

박스는 항상 직사각형이고, 너비(width)와 높이(height)로 구성됩니다.

Block 요소는 대표적으로 div, p가 있고, Inline 요소는 span이 있습니다.

Border(테두리)
디자인을 떠나 개발과정에서도 매우 의미있게 사용됩니다. 각 영역이 차지하는 크기를 파악하기위해 레이아웃 크기를 시각적으로 확인할 수 있도록 만들어줍니다.

border-width : 테두리 두께
border-style : 테두리 스타일
border-color : 테두리 색상

margin(바깥 여백)
바깥 여백의 경우 음수값을 지정할 수 있습니다. 음수값 지정 시 다른 엘리먼트와 간격이 줄어듭니다. 다른 엘리먼트와 겹치게 만들 수 있습니다.

padding(안쪽 여백)
박스 내부의 여백을 지정합니다. 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom left 순입니다.
ex)

padding: 10px 20px 30px 40px // top, right, bottom, left

박스보다 큰 컨텐츠

박스의 공간보다 콘텐츠가 클 경우, 콘텐츠는 박스 바깥으로 빠져나옵니다.

해결방법
1. 콘텐츠를 박스보다 작게 만든다. (박스를 크게 만든다.)
2. overflow 속성을 auto로 설정해 콘텐츠가 더 큰 경우 스크롤을 생성해준다. (overflow-x, overflow-y)를 통해 스크롤 가로 세로 가능하게 지정할 수 있다.

레이아웃 디자인 여백, 테두리 설정 시 border-box를 추천드립니다.