<![CDATA[휴대폰 가로 화면에서 폰트 크기]]> https://www.cosmosfarm.com/threads/rss/document/24357 안녕하세요. KBoard의 default 스킨을 활용하여 워드프레스 홈페이지를 제작 중입니다.

그런데, 게시판의 글을 클릭하여 읽기 모드로 전환되었을 때, 글의 제목과 내용의 폰트가 화면 크기에 따라 자동으로 바뀌나요?

노트북 화면에서와 휴대폰 화면에서는 적절해 보이는데, 휴대폰을 가로로 돌려 보면 글 제목과 내용의 한글 폰트가 갑자기 커져서 부자연스럽습니다. 

화면 크기에 따라 글 제목과 내용의 폰트가 적절히 조절되게 하려면 어떻게 해야하나요?

아래와 같이 커스텀 CSS 업데이트를 해 보았는데 소용이 없네요...

@media only screen and (max-width: 600px) {#kboard-default-document > div.kboard-document-wrap > div.kboard-title > h1 { font-size: 13px; }}
@media only screen and (max-width: 600px) {#kboard-default-document > div.kboard-document-wrap > div.kboard-content > div { font-size: 12px; }}

]]> Copyright 2026, 코스모스팜 <![CDATA[CSS 코드 수정은 저희가 페이지를 봐야 좀 더 자세하게 안내해드릴 수 있습니다. 확인 가능한 페이지 ...]]> https://www.cosmosfarm.com/threads/document/24414 CSS 코드 수정은 저희가 페이지를 봐야 좀 더 자세하게 안내해드릴 수 있습니다.

확인 가능한 페이지 주소 알려주시면 살펴보겠습니다.

고맙습니다.

]]> 스레드봇 Mon, 09 Jul 2018 07:15:21 +0000 KBoard <![CDATA[지금 다시 보니 위의 코드를 그냥 지우고 해도 똑같이 보이네요...위의 @media screen and... 코드가 아...]]> https://www.cosmosfarm.com/threads/document/24405 지금 다시 보니 위의 코드를 그냥 지우고 해도 똑같이 보이네요...위의 @media screen and... 코드가 아예 휴대폰 화면 표시에 영향을 안 주네요... 어떻게 된 걸까요? 위의 코드를 넣고 노트북의 구글 크롬이나 사파리에서 브라우저 사이즈를 조절하면 글자 크기가 그에 따라 변하는 걸 확인할 수는 있어요. 그런데 휴대폰 화면에는 의도한 대로 적용이 안되네요..

]]> 케빈 Mon, 09 Jul 2018 05:36:34 +0000 KBoard <![CDATA[답변 감사합니다^^ 그런데, max-width 부분을수정하면서 테스트해 봤는데요... 제목의 폰트는 괜찮은 ...]]> https://www.cosmosfarm.com/threads/document/24404 답변 감사합니다^^

그런데, max-width 부분을수정하면서 테스트해 봤는데요... 제목의 폰트는 괜찮은 거 같은데, 내용의 폰트가 여전히 크게 나와요. 폰트 사이즈가 휴대폰 세로 화면에서는 적절히 구현되는데 가로로 돌리면 커져 버립니다. 해결 방법이 없을까요? 휴대폰에서 보여지는 거라 여기에 올릴 수도 없고 그러네요...

]]> 케빈 Mon, 09 Jul 2018 05:29:46 +0000 KBoard <![CDATA[안녕하세요~^^ 휴대폰의 가로 모드에서 너비가 600 픽셀보다 크다면 올려주신 코드는 적용되지 않습니...]]> https://www.cosmosfarm.com/threads/document/24378 안녕하세요~^^

휴대폰의 가로 모드에서 너비가 600 픽셀보다 크다면

올려주신 코드는 적용되지 않습니다.

아래의 코드처럼 max-width 값을 늘리신 후에 다시 확인해보시겠어요?

@media screen and (max-width: 700px) {
	/* 가로 */
    #kboard-default-document > div.kboard-document-wrap > div.kboard-title > h1 { font-size: 13px; }
    #kboard-default-document > div.kboard-document-wrap > div.kboard-content > div { font-size: 12px; }
}

@media screen and (max-width: 400px) {
	/* 세로 */
    #kboard-default-document > div.kboard-document-wrap > div.kboard-title > h1 { font-size: 22px; }
    #kboard-default-document > div.kboard-document-wrap > div.kboard-content > div { font-size: 14px; }
}

위의 코드에서 max-width 부분을 적절히 수정하시면

휴대폰의 가로모드, 세로모드 따로 CSS 속성을 추가하실 수 있습니다.

고맙습니다.

]]> 스레드봇 Mon, 09 Jul 2018 01:17:43 +0000 KBoard