[CSS] display란? / display 속성 / display 종류 / 🖼
display 속성이란? display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성입니다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하시는게 조금 더 감이 잘 잡히는 것 같습니다! display 속성값의 종류 display 속성값은 4가지 입니다. none block inline inline-block 예제를 보면서 설명하는게 이해가 가장 빠를 것 같습니다. HTML I am none I am block I am inline I am inline-block CSS body div { font-size: large; margin-bottom: 50px; } .none_div { display: none; background-color: bluev..
2020. 1. 14.
[CSS] vh란? / vw란? / what is vh? ❓ / %와의 차이
vh = viewport height vw = viewport width 즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다. 100vh, 100vw 가 전체 화면의 기준이 됩니다. 예를들어, 현재 스크린 크기가 height = 1000px, width = 800px 이라면 1vh = 10px / 1vw = 8px 이 될 것이고 height: 50vh; width: 25vw; 로 설정한다면 height - 500px width - 200px 실제로 이런식으로 적용이 되겠죠! % 와 차이는? 그렇다면 100% 과 100vh 설정하는 것이 무엇이 다르냐 하는 의문이 들 것입니다. 첫번째로는, vh 는 width 에서도 사용이 가능합니다. width: 100% 와 width: 100vh..
2020. 1. 7.
[CSS] display란? / display 속성 / display 종류 / 🖼
display 속성이란? display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성입니다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하시는게 조금 더 감이 잘 잡히는 것 같습니다! display 속성값의 종류 display 속성값은 4가지 입니다. none block inline inline-block 예제를 보면서 설명하는게 이해가 가장 빠를 것 같습니다. HTML I am none I am block I am inline I am inline-block CSS body div { font-size: large; margin-bottom: 50px; } .none_div { display: none; background-color: bluev..
[CSS] vh란? / vw란? / what is vh? ❓ / %와의 차이
vh = viewport height vw = viewport width 즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다. 100vh, 100vw 가 전체 화면의 기준이 됩니다. 예를들어, 현재 스크린 크기가 height = 1000px, width = 800px 이라면 1vh = 10px / 1vw = 8px 이 될 것이고 height: 50vh; width: 25vw; 로 설정한다면 height - 500px width - 200px 실제로 이런식으로 적용이 되겠죠! % 와 차이는? 그렇다면 100% 과 100vh 설정하는 것이 무엇이 다르냐 하는 의문이 들 것입니다. 첫번째로는, vh 는 width 에서도 사용이 가능합니다. width: 100% 와 width: 100vh..