[css] CSS개요

우유·2022년 9월 8일

[Frontend] css

목록 보기
1/4

기본문법

기본틀 :: 선택자{ 속성: 값; 속성: 값;… }

선택자 : 스타일(CSS)을 적용할 대상(태그)(Selector)
속성 : 스타일의 종류(Property)
: 스타일의 값(Value)

CSS선언 방식 4가지 : 내장 방식, 링크방식, 인라인 방식, @import 방식

내장방식

<style></style>의 내용으로 html태그 내부에 스타일을 작성하는 방식
<style>
	<div>{
		color: red;
	}
</style>

인라인 방식
요소의 style속성에 직접 스타일을 작성하는 방식(선택자 없음) >> 우선순위가 높기때문에 유지보수에 안좋음

<div style=“color: red; margin: 20px;”></div>

링크 방식

<link/>로 위부 CSS문서를 가져와서 연결하는 방식 (병렬 연결)
<link rel=“stylesheet” href=“./css/main.css”>

@import 방식
CSS의 @import 규칙으로 CSS문서 안에서 또 다른 CSS문서를 가져와 연결하는 방식 (직렬연결)
@import url(“경로”); //직렬로 연결할 css코드에서 연결할 css파일의 경로를 입력

profile
Front-end Developer, Cloud Engineer

0개의 댓글