CSS

Cascading Style Sheets

---

• 결국 Selector와 Property를 공부하는 것이 전부
  • Selector
    1. 일반 태그 : element 선택자
    2. class : .~ → 다수를 그룹핑하여 구분짓는 태그
    3. id : #~ → 1개를 구분짓는 태그
    4. id > class > 일반 순으로 우선순위
• caniuse.com

: html의 문법이면서 동시에 이 태그 안쪽의 내용은 CSS 언어의 문법에 맞게 처리하라는 뜻

1. 선택자 O 
<style>
  a { // a {~} : '선택자(Selector)'
		color:red; // 'declaration'(color : property / red : value)
	}
</style>

2. 선택자 X
<a href="~~" style="color:red"> // style은 html의 속성이며, style안으로 CSS 설명이 들어온다.

<style>
.saw { // class가 saw인 태그를 가리키는 명령어
	color:gray;
}
#active {
	color:red;
}
</style>

<a href="~" class="saw">~~</a>
<a href="~" class="saw">~~</a>
<a href="~" class="saw" id="active">~~</a>

• id 선택자와 class 선택자중에는 id선택자가 우선순위이다.
• class 선택자는 태그 선택자보다 우위이다.

element는 block level element, inline element로 나눠진다.

1. block level : ex) h1같은 제목태그는 블록 단위로 부피를 차지한다.
2. inline : ex) a 태그 같은 것들은 자신의 글 만큼의 부피를 차지한다.
3. display의 기본 속성이다. → block이나 inline으로 조절 가능

h1{
	display : inline // 원래 block인데 inline으로 바꾼 경우
}

a{
	display : block // 원래 inline인데 block으로 바꾼 경우
}

h1 {
	border-width:5px;
	border-color:red;
	border-style:solid;
	border:5
}
a {
	border-width:5px;
	border-color:red;
	border-style:solid;
	border:5
}
--------------------
h1, a {
	border:5px solid red; // 위와 같다.
}

• 박스모델 (검색어 : css box model)
  • content → padding → border → margin 순으로 둘러싸임.
  • 개발자도구에서 elements창 → Styles 를 보면 CSS 코드를 볼 수 있다.
• Grid
  • : block level division을 위한 용도로 쓰는 무색무취 태그 - 공간을 차지 → 줄바꿈이 되는 태그
  • : inline level division을 위한 … - 줄바꿈이 안되는 태그
• 선택자 추가정보

  #grid ol { // grid 안의 ol을 지정하는 선택자.
  	~
  }
  
  <div id="grid">
  	<ol>
  	...
  	</ol>
  </div>
  <ol> ~ </ol>

• 반응형 웹디자인(Media Query)

  <style>
  	div{
  		~
  	}
  	@media(max-width:800px) { // 800픽셀 이상부터는 display가 none!
  		div{
  			display:none;
  		}
  	}
  </style>

• CSS 코드를 개별 파일로 저장함으로서 재사용성을 높인다.
  • 캐시라는 기능을 통해 파일이 별도로 바뀌지 않는 한 CSS 파일은 로컬 컴퓨터에 저장되어 효율이 매우 높아진다.