패캠 프론트엔드 개발 css (주석, 선언 방식, 내장방식, 링크 방식, 인라인 방식, @import, css선택자, 가상 클래스, 가상 요소, 속성, 스타일 상속, 선택자 우선순위)

1. CSS 기본

기본 문법, 주석

<div>tonyhan</div>

div{
	font-size: 50px
	color: blue;
	text-decoration: underline;
}

• 선택자{속성: 값;} 선택자 : 어디에 적용할지, 태그/id/class 사용가능 속성 : 스타일의 종류 값 : 어떤 속성이 들어갈지

/* 주석 */
color: red;
margin: 20px; 요소 외부 여백

안쪽에 있는 성분이 더 앞으로 나오게 된다.

CSS 선언 방식

• 내장 방식 : 별도의 css 필요없음, css가 많아지면 보기불편. 잘 안씀.

<style>
  div{
	}
</style>

• 링크 방식 : css 우선순위 최우선이고 유지보수 어려워서 잘 안씀 <div style="color: red;"></div>

• 인라인 방식 : 링크로 파일을 가져와서 연결하는 방식. 병렬방식 <link rel="stylesheet" hreft="./css/main.css">

• @import 방식

  

css의 @import 규칙으로 css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식

위와 같은 것은 직렬방식으로 연결되어 있다고 이야기 한다. box.css는 main.css가 연결되기 전까지는 box가 연결되지 않는다. 그래서 연결을 지연시키거나 단절시킬 수 있다. 많이 사용하지 않는다.

CSS 선택자