냑의 폰트사이즈가 변경되었는데 아무도 관심을 가지지 않는 것 같아서... > 자유게시판

자유게시판

냑의 폰트사이즈가 변경되었는데 아무도 관심을 가지지 않는 것 같아서... 정보

냑의 폰트사이즈가 변경되었는데 아무도 관심을 가지지 않는 것 같아서...

본문

냑의 기본단위를 px 대신 rem으로 바꾸는 중인 것 같습니다.

개인적으로는 rem으로 바꾸는 것에 찬성하고 있습니다.

저도 개인 사이트는 rem으로 바꾸는 중인데 마진과 패딩 때문에 은근 신경쓸 일이 많더군요.

 

로고와 메인 컬러를 시작으로 전체 메뉴 구성과 사이드메뉴 디자인도 그렇고..

점점 바뀌고 있네요.

 

본문 글이 커진 만큼 container 폭도 조금 더 키워도 좋을 것 같습니다.

리스트의 위아래 폭도 그렇고요.

 

뭐..

 

그렇다구요 ^^

 

추천
2

베스트댓글

저도 rem으로 변경해서 하고 있는데
기준인 html font-size를 10px로 작업 하면 편합니다
10픽셀이 1rem이므로 0.1rem으로 바꾸면 되니 일일이 고치기에도 편하구 사람이 단번에 계산하기도
편하구요

html{ font-size:10px}
body{ font-size:1.4rem} 와 같이 쓰면 기본 폰트 사이즈가 14픽셀이 되니
계산시 크게 불편할 일은 없을듯 합니다
html에 적은 폰트 사이즈가 기준폰트가 됩니다 html의 폰트 사이즈를 10픽셀로 지정하면
그 이하 즉 body든 뭐든 간에 10픽셀*1rem 식으로 계산됩니다
그래서 1rem은 10*1 이므로 10픽셀의 값을 가지게 됩니다

1.25rem 으로 기재한다면

10 * 1.25 = 12.5  (12.5픽셀) 이 됩니다

만약 html의 폰트 사이즈를 12px로 지정했다면
12*1.25 = 15( 픽셀 ) 이됩니다 => 단번에 계산하기 힘들죠 그래서 기준값인
html 폰트 사이즈를 10픽셀로 잡으면 계산하기가 훨씬 수월해집니다

댓글 23개

px 대신 rem 의 차이가 확연히 있는 건가요?
검색해보면 차이점 설명에 대해 많은 정보가 있겠지만
님께서 글은 남겨주셨어 의견을 여쭵습니다.
초보라 한참 공부중인 사람을 위해 도움을... ㅎㅎ
rem을 사용하게 되면 님 설명처럼 html 태그에서 지정한 폰트사이즈 기준으로 바뀌게 되어 반응형 페이지에서 많이 사용합니다. em은 바로 위 부모요소를 기준으로 지정되지만 rem은 최상위요소를 기준으로 지정하게 되기 때문에 보다 직관적으로 지정할 수 있지요.
한글(또는 중국어, 일본어)보다 영어(를 포함한 라틴문자)에 더 잘 어울리는 방법이긴 하지만 미디어쿼리와 잘 맞물려 사용하면 더 깔끔한 계산을 할 수 있습니다.
.
.
라고 설명하고 대충 이해만 하고 있습니다.
저도 rem으로 변경해서 하고 있는데
기준인 html font-size를 10px로 작업 하면 편합니다
10픽셀이 1rem이므로 0.1rem으로 바꾸면 되니 일일이 고치기에도 편하구 사람이 단번에 계산하기도
편하구요

html{ font-size:10px}
body{ font-size:1.4rem} 와 같이 쓰면 기본 폰트 사이즈가 14픽셀이 되니
계산시 크게 불편할 일은 없을듯 합니다
어찌 되었던 rem 을 쓰려면 기준인 맨 상단에 html{ font-size:10px} 와 같은 기준점을 무조건 있어야 하나요?

10px 은 1rem 으로 무조건 지정 되는건가요?
아니면 12px을 기본으로 하면 그게 1rem 으로 되는건가요?
html에 적은 폰트 사이즈가 기준폰트가 됩니다 html의 폰트 사이즈를 10픽셀로 지정하면
그 이하 즉 body든 뭐든 간에 10픽셀*1rem 식으로 계산됩니다
그래서 1rem은 10*1 이므로 10픽셀의 값을 가지게 됩니다

1.25rem 으로 기재한다면

10 * 1.25 = 12.5  (12.5픽셀) 이 됩니다

