투케이2K

82. (html/css/javascript/jquery) text-shadow 사용해 텍스트 글자 그림자 효과 적용 실시 본문

FrontEnd

82. (html/css/javascript/jquery) text-shadow 사용해 텍스트 글자 그림자 효과 적용 실시

투케이2K 2021. 8. 26. 08:49
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

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

[소스코드]

​

<body>

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


<!-- 
[p 태그 주요 스타일]
1. display: table-cell; : p 태그 텍스트를 수직 정렬을 실시하기 위함
2. vertical-align: middle; : p 태그 텍스트를 수직 중앙 정렬 실시
3. text-align: center; 수평 방향 기준으로 중앙으로 정렬을 실시합니다
4. text-shadow : 가로, 세로, 번짐, 색상 으로 설정합니다
-->


<div style="width: 70%; height : 20%; margin: 0 auto; padding: 0; border: 1px solid #000;
        float: top; position: relative; top: 2%; left: 0%; 
        display: table; table-layout: fixed;">

    <p style="display: table-cell; text-align: center; vertical-align: middle;
            font-size: 25px; font-weight: bold;">
    <span style="color: #00f;">[text-shadow: 1px 1px 1px #000;]</span><br>

    <span style="color: #fff; text-shadow: 1px 1px 1px #000;">
    text-shadow 를 사용해서 텍스트 글자에 그림자 표과 적용 실시
    </span><br>    
    </p>            
</div>




<div style="width: 70%; height : 20%; margin: 0 auto; padding: 0; border: 1px solid #000;
        float: top; position: relative; top: 4%; left: 0%; 
        display: table; table-layout: fixed;">

    <p style="display: table-cell; text-align: center; vertical-align: middle;
            font-size: 25px; font-weight: bold;">
    <span style="color: #00f;">[text-shadow: 2px 2px 2px #000;]</span><br>

    <span style="color: #fff; text-shadow: 2px 2px 2px #000;">
    text-shadow 를 사용해서 텍스트 글자에 그림자 표과 적용 실시
    </span><br>    
    </p>            
</div>




<div style="width: 70%; height : 20%; margin: 0 auto; padding: 0; border: 1px solid #000;
        float: top; position: relative; top: 6%; left: 0%; 
        display: table; table-layout: fixed;">

    <p style="display: table-cell; text-align: center; vertical-align: middle;
            font-size: 25px; font-weight: bold;">
    <span style="color: #00f;">[text-shadow: 2px 2px 5px #000;]</span><br>

    <span style="color: #fff; text-shadow: 2px 2px 5px #000;">
    text-shadow 를 사용해서 텍스트 글자에 그림자 표과 적용 실시
    </span><br>    
    </p>            
</div>


</body>

[결과 출력]

​

[요약 설명]

​

<!--

[div layout 주요 스타일]

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

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

-->

​

​

<!--

[p 태그 주요 스타일]

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

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

3. text-align: center; 수평 방향 기준으로 중앙으로 정렬을 실시합니다

4. text-shadow : 가로, 세로, 번짐, 색상 으로 설정합니다

-->

 

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

84. (html/css/javascript/jquery) 카카오 인앱 브라우저 주소 표시줄 및 네비게이션 바 자동 숨김 현상 조치 사항  (0) 2021.10.01
83. (html/css/javascript/jquery) 모바일 웹 브라우저 당김 새로고침 막기 - overscroll-behavior contain 사용  (0) 2021.09.02
81. (html/css/javascript/jquery) p 태그 letter-spacing 사용해 텍스트 글자 자간 (가로 간격) 조절 실시  (0) 2021.08.25
80. (html/css/javascript/jquery) p 태그 텍스트 글자 수가 부모 div 영역 초과 시 overflow 스크롤 처리 실시  (0) 2021.08.23
79. (html/css/javascript/jquery) p 태그 텍스트 글자 수에 맞춰서 div height 높이 자동 조절 실시  (0) 2021.08.21
'FrontEnd' Related Articles more
Comments