CSS

CSS는 HTML로 작성된 웹 애플리케이션의 구조에 디자인을 적용하는데 사용된다.

 

 

CSS의 기본 문법 구성은 다음과 같다.

CSS 기본 문법 구성

(출처 : https://www.nextree.co.kr/p8468/)

 

셀렉터로 특정 태그의 이름, id, 또는 class를 선택하고,

거기에 속성과 속성값을 부여하는 기본적인 문법 구성이다.

 

 

CSS를 적용할 수 있는 방법에는 3가지가 있다.

• 인라인 스타일
• 내부 스타일 시트
• 외부 스타일 시트

이 3가지 방법에 대한 설명은 https://firerope.tistory.com/3를 참고하면 쉽게 이해가 될 것이다.

 

3가지의 방법 중에 관심사 분리 측면에서 외부 스타일 시트를 권장한다.

 

 

기본적인 셀렉터의 사용법에 대해 알아보자.

• id로 이름 붙여서 스타일링 적용

#[id 이름] {
   color: red;
}

 

• class로 스타일을 분류하여 적용

.[class 이름] {
     text-decoration: underline;
}

 

 

id와 class 차이는 다음과 같다.

id	class
# 으로 선택한다.	. 으로 선택한다.
한 문서에 단 하나의 요소에만 적용한다.	동일한 값을 갖는 요소가 많다.
특정 요소에 이름을 붙이는 데 사용한다.	스타일의 분류에 사용한다.

 

하나의 요소에만 적용하면 id, 다수에는 class 정도로 생각하면 될 것 같다.

 

 

여러 요소에 하나의 class를 적용하는 것이 아닌,

하나의 요소에 여러 class를 적용하는 방법이 있다.

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

menu-item이라는 클래스와 selected라는 클래스가 사이에 공백을 두고 함께 들어가있다.

 

 

다음은 텍스트를 꾸미는 속성들이다.

• color : 글자 색상 변경
• font-family : 글꼴 속성
• font-weight : 글꼴 굵기
• text-decoration : 밑줄, 가로줄
• letter-spacing : 자간
• line-height : 행간

 

 

하나의 웹 페이지 내의 모든 컨텐츠는 고유의 영역을 가지고 있다. 이를 'box' 라고 부른다.

박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가진다.

 

박스의 종류는 줄바꿈이 되는 박스(block)와 줄바꿈 없이 옆으로 붙는 박스(inline, inline-block)로 구분할 수 있다.

 

display: 속성을 통해 박스의 종류를 바꿀 수 있다.

display: block;
display: inline-block;
display: inline;

 

각 종류의 특징을 알아보자.

 

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

 

 

박스의 구성요소에 대해 알아보자.

박스의 구성 요소

(출처 : https://deliciouslearning.tistory.com/411)

 

 

margin(바깥 여백)의 설정 방법에 대해 다음과 같이 사용할 수 있다.

p {
  margin: 10px 20px 30px 40px;
 }
 
 // 픽셀 값 순서 : 위, 오른쪽, 아래, 왼쪽

 

p {
  margin: 10px 20px;
 }
 
 // 픽셀 값 순서 : (위+아래) (왼쪽,오른쪽)

p {
  margin: 10px;
 }
 
 // 픽셀 값 : 전체

padding(안쪽 여백)도 설정 방법은 마찬가지이다.

 

border(테두리)의 설정 방법은 조금 까다롭다.

p {
   border: 1px solid red;
 }
 
 // 적용된 값은 각각
 // 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)이다.

 

 

웹 페이지에 박스를 구현할 때, 겹쳐지거나 보이지 않는 부분이 생기면 곤란하다.

그래서, 박스 크기의 측정은 중요하고, 그 측정 기준이 매우 중요하다.

박스 크기 측정 기준

 

(출처 : https://velog.io/@inssg/DAY-02-HTML-CSS)

 

측정 기준은 content-box와 border-box로 나눌 수 있고, 기본값은 content-box 기준을 따른다.

 

쉽게 말해서, context-box 측정법은 박스의 사이즈가 오롯이 컨텐츠 영역에만 적용이 되는 것이고,

border-box 측정법은 박스의 사이즈에 모든 여백 및 테두리를 포함한 것이다.

그림에서 width는 박스의 사이즈이고, content-box시에는 그 사이즈가 온전히 content에만 적용된다.
padding과 margin 크기는 따로 더해준다.
border-box시에는 모든 걸 포함한 사이즈가 width 사이즈인 것을 확인할 수 있다.