만약 html의 폰트 사이즈를 12px로 지정했다면
12*1.25 = 15( 픽셀 ) 이됩니다 => 단번에 계산하기 힘들죠 그래서 기준값인
html 폰트 사이즈를 10픽셀로 잡으면 계산하기가 훨씬 수월해집니다
그럼 기존 사이트에도 맨 상단에 html{ font-size:10px} 이렇게 지정하고 나서 밑에 rem 을 원하는대로 사용하면 되는거네요...
이상하게 qna 게시판 같다는 느낌이 ^^;;
html 폰트 지정하고 나머지들을 rem으로 변경하면 됩니다 px들어간거 일일이 고치면 됩니다
margin, padding, width, height, border, font, position 기타 등등
그러게요~ ㅋ 감사합니다. 아무튼 오늘 처음 알았네요~ 앞으로 작업할때는 참고하여서 작업 해야겠습니다.
html에서 기준되는 폰트사이즈를 10px로 작업하면 계산기가 필요 없이 수치를 산청하기 수월합니다. 하지만 html에서 굳이 16px나 14px로 정해서 하는 이유는 편리하게 계산하기 위해서가 아니라 덜 계산하기 위해서이지 않을까 싶습니다. (사실 rem을 정확히 사용하려면 원래 html에서 기준을 지정하는 것이 아니라 각 브라우저의 기본에 적용되는 것이 반응형을 기준으로 더 수월하다고 합니다.)

rem 단위를 쓰는 이유 중에 하나는 보다 완벽하고 편리한 반응형 디자인의 구현이라고 볼 수 있는데 그 기준점을 본문의 폰트 사이즈로 잡았을 때 다른 것들을 거기에 맞춰 구현하기 편리하기 때문이라고 알고 있습니다. 본문에 맞춰 나머지를 미디어쿼리에 상관 없이 일괄로 적용할 수 있지 않을까 싶네요. (미디어쿼리에 맞춰 바꿔야 되는 부분은 그에 상응하게 지정하면 되구요.)

em 처럼 상대적 수치를 사용하지 않고 rem 처럼 절대적인 수치를 이용할 때 미디어 사이즈에 따라 일관된 아웃풋을 줄 수 있다는 말이 개인적으로 맞다고 생각합니다.
물론 제 수준으로는 이정도 밖에 이해를 못하고 있답니다 ^^
저도 대부분 같은 의견이긴 합니다

좀 더 첨언한다면 기본 폰트 사이즈를 작다고 느끼는 분들도 계실겁니다
기준크기는 기준으로서의 크기이지 고정으로서의 크기는 아닐거라 생각합니다
그래서 사용하는데, 의미를 두는데 큰 문제는 없을듯 합니다

예전에 웹표준이 한참 대두 되었을때 그랬죠
이게 맞냐 저게 맞냐 ( 특히 테이블 태그가 한참 두들겨 맞았죠 )
그런데 옳은건 필요한데 필요하도록 쓰는게 맞는듯 싶습니다
결국 사람이 만들어서 최종 사람이 사용하는 것이기 때문에요

실컷 계산해서 만들었는데 고쳐서 사용해야 하는 사람이 생겼을때 기계가 고생하는게 아니라
사람이 땀을 흘리게 되죠

좀더 가벼운 계산을 위한다면 중첩적인 계산이 덜하도록 하는게 더 낫지 싶습니다
미디어 사이즈에 따라 일관된 아웃풋이 나오면 좋은데 실상 같은 미디어 사이즈라 해도
브라우저 종류에의해서 조금 크기 차이가 살짝 납니다
( 실력 미달로 저만 그런지 모르겠습니다 ^^; )
그래도 일괄적인 사이즈 조정에 편리함이 좋은 장점인거 같습니다

물론 rem이 만능은 아닙니다 필요하면 픽셀 또는 센티미터, 인치등
다양한 값사용을 필요할 때 하면 된다 생각합니다
맞습니다. 이 문제는 모든 브라우저에서 글꼴을 통일시키는 것 만큼 어렵고 복잡한 문제 같습니다.
html에서 14px~16px로 정해서 계산해야 되는 것이 아닙니다. 기껏 rem으로 다 해놨는데 최상위 태그에서 고정값을 지정해 버리면 의미가 없습니다. 국내에서는 rem 단위 사용이 반응형 디자인을 위한 것이라는 글들이 인터넷에 떠돌아 다니는데, 정확히 말해서는 엉뚱한 부분을 짚고 있는 글들입니다. 반응형 디자인은 rem으로 하던 px로 하던 별 문제가 없거든요.

rem 단위의 사용은 "웹 접근성"과 관련이 있습니다. 사용자가 브라우저에 설정한 값을 따라서 디자인하자는 거죠. (rem으로 작업할 때 16px를 기준으로 삼는 이유는, 거의 모든 웹 브라우저의 기본 글꼴 크기값이라서 그렇습니다.) 이렇게 하면 사용자가 브라우저에 설정된 값을 바꾸면 그에 맞춰 전체 디자인의 크기가 변경될 수 있습니다. 그런데 html에 픽셀값을 설정해버리면 브라우저 설정값을 무시하기 때문에 rem으로 디자인 하는게 의미가 없어집니다.

그래서 html에서 font-size: 62.5%를 주는 팁이 있습니다. 이러면 브라우저 기본값 기준으로 딱 10px로 떨어져서 디자인 하기에도 간편하고, 퍼센트 단위로 지정한 값은 브라우저 설정에 따라 변화하는 가변 값이기 때문에 웹 접근성에도 부합합니다.

자세한 것은 https://brunch.co.kr/@clay1987/170 여기 글을 참조하시면 도움이 되실 겁니다.
전체 195,056 |RSS
자유게시판 내용 검색

회원로그인

진행중 포인트경매

  1. 참여0 회 시작24.03.28 11:15 종료24.04.04 11:15
(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT