HTML, CSS #2

날림·2021년 8월 27일

2021-08 CSS html

HTML/CSS

목록 보기

2/6

CSS (Cascading Style Sheets)

HTML과 같은 마크업 언어가 표현되는 방법을 결정
구조의 외부와 내부를 꾸미는 역할
내용을 어떻게 배치하고 표현하냐에 따라 더 나은 경험(UX, User expirience)을 제공할 수 있다

내용을 적당한 위치에 놓는 것은
디자이너가 아니라도 할 수 있어야 한다!

CSS의 기본 문법

body {
	color: red;
    	font-size: 30px;
}

선택자 (selector) : body
선언 구역 (declaration block) : { } 안
선언된 내용 (declaration) : "color: red;", "font-size: 30px;"
속성명 (property) : color, font-size
속성값 (value) : red, 30px
;로 선언을 구분

CSS를 HTML에 적용하는 방법

CSS파일을 HTML파일에 연결

<!-- html 파일 내에 다음을 추가 -->
<link rel="stylesheet" href="CSS 파일 주소" />

왜 직접 HTML안에서 꾸미지 않을까?

CSS를 별도의 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가하는 방법도 있습니다. 그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 권장하지 않습니다. 관심사 분리를 여기에 적용하면 HTML 파일에서는 웹 페이지의 구조만 신경쓰고, CSS 파일에서는 디자인만 신경쓸 수 있도록 구현하는 걸 말합니다.

Selector

꾸미기를 원하는 내용을 고르는 방법

tag : 같은 태그면 모두 적용 됨

h4 태그 모두 적용할 때, in CSS

h4 {
  color: red;
}

id : html내 유일한 요소에만 적용할 때

id가 "id"인 곳만 적용할 때, in CSS

#id {
  color: red;
}

class : 같은 기능을 여러 곳에 적용할 때

class가 "class"인 곳에는 모두 적용할 때, in CSS

.class {
  color: red;
}

class는 한 요소가 여러 개 가질 수 있다

in HTML

<div class="class1 class2 class3">div</div>

class 구분은 space

CSS에서 쓰는 단위들

보는 화면에 상관 없이 절대적인 크기
- px (픽셀, pixel)
  - 화면의 크기가 정해진 경우에 유리
일반적인 경우
- rem 추천 (cf. em)
  - 사용자가 설정한 기본 글꼴 크기에 따른다
반응형 웹의 기준점
- 보는 화면이 달라지면 화면 배치도 바뀌는 웹 사이트
  - 화면 크기 기준은 보통 px로 구분
화면 너비나 높이에 따른 상대적인 크기
- vw, vh (viewport width, height)
  - 화면 너비, 높이의 몇 %인지를 나타냄

content 영역 속성

html내 모든 content는 각자 영역을 가진다

직사각형 모양, width * height

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

block 요소 목록 - mdn
inline 요소 목록 - mdn

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능여부	가능	가능	불가능

출처 : codestates

CSS box model

border (테두리)
- 각 영역이 차지하는 크기를 볼 수 있게 만듬
- p {border: 1px solid red;}
margin (바깥 여백)
- border 기준 바깥의 여백
- p {margin: 10px 20px 30px 40px;}
- 순서대로 위, 오른쪽, 아래, 왼쪽
- 값은 1 ~ 4개까지 넣을 수 있다
  - 숫자 위치마다 적용되는 방향이 다름
padding (안쪽 여백)
- border 기준 안쪽의 여백
- p {padding: 10px 20px 30px 40px;}
- margin과 넣는 방식이 같다

content 크기가 box를 넘어가는 경우
- 속성으로 overflow를 넣음
- p { height: 40px; overflow: auto; }
  - 넘칠 때 자동으로 스크롤 생성
- p { height: 40px; overflow: hidden; }
  - 넘치는 부분을 보이지 않게 함