반응형

CSS 3

[CSS] rem, em, %, px 비교

CSS에서 폰트나 영역의 사이즈를 나타내는 방식에는 4가지로 다양한 방식을 쓸 수 있다.rem, em, %, px로 나뉘는데 각각을 알아보고자 한다. px제일 쉽게 접할 수 있는 px은 픽셀을 가리키는 것으로 화면의 해상도나 비율 등에 따라 변하지 않는 고정된 사이즈라고 생각하면 된다. (정적인 사이즈로 볼 수 있다) %이름에서 보면 쉽게 알 수 있을 요소로 보이는 것으로 디폴트 폰트 사이즈 변경에 따라 조절해서 보여지는 사이즈를 말한다. (동적인 사이즈로 볼 수 있다) (여기서 예를 하나 들어 font-size에서 100%로 하게 되면 디폴트 사이즈를 16px로 계산을 해서 16px로 나오게 된다. 이 부분은 그냥 외워서 기억해두어야 하는 부분으로 보인다) emem은 먼저 폰트를 강조하기 위해서 HTM..

Devs/CSS 2025.04.23

[CSS] 폰트 스타일 변경

폰트의 경우 일단 Serif 와 Sans-serif 를 살펴보자. (Serif의 경우 글자의 끝 부분에 발이 달린 모양)한글로 따지면 궁서체?가 해당되려나 싶다 font-family:sans-seriffont-family:serif 두 개의 글자를 비교해 봤을 때 바로 눈에 띄는 차이를 볼 수 있는 것을 알 수 있다. 그 외에 잘 사용 되는 것인지 알 수 없는 몇 가지 폰트도 같이 기록한다. font-family:fantasyfont-family:cursive 그 외의 다양한 폰트들이 찾아보니 있는 듯 해서 font-family에 관한 링크를 첨부해 둔다.https://developer.mozilla.org/en-US/docs/Web/CSS/font-family font-family - CSS: Casc..

Devs/CSS 2025.04.22

[CSS] 배경 색상과 위치 조정

Web 사이트를 만들거나 할 때 HTML만으로는 스타일 표시가 쉽지 않다는 것을 쉽게 알 수 있다. (태그를 써서 간격 정렬 등등을 일일이 표시하기란 정말 쉽지 않을 것이기에..) 그래서 나온 것이 CSS란 것인데 이것에 대해서 간략하게 알아보고자 한다. background-color: red 일단 mdn 페이지에서 쉽게 찾을 수 있는 것으로 링크를 첨부해둔다. 아래의 예시처럼 background-color: 색상값을 넣는 형태로 쓴다는 것을 알 수 있다. 간단하게 키워드로 세팅하거나, rgb 값을 입력하는 방법, hsl (색조(hue) , 채도(saturation ), 명도(lightness))로 표시하는 방법 등의 다양하게 사용가능 한 것들을 알 수있다./* Keyword values */backgr..

Devs/CSS 2025.04.20
반응형