투케이2K

74. (html/css/javascript/jquery) p 태그 text 텍스트 font-size 폰트 사이즈 10px 이하로 설정하기 - scale 확대 값 조절 본문

FrontEnd

74. (html/css/javascript/jquery) p 태그 text 텍스트 font-size 폰트 사이즈 10px 이하로 설정하기 - scale 확대 값 조절

투케이2K 2021. 8. 18. 18:22

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

[소스코드]

​

<body>

<!-- 
[div layout 주요 스타일]
1. display: table; : p 태그 텍스트를 수직 정렬을 실시하기 위함
2. table-layout: fixed; : p 태그 텍스트 영역 초과시 히든 처리 위함
 -->


<!-- 
[p 태그 주요 스타일]
1. display: table-cell; : p 태그 텍스트를 수직 정렬을 실시하기 위함
2. text-align: center; : p 태그 텍스트를 수평 중앙 정렬 실시
3. vertical-align: middle; : p 태그 텍스트를 수직 중앙 정렬 실시
4. font-weight: bold; : p 태그 텍스트 폰트 굵기 설정
5. white-space : nowrap; : 한줄로 만들어서 표시한다는 의미
6. overflow : hidden; , text-overflow : ellipsis; : 텍스트 초과 시 생략한다는 의미입니다 (점 표시) 
7. -webkit-transform:scale(0.8); : 10px 폰트 이하로 설정 시 사용합니다 - scale 확대값 조정 (0.8 - 8px)
-->

<div style="width: 40%; height: 10%; margin: 0 auto; padding: 0; border: 1px solid #000;
        float: top; position: relative; top: 5%; left: 0%; display: table;">

    <p style="display: table-cell; text-align: center; vertical-align: middle; color: #000; font-size: 20px; font-weight: bold;">
    TEST 20px;
    </p>            
</div>


<div style="width: 40%; height: 10%; margin: 0 auto; padding: 0; border: 1px solid #000;
        float: top; position: relative; top: 10%; left: 0%; display: table;">

    <p style="display: table-cell; text-align: center; vertical-align: middle; color: #000; font-size: 10px; font-weight: bold;">
    TEST 10px;
    </p>            
</div>


<div style="width: 40%; height: 10%; margin: 0 auto; padding: 0; border: 1px solid #000;
        float: top; position: relative; top: 15%; left: 0%; display: table;">

    <p style="display: table-cell; text-align: center; vertical-align: middle; color: #000; font-size: 10px; font-weight: bold;
        -webkit-transform:scale(0.8);">
    TEST 8px;
    </p>            
</div>

</body>

[결과 출력]

​

[요약 설명]

​

<!--

[div layout 주요 스타일]

1. display: table; : p 태그 텍스트를 수직 정렬을 실시하기 위함

2. table-layout: fixed; : p 태그 텍스트 영역 초과시 히든 처리 위함

-->

​

​

<!--

[p 태그 주요 스타일]

1. display: table-cell; : p 태그 텍스트를 수직 정렬을 실시하기 위함

2. text-align: center; : p 태그 텍스트를 수평 중앙 정렬 실시

3. vertical-align: middle; : p 태그 텍스트를 수직 중앙 정렬 실시

4. font-weight: bold; : p 태그 텍스트 폰트 굵기 설정

5. white-space : nowrap; : 한줄로 만들어서 표시한다는 의미

6. overflow : hidden; , text-overflow : ellipsis; : 텍스트 초과 시 생략한다는 의미입니다 (점 표시)

7. -webkit-transform:scale(0.8); : 10px 폰트 이하로 설정 시 사용합니다 - scale 확대값 조정 (0.8 - 8px)

-->

 

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

76. (html/css/javascript/jquery) background-color 배경 색상 적용 및 opacity , rgba 투명도 조절  (0) 2021.08.19
75. (html/css/javascript/jquery) p 태그 text-align 텍스트 가로 정렬 수행 실시 - left , right , center , justify  (0) 2021.08.18
73. (html/css/javascript/jquery) iframe 사용해 웹페이지 내에 다른 웹페이지 호출 실시  (0) 2021.08.14
72. (html/css/javascript/jquery) p 태그 내부에 span 태그 선언해 부분 텍스트 색상 (color) 스타일 변경 실시  (0) 2021.08.09
71. (html/css/javascript/jquery) 동적으로 콘텐츠 div 레이아웃 생성 실시 페이지 page 이동 처리 실시  (0) 2021.08.05
'FrontEnd' Related Articles more
Comments