css 적용 방식

in-line : 속성을 적용할 HTML 태그에 직접 CSS를 입력해주는 방식

장점 : 적용하기 쉬움

단점 : 유지보수가 어려워 실무에서 사용하지 않음.

style 태그 : html 파일에 style 태그에 작성하는 방식

장점 : 파일이 분리되어있지 않아 유지보수를 할 때 간편한 편

단점 : css의 양이 많아지면 비효율적임

분리된 css파일 연결 : HTML파일과 css 파일을 따로 만든 뒤 link태그를 이용해 연결해주는 방식

장점 : 파일을 분리해서 작성하기 때문에 유지보수가 쉽고, 실무에서 가장 많이 활용함.

<link rel="stylesheet" href="./index.css">

선택자

태그선택자 : 해당되는 모든 태그를 선택하는 선택자

html {
	
}

id선택자 : id는 고유한 이름으로 지목된 태그를 선택하는 선택자

#name{

}

class선택자 : class는 중복이 지정하며, 해당 클래스인 태그를 선택하는 선택자

.contents{

}

자손 선택자 : 동일한 class에서 특정 class를 선택할 수 있음.

지목하고싶은 태그의 상위 태그의 class를 선택해준 지목할 클래스를 선택해주면 원하는 class를 지목함.

<aside> 💡 구조 : .부모클래스 .자손클래스 {} 부모 자시간의 공백 필수

</aside>

<body>
	<h1 class="title">전체 제목</h1>
	<div class="box1">
		<h1 class="title">전체 제목</h1> <!-- 선택됨 -->
	</div>
</body>

.box1 .title {
	
}

다중 선택자 : 원하는 태그를 선택하고 싶을 때 사용함.

태그의 클래스와 아이디를 모두 만족하는 태그만 선택됨.

<aside> 💡 구조 : .클래스.아이디 {} 공백x

</aside>

font 속성

font-size : 폰트 크기 옵션 font-style : 폰트 스타일 옵션 text-decoration : 폰트 선 옵션 font-weight : 폰트 굵기 옵션

박스모델 : 웹브라우저에서 HTML Element를 구성할 때 각각의 요소가 차지하는 박스 공간을 정의한 모델

모든 요소는 박스 형태로 되어있음

Untitled

content-box(기본값) : Content영역을 기준으로 box의 size를 적용함(padding, border, margin 시 Content의 사이즈는 변하지 않고 외부 영역으로 늘어남)

border-box : border 영역을 기준으로 box의 size를 저굥(padding시 border 를 기준으로 Content의 사이즈가 줄어든다.)

block : 좌/우 양쪽으로 늘어나 부모 요소의 너비를 가득 채움(줄 자동으로 넘어감)

inline : 태그에 할당된 공간 만큼의 너비만 차지함(사이즈 지정 불가 / 줄 자동으로 넘어가지 않음)

Untitled