CSS6 화면 정가운데 div 배치 1 2 3 4 5 6 7 8 9 10 11 div { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); } Colored by Color Scripter cs 가운데 배치? 그거 left:50%, top: 50%두면 되는거 아니냐? 하고 덤볐다가 막상해보니 멘붕이 왔다. css를 보면 상위, 좌측 50%로 화면 비율을 잡는다. 위치는 고정되어야하니 absolute로. transform : translate(-50%, -50%); 를 사용하면 요소를 중앙으로 모은다. 구글링해서 나오는px, -margin 지정하는것보다 반응형으로 잘 작동하는것같다. 눈으로 보면 비슷한데 깐깐한 평가에 대차게 까일 수 .. 2020. 3. 8. 하위 엘리멘트에 float 속성을 주었을때 Float 속성을 사용하여 배치를 하게되면 주위에 엘리먼트에도 영향을 끼치게된다. 1 2 3 4 5 6 하나 둘 셋 cs 여기에 1 2 3 4 5 6 7 8 .container > div { background-color: black; width: 100px; height: 100px; margin: 0.5rem; color: #fff; float: left; } Colored by Color Scripter cs float 속성으로 left를 주었다면 상위 엘리먼트에는 overflow : hidden 혹은 auto를 주어야한다. 1 2 3 4 5 6 7 8 .container { background-color: goldenrod; padding: 10px; width: 400px; height: 200.. 2020. 1. 12. nth-of-type CSS 간단한 연습을 하고있었다. 1 2 3 4 5 6 7 단락 선택 하나 둘 셋 얏! cs 문제는 간단했다. p 태그 두번째것에 빨간색을 주는것이다. 절대 틀릴 수 없다는 자신감으로 div > p:nth-child(2) { color : red; } 를 썼다. p를 잡고 자식을 걸었으니깐 둘에 색이 칠해져야하는거 아닐까? 라는 기대와는 다르게 하나에 색이 칠해졌다. 정답은 div > p:nth-of-type(2) { color: red; } 이다. 좀더 살펴보면 https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child :nth-child CSS 의사 클래스 :nth-child(an+b)은 0 이상의 n에 대해서 도큐먼트 트리에서 자기 앞에 an+b-1 개의 .. 2020. 1. 12. Material Design Lite - 1 (아이콘) Material Design은 구글이 발표한 디자인가이드이다. 개발시 사용되는 전체적인 스타일 포함해서 세부적인 디자인을 포함하고있다. 안드로이드 개발을 해보았다면 더욱 친숙할 것이다. Matrial Design Lite는 이 Material Design을 웹에서도 느낄 수 있게 만든 것이다. 이분야는 Bootstrap 영향력이 크지만, 안드 개발에서 느꼈던 감성을 웹에서도 느껴보고 싶어 공부하게 되었다. https://getmdl.io/started/index.html Material Design Lite Material Design Lite is built to provide a lightweight and basic set of Material Design components and template.. 2019. 11. 10. 이전 1 2 다음
