9. 범위 지정, id 중복, form 꾸미기, 선택자, 박스 모델

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

---

▲예제 01. CSS 활용, style 태그 범위 지정 

 - style 태그 작성 중 범위 지정할 때 한 칸 띄우면 하위 항목에서, 붙이면 해당 태그 중에서를 의미한다.

 - class는 .을 붙인다.

 - 같은 라인에 있을 때 여러 개를 지정할 경우 , 로 구분한다.

 

 

▲예제 02. id 중복

 - CSS에서는 id가 중복되도 문제가 없지만, 자바스크립트에서는 문제가 생긴다.

 - id는 중복되지 않는 것을 권장한다.

▲문제 01. 예시 보고 따라 만들어보기

 

▲예제 03. form 태그 꾸미기

 - 속성 선택자는 []로 묶는다.

 - # : id 선택자, 태그[속성], .클래스

 

 

▲예제 04. 후손 선택자, 자손 선택자

 - 한 칸 띄는 것은 후손 선택자

 - 꺽쇠는 자손 선택자

 

 

▲예제 05. 동위 선택자

 - 생긴 것이 틀려도 라인이 같으면 형제이다.

 - +는 밑에 동생 딱 한 명, ~는 나 포함 밑에 동생 전부를 지정한다.

 

 

▲예제 06.  박스 모델, 반응 선택자

 - 박스 모델에는 padding, border, margin이 있고 각각 안쪽 여백, 경계선, 바깥 여백을 의미한다.

 - hover는 커서를 위에 올려놨을 때 반응하는 반응 연산자이다.

 - active는 클릭했을 때 반응하는 반응 연산자이다.