투케이2K

72. (html/css/javascript/jquery) p 태그 내부에 span 태그 선언해 부분 텍스트 색상 (color) 스타일 변경 실시 본문

FrontEnd

72. (html/css/javascript/jquery) p 태그 내부에 span 태그 선언해 부분 텍스트 색상 (color) 스타일 변경 실시

투케이2K 2021. 8. 9. 13:25

[개발 환경 설정]

​

개발 툴 : Edit++

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

[소스코드]

​

<body>

<!-- 
[요약 설명]
1. p : 하나의 문단을 만들 때 주로 사용됩니다
2. span : 문장 단위로 텍스트 영역을 지정합니다
3. <br> : 강제로 행 (줄바꿈) 변경 을 실시합니다

4. 참고 : 
p 태그 내부에 span 태그를 생성해 >> span 태그에 텍스트 삽입 시 >> 
span 태그에 독자적으로 설정한 스타일을 제외한 >> 나머지 스타일은 p 태그 속성값을 상속받습니다
 -->


<!-- layout -->
<div id = "container"
    style="width: 70%; height: 40%; margin: 0 auto; padding: 0; border: 2px solid #000; 
        position: relative; top: 5%; left: 0%; display: table;">

        <p id = "txt"
            style="display: table-cell; text-align: center; vertical-align: middle; color: #000; font-weight: bold;
                font-size: 200%;">
                <!-- 일반 p 태그 내부 텍스트는 p 태그에서 선언한 스타일 속성에 따름 -->
                hello<br>
                <!-- span tag 개별 색상 적용 : 나머지 속성은 p 태그와 동일 -->
                <span style="color: #0000ff">hello</span><br>
                <span style="color: #ff0000">hello</span><br>
        </p>
        
</div>

</body>

[결과 출력]

​

[요약 설명]

​

<!--

[요약 설명]

1. p : 하나의 문단을 만들 때 주로 사용됩니다

2. span : 문장 단위로 텍스트 영역을 지정합니다

3. <br> : 강제로 행 (줄바꿈) 변경 을 실시합니다

​

4. 참고 :

p 태그 내부에 span 태그를 생성해 >> span 태그에 텍스트 삽입 시 >>

span 태그에 독자적으로 설정한 스타일을 제외한 >> 나머지 스타일은 p 태그 속성값을 상속받습니다

-->

 

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

74. (html/css/javascript/jquery) p 태그 text 텍스트 font-size 폰트 사이즈 10px 이하로 설정하기 - scale 확대 값 조절  (0) 2021.08.18
73. (html/css/javascript/jquery) iframe 사용해 웹페이지 내에 다른 웹페이지 호출 실시  (0) 2021.08.14
71. (html/css/javascript/jquery) 동적으로 콘텐츠 div 레이아웃 생성 실시 페이지 page 이동 처리 실시  (0) 2021.08.05
70. (html/css/javascript/jquery) checkbox , label 사용해 체크 박스 스타일 커스텀 지정 실시  (0) 2021.08.04
69. (html/css/javascript/jquery) radio , label 사용해 라디오 폼을 버튼 button 모양으로 커스텀 변경 실시  (0) 2021.08.04
'FrontEnd' Related Articles more
Comments