css단위 em, rem에 대해 질문있습니다.
-
게시물 수정 , 삭제는 로그인 필요
css단위 em, rem에 대해 질문있습니다.
익명 작성일 -
공부하면서 정리 했던 내용이 있어서 적어봅니다.
---------------------------------
css에서는 길이를 표현하는 여러 가지 단위가 있습니다.
이런 단위는 width, height, margin, padding, font-size 등과 같이 '길이(length)'가 필요한 값에 사용됩니다.
'길이(length)'는 숫자와 단위가 같이 사용됩니다.(예: 10px, 2em 등)
px(픽셀)단위를 사용하는 예제는 아래와 같습니다.
h1 { font-size: 60px }
숫자와 단위 사이에는 공백을 포함할 수 없습니다. 단 값이 '0'인 경우 단위를 생략할 수 있습니다.
단위의 종류에는 '절대 길이(Absolute Lengths) 단위'와 '상대 길이(Relative Lengths) 단위'가 있습니다.
1. 절대 길이(Absolute Lengths)
'절대 길이(Absolute Lengths) 단위'는 단위에 정해진 길이만큼 정확하게 표현되는 것입니다.
그래서 간판이나 현수막 같은 인쇄물에 사용하면 좋습니다. 설정한 크기만큼 보여 지기 때문입니다.
하지만 PC, 노트북, 스마트 폰 등 다양한 환경 속에서는 화면(screen)의 크기에 따라 다르게 보여 지기 때문에 사용하지 않는 것이 좋습니다.
절대 길이 단위의 종류는 다음과 같습니다.
절대 길이 단위
이름
계산
cm
센티미터(centimeters)
-
mm
밀리미터(millimeters)
-
in
인치(inches)
1in = 96px = 2.54cm
px
픽셀(pixels)
1px = 0.96인치(in)
pt
포인트(points)
1pt = 0.72인치(in)
pc
피카(picas)
1pc = 12pt
픽셀(px)은 보고 있는 기기의 화면을 기준으로 합니다. 저해상도 화면의 경우 1px은 최소의 단위입니다.
프린터 및 고해상도 화면의 경우 1px안에는 여러 개의 픽셀로 구성되어있습니다.
저해상도의 화면의 경우 1px안에 하나의 점으로 구성되어 있습니다. 고행상도 화면의 경우 1px안에 여러 개의 점으로 구성되어있습니다. 그래서 저해상도 보다 다양한 색상과 모양을 만들 수 있습니다.
2. 상대 길이(Relative Lengths)
'상대 길이(Relative Lengths) 단위'는 기준에 대한 상대적인 길이를 말합니다.
'상대 길이(Relative Lengths) 단위'는 다양한 화면에서 적합하게 보여 집니다.
상대 길이 단위의 종류는 다음과 같습니다.
상대 길이 단위
내용
em
요소의 폰트 크기를 기준으로 합니다. 2em은 현재 폰트 크기의 2배라는 뜻입니다.
ex
소문자 x의 높이를(x-height)를 기준으로 합니다. 거의 사용되지 않습니다.
ch
숫자 '0'의 너비를 기준으로 합니다.
rem
최 상위(root) 폰트의 크기를 기준으로 합니다.
vw
뷰포트(=화면에 보여 지는 영역) 너비(width)의 1%
vh
뷰포트(=화면에 보여 지는 영역) 높이(height)의 1%
vmin
뷰포트 가로와 세로 중 짧은 면의 1%
vmax
뷰포트 가로와 세로 중 긴 면의 1%
%
부모요소를 기준으로 백분율 합니다.
공부하면서 정리 했던 내용이 있어서 적어봅니다.
---------------------------------
css에서는 길이를 표현하는 여러 가지 단위가 있습니다.
이런 단위는 width, height, margin, padding, font-size 등과 같이 '길이(length)'가 필요한 값에 사용됩니다.
'길이(length)'는 숫자와 단위가 같이 사용됩니다.(예: 10px, 2em 등)
px(픽셀)단위를 사용하는 예제는 아래와 같습니다.
| h1 { font-size: 60px } |
숫자와 단위 사이에는 공백을 포함할 수 없습니다. 단 값이 '0'인 경우 단위를 생략할 수 있습니다.
단위의 종류에는 '절대 길이(Absolute Lengths) 단위'와 '상대 길이(Relative Lengths) 단위'가 있습니다.
1. 절대 길이(Absolute Lengths)
'절대 길이(Absolute Lengths) 단위'는 단위에 정해진 길이만큼 정확하게 표현되는 것입니다.
그래서 간판이나 현수막 같은 인쇄물에 사용하면 좋습니다. 설정한 크기만큼 보여 지기 때문입니다.
하지만 PC, 노트북, 스마트 폰 등 다양한 환경 속에서는 화면(screen)의 크기에 따라 다르게 보여 지기 때문에 사용하지 않는 것이 좋습니다.
절대 길이 단위의 종류는 다음과 같습니다.
| 절대 길이 단위 |
이름 |
계산 |
| cm |
센티미터(centimeters) |
- |
| mm |
밀리미터(millimeters) |
- |
| in |
인치(inches) |
1in = 96px = 2.54cm |
| px |
픽셀(pixels) |
1px = 0.96인치(in) |
| pt |
포인트(points) |
1pt = 0.72인치(in) |
| pc |
피카(picas) |
1pc = 12pt |
픽셀(px)은 보고 있는 기기의 화면을 기준으로 합니다. 저해상도 화면의 경우 1px은 최소의 단위입니다.
프린터 및 고해상도 화면의 경우 1px안에는 여러 개의 픽셀로 구성되어있습니다.
저해상도의 화면의 경우 1px안에 하나의 점으로 구성되어 있습니다. 고행상도 화면의 경우 1px안에 여러 개의 점으로 구성되어있습니다. 그래서 저해상도 보다 다양한 색상과 모양을 만들 수 있습니다.
2. 상대 길이(Relative Lengths)
'상대 길이(Relative Lengths) 단위'는 기준에 대한 상대적인 길이를 말합니다.
'상대 길이(Relative Lengths) 단위'는 다양한 화면에서 적합하게 보여 집니다.
상대 길이 단위의 종류는 다음과 같습니다.
| 상대 길이 단위 |
내용 |
| em |
요소의 폰트 크기를 기준으로 합니다. 2em은 현재 폰트 크기의 2배라는 뜻입니다. |
| ex |
소문자 x의 높이를(x-height)를 기준으로 합니다. 거의 사용되지 않습니다. |
| ch |
숫자 '0'의 너비를 기준으로 합니다. |
| rem |
최 상위(root) 폰트의 크기를 기준으로 합니다. |
| vw |
뷰포트(=화면에 보여 지는 영역) 너비(width)의 1% |
| vh |
뷰포트(=화면에 보여 지는 영역) 높이(height)의 1% |
| vmin |
뷰포트 가로와 세로 중 짧은 면의 1% |
| vmax |
뷰포트 가로와 세로 중 긴 면의 1% |
| % |
부모요소를 기준으로 백분율 합니다. |
익명 작성일 -
em과 rem은 CSS에서 사용되는 상대적인 길이 단위입니다.
1. **em**: 이 단위는 부모 요소의 폰트 크기에 상대적입니다. 즉, em 단위로 설정된 글꼴 크기는 부모 요소의 폰트 크기의 몇 배인지에 따라 결정됩니다. 부모 요소의 폰트 크기가 16px일 때, 1em은 16px을 나타냅니다. 부모 요소의 폰트 크기가 변경되면 em 단위로 설정된 요소의 크기도 함께 변경됩니다.
2. **rem**: 이 단위는 루트 요소(HTML 요소)의 폰트 크기에 상대적입니다. 즉, rem 단위로 설정된 글꼴 크기는 HTML 요소의 폰트 크기의 몇 배인지에 따라 결정됩니다. 보통 브라우저의 기본 폰트 크기는 16px입니다. 따라서 1rem은 보통 16px을 나타냅니다. rem은 부모 요소의 크기에 영향을 받지 않으므로 em보다 예측 가능하고 유연한 레이아웃을 만들 수 있습니다.
결론적으로, em은 폰트 크기를 조정하는 데 사용되고, rem은 전역적인 레이아웃 구성에 사용됩니다.
em과 rem은 CSS에서 사용되는 상대적인 길이 단위입니다.
1. **em**: 이 단위는 부모 요소의 폰트 크기에 상대적입니다. 즉, em 단위로 설정된 글꼴 크기는 부모 요소의 폰트 크기의 몇 배인지에 따라 결정됩니다. 부모 요소의 폰트 크기가 16px일 때, 1em은 16px을 나타냅니다. 부모 요소의 폰트 크기가 변경되면 em 단위로 설정된 요소의 크기도 함께 변경됩니다.
2. **rem**: 이 단위는 루트 요소(HTML 요소)의 폰트 크기에 상대적입니다. 즉, rem 단위로 설정된 글꼴 크기는 HTML 요소의 폰트 크기의 몇 배인지에 따라 결정됩니다. 보통 브라우저의 기본 폰트 크기는 16px입니다. 따라서 1rem은 보통 16px을 나타냅니다. rem은 부모 요소의 크기에 영향을 받지 않으므로 em보다 예측 가능하고 유연한 레이아웃을 만들 수 있습니다.
결론적으로, em은 폰트 크기를 조정하는 데 사용되고, rem은 전역적인 레이아웃 구성에 사용됩니다.
css 단위에 대해 질문있습니다.
... css 단위 중에 px, em, rem, %, vw, vh 이 중에 px 빼고는 전부 어렵더라구요. 이것저것... 하지만, 나중에 css 파일이 방대해지고, 부모에게서 상속받은 폰트 크기를...
반응형 웹 transform:scale 질문있습니다
... 궁금합니다 rem이나 em, %,vw 이런값들이 아예 먹히질... HTML, 정확히는 CSS로 처리합니다. 핵심만 말씀드리면... HTML 객체의 width 및 height에 픽셀 단위가 아닌, 퍼센트...
웹
... line-height에 대해 자세히 알려주세요ㅠㅠ line-height는 텍스트 줄의 높이를 결정하는 CSS 속성입니다. 일반적으로 픽셀, em, rem 등의 단위로 지정할 수 있으며...
css단위 em, rem에 대해 질문있습니다.
... css단위에서 em, rem이 나오고 font-size에 대해서도 나오는데 저는 font-size라고 해서 글자크기에 대해서만 관련이 있는건줄 알았는데 예를 들어 가로 세로 값이 있는...
css에서 em과 rem 단위에 대해 너무...
안녕하세요 현재 html, css를 공부중인데 css 단위중에 em과 rem이라는게 있는데... 그래서 em과 rem에 대해 쉽게 알려주시면 너무 감사하고 또 폰트크기와...
css rem단위에 대해 질문있습니다.
... css단위를 보고 있는데 무슨 말인지도 모르겠고 너무 헷갈리더라구요. css에서... 이렇게 적고 이제 작업을 하면서 어떤 클래스선택자에 몇 rem이 적혀 있는데 만약...
css단위에 대해 질문있습니다.
현재 css기초를 공부중인데 단위에 대해 어려워 자세하게 또 쉽게 알고싶어 질문을 남기게 되었습니다. 첫번째로 em, rem, px 우선...
css font-size에 대해 질문있습니다.
... rem이라는 단위인데 제가 아는것이라고는 html 기본 폰트 사이즈가 16px인데... css의 em 이라는 단위는 폰트크기를 상대적인 배율로 으로 부루는 단위 입니다. font...
css calc계산에 대해 질문있습니다.
... 이것저것 css에 대해 검색을 하다 width값에 calc( ) 라는 걸... 는 CSS의 함수 중 하나로, 두 개 이상의 값(숫자, 단위 등)을 연산하여 결과값을 반환합니다. %, px, em, rem...
width, height에 대해 질문있습니다.
안녕하세요 css를 공부중인데 width와 height에 대해 궁금해서 질문을 드립니다. 값이... 되어 %를 많이 사용 합니다. 요즘은 % 보다는 em, rem, vh, vw 등으로 많이 사용 합니다.