투케이2K

21. (html/css/javascript/jquery) 자바스크립트 사용해 p 태그 텍스트 확인 및 변경 , css style 속성 변경 실시 본문

FrontEnd

21. (html/css/javascript/jquery) 자바스크립트 사용해 p 태그 텍스트 확인 및 변경 , css style 속성 변경 실시

투케이2K 2021. 6. 1. 10:29

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

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

/* =========================== */

​

/* =========================== */

[소스 코드]

 

<!DOCTYPE HTML>
<!-- 표시 언어 지정 -->
<html lang="ko">

<!-- 헤더 정의 부분 -->
<head>
    <title>HTML TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    

    <!-- 내부 CSS 스타일 지정 -->
    <style>
		/* 
		[CSS 요소 설명] 
		1. font-family : 폰트 표시 형태 스타일 지정
		2. width : 가로 크기 지정
		3. height : 세로 크기 지정
		4. margin : 마진 (외부) 여백 설정
		5. padding : 패딩 (내부) 여백 설정
		6. border : 테두리 (선) 표시 설정
		7. background : 배경 표시 설정
		8. overflow : 범위를 벗어난 콘텐츠 표시 여부 설정 (스크롤)
		9. float : 정렬 기준 설정
		10. div : 레이아웃 표시 블록
		11. position : 레이아웃 위치 정렬 설정
		12. display : table; : 해당 div 영역을 테이블 형식으로 설정
		13. display : table-cell; : 해당 div 영역을 테이블 셀 형식으로 설정
		14. vertical-align : middle; : 테이블 셀 영역에서 텍스트 수직 정렬 설정
		15. font-size : 3vw; : 가로 크기 기준으로 반응형 텍스트 폰트 사이즈 설정		

		    	    	
		[CSS 세부 설명]
		1. width : 100%; : 가로 크기를 (%)로 지정 - 반응형 설정
		2. margin : 0 auto; : 중앙 배치 설정
		3. border : none; : 테두리 스타일 없음 설정
		4. background-color : #343d46; : rgb 색상을 사용해 배경색 지정
		5. display : table; : 해당 div 영역을 테이블 형식으로 설정
		6. display : table-cell; : 해당 div 영역을 테이블 셀 형식으로 설정
		7. vertical-align : middle; : 테이블 셀 영역에서 텍스트 수직 정렬 설정
		8. font-size : 3vw; : 가로 크기 기준으로 반응형 텍스트 폰트 사이즈 설정				
		*/
				    			 	
    	
		/* html, body 영역 스타일 지정 */
		html, body{
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;	
			
			/* 스크롤바 표시 지정 */
			overflow : auto;					
		}
		
		
		/* body 스크롤바 메인 스타일 지정 */
		body::-webkit-scrollbar {
			/* 스크롤바 너비 지정 */
			width: 10px;
			
			/* 스크롤바 배경 색상 지정 */
			background-color: #c1c1c1;
		}
		/* body 스크롤바 thumb 스타일 지정 */
		body::-webkit-scrollbar-thumb {					
			/* 스크롤바 thumb 색상 지정 */
			background-color: #444444;
		}
        
        
		/* div 스타일 지정 */
		#first_container {
			width : 20%;
			height : 20%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : #0a1a2e;
					
			/* 컨테이너 배치 정렬 실시 */
			float : top;
			position : relative; 
			top : 5%;
			left : 0%;
			
			/* 마우스 커서 스타일 지정 */
			cursor : pointer;
			
			/* display table 지정 */
			display : table;																		  								   
		}
		
		
		/* p 태그 스타일 지정 */
		#first_container > #first_container_txt {
			/* 텍스트 가로 정렬 지정 */
			text-align : center;
			
			/* 텍스트 색상 지정 */
			color : #ffffff;
			
			/* 텍스트 굵기 지정 */
			font-weight : bold;
			
			/* 텍스트 사이즈 지정 */        	
			font-size : 3vw;
        	
			/* 텍스트 수직 정렬 실시 */        	        	 	
			display : table-cell;
			vertical-align : middle;																	  								   
		}		
		      				                          
    </style>    


    <!-- 내부 JS 지정 -->
    <script>
    	/* 
    	[JS 요약 설명]
    	1. function : 함수 형태를 정의할 때 사용합니다
    	2. document.getElementById : 레이아웃에서 특정 태그 값 요소를 찾습니다
    	3. innerText : 특정 태그 값 텍스트 확인 및 설정합니다
    	4. style : 자바스크립트에서 css 속성을 변경할 때 사용합니다
    	*/
    	
    	
    	/* 클릭 이벤트 함수 정의 */
    	function call_event() {
    		/* p 태그 텍스트 값 확인 */
    		var p_data = document.getElementById('first_container_txt').innerText;
    		check_result(p_data);
    		
    		/* p 태그 텍스트 값 변경 */
    		document.getElementById('first_container_txt').innerText = '반갑습니다';
    		
    		/* css 스타일 변경 */
    		/* 
    		하이픈 (-) 을 포함하는 스타일 속성은 하이픈을 제외하고 뒷 글자를 대문자로 작성
    		ex : 스타일 background-color >> 자바스크립트  backgroundColor
    		*/
    		document.getElementById('first_container').style.backgroundColor = '#ff00ff';
    		document.getElementById('first_container').style.height = '30%';
    		document.getElementById('first_container').style.top = '20%';
    	};
    	
    	/* 결과 확인 alert 팝업창 */
    	function check_result(data) {
    		alert(data);
    	}
    	
    </script>

