본문 바로가기

Programming/HTML & CSS

(4)
[CSS] em과 rem, 제대로 알고 사용하자! em과 rem em과 rem은 CSS 상대 단위 중 하나이다. 절대 단위인 px와는 다르게 동작한다. 상대 단위와 절대 단위의 차이는, 현실에서 km²와 여의도 x배의 면적 차이와 동일하다. 마찬가지로, 1px는 어느 곳에서나 1px이지만, 1em이나 1rem은 상황에 따라 달라질 수 있다. em은 요소의 글꼴 크기 1em은 요소의 글꼴 크기다. 1em은 해당 element의 font-size 값과 동일하다. element의 글꼴 크기가 12px이면, 1em은 12px이 되고, 2em은 24px이 된다. rem은 루트 요소의 글꼴 크기 1rem은 루트 요소의 글꼴 크기다. 1rem은 루트 요소(일반적으로 태그) font-size 속성의 값과 동일하다. 일반적으로는 브라우저에서 지정한 값인 16px을 나타..
[CSS] span에서의 ... 말 줄임표(text-overflow: ellipsis 속성) 처리 div와 같은 block 요소와는 다르게, span은 inline요소이기 때문에, text-overflow: ellipsis 속성을 줘도 제대로 동작하지 않는다. 이러한 경우에는 span 요소에 display: inline-block이나 display: block 을 추가하여 block 요소로 변경하면 정상적으로 동작한다.
CSS) 한가운데 div 배치하기(가로세로중앙정렬) 예를 들어 아래와 같은 코드가 있을 때,article을 중앙에 배치하기 위해 flex를 사용한다면, .container의 스타일을 다음과 같이 설정할 것이다..container{ display:flex; justify-content:center; align-items:center; }그러나 이는 실패한다.가로로는 정렬이 되었지만, 세로로는 위에 붙어있다. 세로로도 중앙 정렬을 해야 한다.그렇다면 어떻게 하면 article을 한가운데에 배치할 수 있을까?한줄만 추가해주면 된다..container{ display:flex; justify-content:center; align-items:center; height:100vh }vh는 viewport height의 약자이다.이제 .container는 사용자가 ..
CSS에서의 vh와 vw vh : Viewport Heightvw : Viewport Width 예를 들어 화면을 꽉 채우고 싶을 때(Content의 넓이가 100%가 안되더라도) width: 100vw;height: 100vh; 로 하면 보이는 화면의 100%로 된다.즉 1vw와 1vh는 각각 가로 1%와 세로 1%이다.