simkkong

vw 는 view width 의 약어고, vh는 view height 의 약어다. 화면에 출력되는 전체 가로 세로 크기(비율)을 vw, vh라고 부른다. width를 50vw 라고 지정하면, 화면단의 가로가 50%로 지정된다. vh도 마찬가지다. 반응형처럼, 브라우저 크기를 조절하면, 조절되는 크기만큼 화면 비율을 따라 크기가 조절된다. 패스트캠퍼스 올인원 패키지 글 정리.

em은 %와 다르게, 자기 자신의 폰트사이즈에 영향을 받는다. 위의 container에서는 font-size가 10px로 지정이 되어있다. 폰트 사이즈가 정해진 상태에서 width를 60em으로 지정을 하면, 10 X 60 = 600 이라는 width값을 갖게 된다. 만약 아래와같이, container를 상속받는 parent의 font-size를 2em으로 변경하면 어떻게 될까? (힌트: 자식 요소들은 부모의 값을 다 상속받는다.) 아래와 같이, 폰트 사이즈를 크게 늘린 요소들은 가로 크기가 커진 것을 확인가능하다. parent가 상속받은 font-size 10px 에 2em 을 곱하게되니, font-size는 20px이 된거고 parent의 30em은 30 X 20 이 되기에 60 이라는 가로 사이즈를..

px 은 픽셀의 단위로 크기를 지정하는 걸 뜻한다. (해상도에 따른 상대단위, 고정값) 그러나 %는 가로 세로크기에 퍼센테이지만큼 크기를 지정한다. 부모 요소의 가로 세로 크기를 기준으로 퍼센테이지를 갖는다. 아래와 같이각 태그들에 테두리를 검정색으로 보여주고 있다. container 가 제일 부모이며, 그 다음은 parent. child 순이다. %가 부모 요소에 영향을 받는걸 확인할 수 있다. 패스트캠퍼스 올인원 패키지 글 정리.

HTML 에서 span 태그는 인라인의 효과를 갖기에, span 태그 안의 value 값 만큼만 크기를 갖게 되어있다. 블록형태와는 반대인 타입이 인라인인데, 만약 CSS에서 span 태그에dispaly: block을 준다면 어떻게 될까? 아래는 원래의 span 태그의 가로 값을 보여주는 이미지. 아래와 같이 CSS 코드를 넣어준다면? body { margin: 0; padding: 0; } span { background: red; width: 120px; height: 80px; display: block; } 아래와 같이 기본 값인 인라인 요소를 강제로 블록 요소로 변경했기에 가로 세로 크기도 지정이 되는 것이다. 패스트캠퍼스 올인원 패키지 글 정리.