학원/HTML5
10/31 32-2 [HTML] SPAN
도원결의
2022. 10. 31. 18:26
SPAN
스팸 말고 스팬 !!
그냥 기본 텍스트랑 겉보기엔 크게 다르지 않음심지어 마크업기능이 없어서 글자 꾸미기도 어려움근데 이걸 왜 씀?자바스크립트랑 CSS로 span이 감싸져 있는 부분을 활용(제어)할 수 가있기 때문에 많이 사용한다!결국 나중에 자바스크립트로 쓰려고 sapn 으로 감싸주는 것임
우선 바디부분에다가 구현 할 것들을 작성 해 준다
자바스크립트로 이벤트 구현해 줄것들은 span으로 미리 감싸준다. 이 때 이벤트로 구현 할 게 한 두가지가 아닐꺼 아님? 다른 것들 과 구분하기 위해서 마크 ! 표시를 해줘야 하는데 그게 (id = " 표시! ") 요걸로 연결 해 놈!! 요렇게 해 놓고 나중에 스크립트태그 안 에서 span = document.querySelector(' #표시 !' ); #으로 소환하면 됨 !
CSS에서 활용하는 건 지금 정리하려는 주 목적이 아니니까 대충 해놓고 넘어갈거얌
이런게 있었구나 하고 기억만 해 놓자!
구현 전 HTML 문서 코드
<body>
기본 텍스트
<h2><span>태그</h2>
<span>기본 텍스트</span> // <!--겉보기에는 span 으로 감싸나 안감싸나 똑같아 보임.---->
<h3>자바스크립트에서 활용</h3>
오늘의 첫 수업은 <span id="text">JavaScript</span> 입니다.<br/>
여기에 <span id="image"> 이미지</span> 표시하기<br/>
아래에 구구단 표시하기<br/> <!-- 요건 나중에 할 거---->
<fieldset>
<legend>버튼들</legend>
<button onclick="toggleText()">텍스트 변경</button>
<button onclick="SetImage()">이미지 교체</button>
<button>구구단 표시</button>
</fieldset>
<h3>CSS에서 활용</h3>
오늘은 <Span class="monday">월요일</Span> 입니다. <br/>
<Span class="html5">HTML5</Span> 수업입니다.
</body>
script 태그 안에다가 위해 span 해논것들 이벤트로 구현 해 보자!
+toggle 이벤트
스위치 처럼 껐다 켰다 반복하는 이벤트 라고만 먼저 알아두자!
버튼 누르면 자바스크립트가 영문자가 되었다가 한글로 되었다가 바뀐다
+SetImage
버튼 누르면 이미지 파일 생성됨 !
+구구단은 제어문 배우고 나서 구현 할 것! (추가 완료 !!)
<script>
// 토글
var toggle = false;
function toggleText(){
var span = document.querySelector('#text'); // CSS 이용! 아이디가 text인 거 찾아와서 적용
if(!toggle)
span.textContent = "자바스크립트";
else
span.textContent = "JavaScript";
toggle = !toggle;
}
// 이미지
var SetImage = function(){
var span = document.querySelector('#image'); // CSS활용 아이디가 image인것 찾아와
//방법1
//span.innerHTML="<img src='./Images/button.jpg' alt='이미지'/>"; // 찾아온 곳에 innerHTML을 적용해서 이미지를 넣을 것임
//방법2 - DOM API
var imgNode = document.createElement('img'); // 돔 사용 이 의미는 <img > 이거고
//imgNode.setAttribute('src', './Images/button.jpg'); // src속성 입히고 의미가 <img src='./Images/button.jpg'> 여기까지고
//imgNode.setAttribute('alt', '이미지'); // alt속성 입히고 의미가 <img src='./Images/button.jpg' alt='이미지'/> 여기까지인거 !!
imgNode.src = './Images/button.jpg'; // 더 간편하게 코드작성 하는 법
imgNode.alt = '이미지'; //노드 연결 하면 .으로 불러오는게 가능하군!!
span.appendChild(imgNode); // 노드에 추가가면 끝 !
};
</script>
//+구구단 추가!
function printGugudan(){
var span = document.querySelector('#gugudan');
var table ="<table style='text-align:center;width:700px; background-color: black; border-spacing: 1px; width: 50; height: 50;'>"
for( i=1 ; i<=9 ; i++ ){
table += "<tr style = 'background-color:white';>"; // 테이블에 누적해서 넣음
for( k=2 ; k<=9 ; k++){
table +="<td>"+k+" * "+i+" = "+k*i+"</td>";
}
table += "</tr>"; // 마찬가지로 테이블에 누적해서 넣음
}
table += "</table>" ; // 최종 테이블 넣음
span.innerHTML=table; // span 테그에 다가 내가 만들어논 HTML table style속성을 적용 시키겠다 !
}
<style>
.monday{
font-size:.8em;
color: gray;
}
.html5{
font-size: 1.8em;
color: rgb(35, 187, 73);
font-weight: bold;
}
</style>이벤트 구현 후
기본 텍스트<span>태그
기본 텍스트자바스크립트에서 활용
오늘의 첫 수업은 JavaScript 입니다.여기에 이미지 표시하기
아래에 구구단 표시하기
CSS에서 활용
오늘은 월요일 입니다.HTML5 수업입니다.
