CSS 속성

CSS 스타일 적용법 3가지

1. 인라인 스타일 : 태그안에 스타일 속성, 후에 CSS 속성적용

ex)

<p style="background: 'red'; color: 'black'"></p>

2. 내부 스타일 시트 : CSS 파일 x, style 태그 내에서 작성함

<style>
#id이름{background: 'red'; color: 'black'}
.class이름{background: 'red'; color: 'black'}
</style>
<p>Hello World</p>

3. 외부 스타일 시트
   : CSS 파일을 만들어 CSS 셀렉터로 style 적용

<link rel="stylesheet" href="css파일이름">

스타일 적용 우선 순위
속성값 > 인라인 스타일 > 내부 스타일 > 외부 스타일 > 브라우저 기본값
: html에서 가장 가깝게 직접적으로 style을 주는 순서라고 생각하면 편할 듯하다.

<li className='menu-item selected'>Home</li>

.selected{
 font-weight: bold;
 color: #009999;
}

--> 이렇게 클래스 따로 선택해서 사용가능

CSS 속성소개

color : 글자색상

background-color: 배경색상

border-color: 테두리색상

font-family: 글꼴

https://d2.naver.com/helloworld/4969726

font-size: 글자의 크기

border: 1px solid red; // 1px의 빨간색 실선 추가

width: 80%; // (폭)

height: 200px // (높이, 위아래 길이)

알아야 할 몇가지 단위

절대 단위 : px, pt

상대 단위: %, em, rem, ch, vw, vh 등

**

줄바꿈이 되는 박스(block): <h1>, <p>, <br>,<div> 등등..

: 줄바꿈이 일어남, 기본적으로 갖는 너비(width) 100%, width, height 사용가능

옆으로 붙는 박스(inline, inline-block): 등등..

(기본적으로 inline, inline-block 둘다 줄바꿈이 일어나지 않고, 기본적으로 갖는 너비(width)는 ‘글자가 차지하는 만큼’이다)

inline과 inline-block과 조금 다르다.

inline은 width, height 사용 불가능

inline-block inline은 width, height 사용 가능

---

박스를 구성하는 요소

Margin (바깥 여백)	// 주황색

	Border (테두리)	// 노란색

			Padding(안쪽 여백)	// 초록색

				

				Content	// 파란색

				

			Padding(안쪽 여백)

	Border (테두리)

Margin(바깥 여백)

**

// margin

p{

	// 예시임

	margin: 10px 20px 30px 40px;	// p 태그의 top, right, bottom, left에 여백을 추가

											// 각 값의 속성적용(상, 우, 하, 좌)위에서 부터 시계방향



	margin: 10px 20px;	// p태그의 위아래, 좌우에 각각 여백을 추가



	margin: 10px			//	p태그의 모든 방향에 각각 여백을 추가

	

	

	// 다음과 같이 각각의 방향을 속석으로도 적용가능

	margin-top: 10px;

	margin-right: 20px;

	margin-bottom: 30px;

	margin-left: 40px;



	// margin, 바깥여백만 오로직 음수값을 줘서 다른 엘리먼트와 간격이 줄어들도록 할 수 	// 있다. 극단적으로는 화면(viewport)에서 사라지게 하거나, 다른 엘리먼트와 겹치게 만	// 들 수도 있다.

	margin-top: -2rem;


}