2. CSS

2. CSS : 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어.

예제 URL : https://codesandbox.io/s/html-cssgico-rur0eq

 

Index.html : HTML의 내용 (웹 페이지의 구조와 내용)

 

Index.css : HTML 내용의 배경 색상과 내용 위치

 

Layout css : HTML 내용의 화면을 재배치

 

<link />: HTML파일과 다른 파일을 연결하는 목적으로 사용.

<link> 태그의 rel =은 연결하고자 하는 파일의 역할이나 특징을 나타냄.

 

CSS는 이름처럼 기본적으로 stylesheet 이므로, rel속성에 stylesheet을 추가한다.

Href= 속성에는 파일의 위치를 추가한다.

만일 다른 폴더에 파일이 존재할 경우, 절대 경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결한다.

 

[Selector] : 특정 태그의 이름, id, class를 선택한다는 의미.

특정 요소를 선택한 이후에는, 이어지는 선언 블록 (중괄호) 안에서 해당 요소에 적용할 내용을 작성.

요소에 적용할 수 있는 내용을 우리는 속성이라고 부르고, 속성명(property name)과 속성값(property value)을

사용하여 속성을 변경할 수 있다. Ex) 색상, 글씨체, 글자 크기.

 

[CSS를 별도로 분리하지 않고, HTML에 직접 CSS속성 추가]

관심사분리 측면에서 권장되지 않는다.

관심사분리 : HTML은 웹 페이지의 구조와 내용만 담당, CSS는 디자인만 담당하도록 하여 역할을 분리하는 것.

하지만 굳이 구분하지 않아도 될 만큼의 CSS코드가 많지 않은 경우도 있다.

 

이런 특수한 경우를 위해 HTML 요소에 직접 CSS 속성을 추가하는 방법 3가지.

1. 인라인 스타일 : 같은 줄에서 스타일을 적용하는 방법.

2. 내부 스타일 시트 : CSS파일 내에 작성하는 내용을 별도의 파일로 구분하지않고, style 태그 내에 작성하는 법.

3. 외부 스타일 시트 : 관심사분리에 의한 적용법.

 

[기본적인 셀렉터]

 

A. ID로 이름 붙여서 스타일링 적용.

HTML 문서 내에 존재하는 여럿 요소 중 원하는 곳에만 적용하기 위해서는

해당 엘리먼트에 의미를 담아서 구분할 수 있도록 ID를 붙인다.

 

EX) <h4 id="navigation-title">This is the navigation section.</h4>

 

ID로 요소를 선택해 스타일링 한다.

EX) #navigation-title {

  color: red;

}

B. class로 스타일을 분류하여 적용하기

ID와 유사하게 특정 요소에 CLASS를 지정하는 방법.

Class를 적용할 때는 #이 아닌 .을 이용해야 한다.

 

Id vs class 차이 정리

id	class
#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용 고유한 이름을 붙일 때 (Only One object)	스타일의 분류에 사용 반복되는 영역을 유형별로 분류할 때

 

[텍스트 꾸미기]

A.색상

글자의 색상을 변경하는 속성은 color입니다. 속성에 삽입할 수 있는 값은, HEX(16진수, RGB 표현된 값).

배경 색상이나 이후에 나올 박스 테두리 색상을 적용할 수도 있습니다.

 

B.글꼴

글꼴의 속성은 font-family. 글꼴의 이름은 따옴표를 붙여서 적용할 수 있다.

사용하려는 글꼴이 없는 경우를 대비하여 fallback 글꼴을 추가할 수 있다. 쉼표로 구분하여 입력 가능.

 

글꼴 reference URL : https://fonts.google.com/

 

C.크기

글자의 크기를 변경하기 위해서는 font-size 속성을 사용한다.

글꼴의 크기에서는 단위가 무엇보다 중요함. 절대 단위와 상대 단위, 두 가지로 구분할 수 있다.

[C-1] 픽셀(PX) : 기기나 브라우저 사이즈 당의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우.

글꼴의 크기를 고정하는 단위, 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리함.

[C-2] REM : 사용자가 설정한 기본 글꼴의 크기를 따르므로 접근성에 유리함.

브라우저 기본 글자 크기 : 1rem, 두배 2rem, 작게 0.8rem.

 

D. 기타 스타일링

 

[1] 굵기 : font-weight

[2] 밑줄,가로줄 : text-decoration

[3] 자간 : letter-spacing

[4] 행간 : line-height

 

E. 정렬

가로로 정렬할 경우 text-align을 사용한다. 유효 값 : left, right, center, justify(양쪽 정렬)

세로의 경우 복잡. Vertical-align이 있지만 이는 부모 요소의 display 속성이 반드시 table-cell 이어야 한다.

또한 글자를 둘러싸고 있는 박스의 높이가 글자 높이보다 큰 경우에만 적용할 수 있다. 박스 모델 참고

 

 

[박스 모델]

하나의 웹 페이지 내의 모든 콘텐츠는 고유의 영역을 가지고 있다.

해당 영역은 항상 직사각형으로 이루어져 있기 때문에박스(box) 라고 부르며

높이와 넓이, 테두리와 여백등 다양한 속성을 가지고 있다.

모든 콘텐츠는 고유의 영역이 있고, 콘텐츠로 묶이는 엘리멘트들이 하나의 박스가 된다.

박스는 항상 직사각형이고 너비(width)와 높이(height)를 가진다. CSS를 이용해 속성과 값으로 그 크기를 설정한다.

 

[ 줄바꿈이 되는 박스(block) vs 옆으로 붙는 박스 (inline, inline-block) ]

줄바꿈이 되는 태그 block 박스 : <h1>, <p>, <div>

줄바꿈이 되지 않는 태그 inline 박스 : <span>

 

[박스의 구성 요소]

CSS 박스 모델은 Border(테두리)를 기준으로 padding(안쪽여백)과 margin(바깥여백).

 

[border(테두리)]

테두리는 심미적인 용도 외에도, 개발 과정에서 매우 의미있게 사용됨.

각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듬.

 

테두리 두께 : border-width

테두리 스타일 : border-style

테두리 색상 : border-color

 

[margin(바깥 여백)] :

ex) margin : 10px, 20px, 30px, 40px // top, right, bottom, left. (시계 방향)

값을 두 개만 넣으면 top, bottm / left,right.. 값을 하나만 넣으면 모든 방향의 바깥 여백.

이와 같은 규칙은 padding(안쪽 여백)에도 동일하게 적용.

음수 값의 경우 다른 요소와의 간격이 줄어듬.

 

[padding(안쪽 여백)] : border를 기준으로 박스 내부의 여백.

 

[박스를 벗어나는 콘텐츠 처리]

박스 크기보다 콘텐츠의 크기가 더 큰 경우에는, 콘텐츠가 박스 바깥으로 빠져나온다.

이런 상황에는 박스 크기에 맞게 콘텐츠를 더 이상 표시하지 않거나, 박스 안에 스크롤을 추가한다.

Ex) overflow: auto; // 스크롤 표시. overflow-x, overflow-y 속성으로 가로, 세로 스크롤 가능.

 

[박스 크기 측정 기준]

처음 레이아웃 디자인을 할 때, 박스에 적용할 여백을 고려하지 않고 디자인하는 경우가 있다.

여백과 테두리 두께를 포함한 박스 계산법. * {} 요소 안에 box-sizing 추가 후 border-box; 값을 추가

 

이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.

Content-box는 박스의 크기를 측정하는 기본법. 하지만 border-box를 권장한다.