10월 06, 2022

스마트폰 화면의 list 요소 ol/ul/li 수정과 조절

스마트폰은 유비쿼터스를 완벽하게 실행할 수 있는 현대인의 필수품이다. 과거 컴퓨터 중심의 정보체계가 스마트폰으로 이동되는 추세이지만 스마트폰 화면 공간의 협소로 여러 가지 불편함이 초래된다. 대표적인 사례를 든다면, 문단을 간결하고 함축적으로 작성할 수 있는 리스트(list) 요소의 여백 문제일 것이다. 다행스럽게 html 함수로 스마트폰에 여백과 글머리 기호, 줄 간격 등을 최적화시킬 수 있어 그 방법을 살펴본다.
컴퓨터 화면과 다르게 스마트폰에 글자 크기, 색상 등 모든 요소는 아래와 같이 블로그 템플릿이나 게시글 페이지에서 변경하여 스마트폰에 최적화할 수 있다.

블로그 홈페이지

블로그 템플릿의 html <head>와</head> 사이에 다음과 같이 스타일을 지정하면 된다. 마지막에 괄호 함수(15번 줄과 16번 줄)를 반드시 중복하는 점에 유의해야 한다. 

<b:if cond='data:blog.isMobile'>     
<style>
@media only screen and (max-width: 768px) {
    html, body {
    background: #fff;
    max-width: 100%;
    overflow-x: hidden;
    width:100vw ; 
}
ol{
    list-style:circle;
    padding-left:5px;
    line-height:1.6em
}
} 
</style>
</b:if>

게시글 페이지

작성한 블로그 게시글 하단에 다음과 같이 스타일을 지정하고 함수를 작성하면 된다. 마지막에 괄호 함수(8번 줄과 9번 줄)를 반드시 중복하는 점에 유의해야 한다. 
 
<style>
@media only screen and (max-width: 768px) {
ol{
    list-style:circle;
    padding-left:5px;
    line-height:1.6em
}
} 
</style>