CSS 에 대하여

CSS

• 디자인을 다루는 언어
• 하지만, 디자인이라고 해서 반드시 심미성만을 위한 것은 아니다.
• 레이아웃을 다루거나, 간단한 타이포그래피를 바꾸는 정도는 프론트엔드 개발자라면 해낼 수 있어야한다.
• UI,UX의 문제를 해결하기 위해.
• CSS를 HTML 내부에 작성하는 방법으로 인라인 방식과, 내부 스타일 시트(임베디드) 방식이 있는데, 이는 컴퓨터의 관심사분리에 좋은 방식은 아니다.
• 관심사분리는 컴퓨터가 하나의 프로그램을 처리할 때, 하나의 항목 만을 집중하여 처리할 수 있게 하는 개념이다.
  (HTML 로는 구조만, CSS 로는 스타일만, JS로는 기능만)

CSS 문법의 구성

.selector { // 선택자
	color : red;
	/* 선언(declaration) */
	box-sizing : border-box;
	/* 속성(property) : 속성값(value) */
} /* 위를 포함하는 대괄호를 선언 블록(declaration block)이라고 한다. */

선택자

• CSS 에서 id 는 문서내 단 하나의 요소에만 적용이 가능하며, 중복으로 선택하고 싶은 경우에는 class를 사용해야 한다.
• 하나의 요소에 다수의 class 를 적용하고 싶다면, 띄어쓰기로 구분하여 작성한다.
  → class="class1 class2"
• id 는 #id 로 선택하고, class 는 .class 로 선택한다.
• 다른 선택자들
  → * : 전체 선택자, 내부의 모든 하위요소를 선택한다.
  → 선택자 : 태그 선택자, 아무것도 붙히지 않는다.
  → .선택자 : 클래스 선택자, 앞에 . 을 붙힌다.
  → #선택자 : id 선택자, 앞에 # 을 붙힌다.

글꼴

• font-family 로 지정가능하고, 각 글꼴의 이름을 쉼표로 구분한다.
  → font-family : 글꼴1, 글꼴2
• 여기서 쉼표로 구분된 글꼴은 가장 우선시되는 글꼴이 없을 경우 2순위로 사용될 fallback 을 뜻한다.
• 글꼴의 크기는 인쇄물처럼 고정된 경우 고정 단위인 px을 권장하고, 일반적인 경우 상대단위인 rem 을 권장한다.
  (em의 경우 부모요소의 글씨크기에 따라 변동되기 때문에 계산이 어렵다.)

너비와 높이

• 화면 너비 혹은 높이가 바뀌는 웹사이트의 경우, 보여지는 화면(viewport)을 기준으로 하는 vw, vh 를 권장한다.
• % 는 보이지 않는 html의 영역까지를 포함한다.

박스모델

• 컨텐츠들은 너비와 높이를 가진 직사각형의 구역(박스) 을 가진다.
• 이 구역은 CSS 를 이용하여 너비와 높이를 지정해 줄 수 있다.
• 하지만, 디스플레이 속성에 따라, inline 요소는 너비와 높이를 지정할 수 없다.
  → CSS 를 통해 디스플레이 속성을 block으로 바꿔주면 가능.
• inline-block 은 block 처럼 너비와 높이를 가질 수 있지만, 줄바꿈을 하지 않는다.

박스의 구성

• 박스는 margin, border, padding, content 를 가진다.
• margin → 박스의 외부 여백
• border → 테두리의 두께
• padding → 박스의 내부여백
• content → 내용

여백의 작성법

• margin 과 padding 은 상하좌우 총 4개의 값을 지정해 줄 수 있다.
• 각각 top, bottom, right, left 로 정해 줄 수도 있지만, 단축속성으로 한번에 작성 할 수 있다.
• 단축속성은 4개, 3개, 2개, 1개의 값을 작성 할 수 있는데 각각의 값은 아래와 같다.
  4개 → 상 / 우 / 하 / 좌
  3개 → 상 / 좌우 / 하
  2개 → 상하 / 좌우
  1개 → 상하좌우

.box {
	padding-top : 20px;
	padding-right : 50px;
	padding-bottom : 10px;
	padding-left : 50px; /* 개별속성 */
}

.box {
	padding : 20px 50px 10px 50px; /* top, right, bottom, left */
	padding : 20px 50px 10px; /* top, (left, right), bottom */
	padding : 20px 50px; /* (top, bottom),(left, right) */
	padding : 50px; /* (top, right, bottom, left) */
}

overflow

• 박스가 컨텐츠의 크기보다 작아 밖으로 나오는 경우
• overflow 속성을 이용하여 스크롤을 사용 할 수 있음.
• auto → 스크롤을 사용한다
• hidden → 넘친 내용을 가린다.
• overflow-x, overflow-y 를 통해 원하는 방향만 사용 할 수도 있다.

border

• 박스의 테두리 선을 지정해 줄 수 있다.
• 두께 , 선의 종류 , 색상을 지정할 수 있다.

border : 1px solid black; /* 1px 두께의 검은 실선 */

• 선의 종류로는 dotted, dashed, double 등등 다양한 종류가 있다.

box-sizing

• 박스에서 border, padding 이 증가하면, 박스 그 자체의 크기가 커지게 된다.
• 이 경우 의도한 바와 다른 크기가 나올 가능성이 생긴다.(이걸 일일히 계산하기도 그렇고)
• 이때, box-sizing : border-box 를 사용하면 지정된 너비가 border 와 padding 을 포함한 크기가 된다.

+

• 모든 스타일을 하나의 css 파일에서 처리하는 것 보단, 스타일과 레이아웃을 따로 생각하는 방법도 있다.