CCS 다루기 | Notion

스타일(style)

HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킴

반응형 웹 디자인

사용자가 PC로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔 주는 방법

스타일 규칙

<p> 태그에 스타일 적용

/* CSS
주석입니다. */
p {   /* 선택자 */
	text-align: center;   /* 텍스트 정렬 속성: 값 */
	color: blue;   /* 글자색 속성: 값 */
}

css 코드 경량화 툴

cssminifier.com

스타일 시트

스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것
브라우저 기본 스타일
- 웹 브라우저에 기본으로 만들어져 있음
제작자 스타일
- 사이트 제작자가 만듦
- 인라인 스타일
  - 간단한 스타일 정보를 적용
- 내부 스타일 시트
  - 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것
  - 모든 스타일 정보는 <head> 태그 안에서 정의
- 외부 스타일 시트
  - .css라는 파일 확장자를 사용해 따로 저장해 놓은 스타일 정보
  - <link> 태그를 이용해 연결

<!-- 인라인 스타일 -->
<p style="color: blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</P>

<!-- 내부 스타일 시트 -->
<head>
	<style>
		h1 {
			padding: 10px;
			background-color: #222;
			color: #fff;
		}
	</style>
</head>

<!-- 외부 스타일 시트 -->
<!-- style.css -->
h1 {
	padding: 10px;
	background-color: #222;
	color: #fff;
}
<!-- stylesheet-2.html -->
<head>
	<link rel="stylesheet" href="style.css 경로">