[HTML&CSS]0810_CSS 속성

1. HTML의 FORM 관련 태그의 속성을 사용하여 서버로 데이터를 전달할 수 있다.
2. CSS 선택자의 종류를 나열할 수 있다.
3. CSS 속성을 사용하여 HTML 요소에 디자인을 적용할 수 있다.

---

 

CSS 선택자

 

• 태그 선택자 : <tagname>
• 클래스 선택자 : .
• 아이디 선택자 : #
• 속성 선택자 : [속성] 또는 [속성=값]
• 하위 선택자 : ‘ ’ (띄어쓰기)
• 자식 선택자 : > 
• 형제 선택자 : ~
• 인접형제 선택자 : +
• 가상 선택자 :  :selected  :checked  :focus  :hover  :nth-child(n)  :nth-of-type(n)'  

 

---

 

클래스 선택자의 특징

 

• 클래스는 중복 사용할 수 있다.

ex) <span class=’title’></span>  <p class=’title’></p>

• 1개의 클래스 속성에 여러개의 값을 입력할 수 있다.

ex) <span class=’title char desc’></span>

• 선택자로 표현 시 여러개의 값을 가지는 클래스는 공백없이 나열한다.

ex) .char.title.desc {   ….   }

 

---

 

CSS 속성

 

• 숨기기 → display: none      /      visibility: hidden   => 카드 짝맞추기 같은 때 사용
• 보이기 → display: block 또는 display: inline-block     visibility: visible
• 투명도 → opacity
• 크기 → width / height
• 외부 여백 → margin (top / right / bottom / left)  (시계방향 / 기본설정 : px)
• 내부 여백 → padding (top / right / bottom / left)
• 테두리 → border / border-radius
• 배경 → background (image / size / repeat / position / attachment 등)

 

 

---