</head>

<!-- body 몸체 부분 -->
<body>

<!-- 콘텐츠 div 레이아웃 -->
<div id = "first_container" onclick="call_event();">
	<p id = "first_container_txt">안녕하세요</p>
</div>

</body>

</html>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

[JS 호출 (전)]​

​

[JS 호출 (후)]​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[CSS 요소 설명]

1. font-family : 폰트 표시 형태 스타일 지정

2. width : 가로 크기 지정

3. height : 세로 크기 지정

4. margin : 마진 (외부) 여백 설정

5. padding : 패딩 (내부) 여백 설정

6. border : 테두리 (선) 표시 설정

7. background : 배경 표시 설정

8. overflow : 범위를 벗어난 콘텐츠 표시 여부 설정 (스크롤)

9. float : 정렬 기준 설정

10. div : 레이아웃 표시 블록

11. position : 레이아웃 위치 정렬 설정

12. display : table; : 해당 div 영역을 테이블 형식으로 설정

13. display : table-cell; : 해당 div 영역을 테이블 셀 형식으로 설정

14. vertical-align : middle; : 테이블 셀 영역에서 텍스트 수직 정렬 설정

15. font-size : 3vw; : 가로 크기 기준으로 반응형 텍스트 폰트 사이즈 설정

​

​

[CSS 세부 설명]

1. width : 100%; : 가로 크기를 (%)로 지정 - 반응형 설정

2. margin : 0 auto; : 중앙 배치 설정

3. border : none; : 테두리 스타일 없음 설정

4. background-color : #343d46; : rgb 색상을 사용해 배경색 지정

5. display : table; : 해당 div 영역을 테이블 형식으로 설정

6. display : table-cell; : 해당 div 영역을 테이블 셀 형식으로 설정

7. vertical-align : middle; : 테이블 셀 영역에서 텍스트 수직 정렬 설정

8. font-size : 3vw; : 가로 크기 기준으로 반응형 텍스트 폰트 사이즈 설정

*/

​

​

/*

[JS 요약 설명]

1. function : 함수 형태를 정의할 때 사용합니다

2. document.getElementById : 레이아웃에서 특정 태그 값 요소를 찾습니다

3. innerText : 특정 태그 값 텍스트 확인 및 설정합니다

4. style : 자바스크립트에서 css 속성을 변경할 때 사용합니다

*/

/* =========================== */

​

 

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

23. (html/css/javascript/jquery) 배경 색상 그라데이션 적용 실시 - background linear gradient  (0) 2021.06.01
22. (html/css/javascript/jquery) scrollbar 사용해 웹 브라우저 스크롤 바 스타일 설정 실시 - 스크롤 바 히든 및 정상 스크롤 동작 처리  (0) 2021.06.01
20. (html/css/javascript/jquery) 마우스 hover 올림 , 마우스 커서 cursor 스타일 정의 실시  (0) 2021.06.01
19. (html/css/javascript/jquery) 자바스크립트 function 함수 , window.onload 사용해 클릭 이벤트 정의 실시  (0) 2021.05.31
18. (html/css/javascript/jquery) border-radius 사용해 테두리 둥글게 만들기 및 opacity 사용해 레이아웃 투명도 조절 실시  (0) 2021.05.31
'FrontEnd' Related Articles more
Comments