13. nth-child 활용, background image, display, visibility, opacity

https://github.com/upcake/Class_Examples

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

---

▲예제 01. nth-child 활용

 

 

▲예제 02. background-image

- background-image: url('이미지 경로.jpg')

 

 

▲예제 03. display

 - display의 속성

① block : 넓이와 높이를 모두 갖는다, 크기 지정 가능(width, height, align, margin 속성 적용 됨)

② inline : 넓이와 높이를 최소 값만 갖는다, width, height 적용 안됨, margin은 div 좌우로만 적용

③ inline-block : 넓이와 높이를 모두 가지면서 인라인 성격을 갖는다.

④ none : 공간 자체를 없앤다.

 

 

▲예제 04. display: none, visibility: hidden

 - display: none은 해당 태그의 모든 요소를 없애지만, visibility: hidden은 영역은 남겨진다.

 

 

▲예제 05. opacity

 - opacity : 배경에 대한 투명도, 0.0 (투명) ~ 1.0 (불투명)

 

 

▲예제 06. 박스모델, inlineblock

 - width와 height는 글자를 감싸는 영역의 크기를 지정한다

 - margin : 바깥 여백, padding : 안쪽 여백

 - margin 겹침 오류 현상 ▶ display: inline-block 으로 해결

① 마진 겹침 현상 : 인접 요소 간 마진의 방향이 겹치면 작은 값을 무시함 

② 더블 마진 현상 : 요소의 마진 방향과 flolat의 방향이 같을 때 마진이 2배로 적용됨 

 

 

문제. 화면 보고 따라 만들기