1. div 태그 설명
1) 웹 페이지의 배치(layout)를 담당하는 태그이다.
2) 블럭 모드이다.
3) 일반적으로 다른 요소들을 담을 수 있는 컨테이너의 종류 중에 하나이다.
* 컨테이너 : 다른 요소를 자식으로 가지고 있다.
2. javascript 코딩 맛보기
- js는 대소문자를 구분한다.
- document.location="이동할 주소url";
- js 함수 만드는 형식)
<script>
function 함수명() {
코딩...
}
</script>
- var 키워드 : 변수 선언시 사용하는 키워드
3. jQuery 코딩 맛보기
- jquery.js 라이브러리를 설치해야 하는데 다운을 받아서 사용할 수도 있고 Using jQuery with a CDN으로 다운을 받지 않고도 사용 가능하다.
오늘 수업에서는 맛보기 정도라 script 태그를 이용하여 사용하였다.
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
위 사이트에 접속하여 Using jQuery with a CDN 클릭 후 Google CDN 클릭 jQuery 3.x snippet: 코드를 복사하여 <head> 태그 안에 붙여넣어 사용하였다.
[ 복사한 코드 ]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
--------------------------------------------------------------------
- click() => jquery method(메서드)
- css() => jquery method(메서드)
- first() => jquery method(메서드)
- last() => jquery method(메서드)
- $("태그명")
- $("#아이디명")
- $("#아이디명").click(함수 호출) -> id명을 가진 버튼을 클릭하면 함수를 호출하겠다..
- $("#아이디명") => jquery object(객체)
- $("tagName").css("속성명", "속성값")
* 예제4번 참고
* 문제2번 참고
--------------------------------------------------------------------
22.05.18 내용 추가
******* jQuery 코딩은 body 닫기태그 바로 위에 위치시켜라 *******
예제1) div 태그 사용X, 버튼을 클릭하여 span 태그를 숨기거나 보이게하기 - html과 js 코딩 사용
<button onclick="span_hide();">숨기기(hide)</button>
onclik="함수명" 으로 설정한 후 함수명에 해당하는 함수를 js 코딩으로 생성하였다.
각 span 태그에 id 속성을 설정한 뒤 함수에는 각 id에 해당하는 요소의 스타일의 display를 none으로 설정하거나 inline으로 설정하였다.
document.getElementById("아이디명").style.display="none";
document.getElementById("아이디명").style.display="inline";
<코드>
<body>
<button onclick="span_hide();">숨기기(hide)</button>
<button onclick="span_show();">보이기(show)</button>
<script type="text/javascript">
// javascript 코딩
function span_hide(){
// document.location="이동할 주소url";
document.getElementById("sp01").style.display="none";
document.getElementById("sp02").style.display="none";
document.getElementById("sp03").style.display="none";
document.getElementById("sp04").style.display="none";
document.getElementById("sp05").style.display="none";
document.getElementById("sp06").style.display="none";
document.getElementById("sp07").style.display="none";
}
function span_show(){
// document.location="이동할 주소url";
document.getElementById("sp01").style.display="inline";
document.getElementById("sp02").style.display="inline";
document.getElementById("sp03").style.display="inline";
document.getElementById("sp04").style.display="inline";
document.getElementById("sp05").style.display="inline";
document.getElementById("sp06").style.display="inline";
document.getElementById("sp07").style.display="inline";
}
</script>
<br><br>
<span id="sp01">유재석</span> <!-- id는 중복값 X -->
<span id="sp02">강호동</span>
<span id="sp03">김혜수</span>
<span id="sp04">황광희</span>
<span id="sp05">김우빈</span>
<span id="sp06">조인성</span>
<span id="sp07">이효리</span>
</body>
<결과>
숨기기를 누르면 span 태그들이 숨겨지고 보이기를 누르면 다시 나타나진다.
* 아래에 나오는 예제들의 결과도 다 동일하다.
예제2) div 태그 사용, 버튼을 클릭하여 span 태그를 숨기거나 보이게하기 - html과 js 코딩 사용
예제 1번과 코딩은 동일하며, 다른 부분은 span 태그들을 div 태그로 감싼 뒤 div 태그에 id를 설정한 후 함수에 아래 코딩을 div 태그 아이디명만 주는 한 줄 코딩만 하였다.
document.getElementById("아이디명").style.display="none";
document.getElementById("아이디명").style.display="inline";
<코드>
<body>
<button onclick="span_hide();">숨기기(hide)</button>
<button onclick="span_show();">보이기(show)</button>
<script type="text/javascript">
function span_hide(){
document.getElementById("box01").style.display="none";
doc
}
function span_show(){
document.getElementById("box01").style.display="inline";
}
</script>
<br><br>
<div id="box01">
<span>유재석</span>
<span>강호동</span>
<span>김혜수</span>
<span>황광희</span>
<span>김우빈</span>
<span>조인성</span>
<span>이효리</span>
</div>
</body>예제3) div 태그 사용X, 버튼을 클릭하여 span 태그를 숨기거나 보이게하기 - html과 js코딩 사용
<코드>
var spans = document.getElementsByTagName("span");
> var spans : sapns 변수를 선언하겠다.
> spans 변수는 스팬 태그의 요소들을 가져와 변수에 담겠다.
for (var i = 0; i < spans.length; i++) {
spans[i].style.display = "inline";
}
> for문을 돌리겠다.
> spans.length : spans 변수의 길이(갯수)만큼 돌리겠다.
> spans 변수의 i번 째의 요소의 스타일의 display를 inline으로 설정하겠다.
<button onclick="span_hide();">숨기기(hide)</button>
<button onclick="span_show();">보이기(show)</button>
<script type="text/javascript">
function span_hide(){
// var 키워드 : 변수 선언시 사용하는 키워드
var spans = document.getElementsByTagName("span");
// alert(spans.length);
for (var i = 0; i < spans.length; i++) {
spans[i].style.display = "none";
} // for
}
function span_show(){
var spans = document.getElementsByTagName("span");
for (var i = 0; i < spans.length; i++) {
spans[i].style.display = "inline";
} // for
}
</script>
<br><br>
<span>유재석</span>
<span>강호동</span>
<span>김혜수</span>
<span>황광희</span>
<span>김우빈</span>
<span>조인성</span>
<span>이효리</span>
</body>예제4) div 태그 사용X, 버튼을 클릭하여 span 태그를 숨기거나 보이게하기 - html과 jquery 코딩 사용
<코드>
- js와 다르게 button 태그에 id 속성을 준다.
- $("#아이디명").click(함수 호출) : 아이디명에 해당하는 것을 클릭하면 함수를 호출하겠다.
- $("태그").css("display", "none") : 태그에 해당하는 display를 none으로 설정하겠다.
<body>
// js와 다르게 button 태그에 id 속성을 준다.
<button id="btnHide">숨기기(hide)</button>
<button id="btnShow">보이기(show)</button>
<script type="text/javascript">
// document.getElementsById("btnHide") 이렇게 코딩하지않고..
// $("#아이디명").click(함수 호출) -> 버튼을 클릭하면 함수를 호출하겠다..
// $("#아이디명") => jquery object(객체)
// click() => jquery method(메서드)
// 숨기기 함수
$("#btnHide").click( function() {
// var spans = document.getElementsByTagName("span");
// css() : jquery method
// $("tagName").css("속성명", "속성값")
$("span").css("display", "none");
} );
// 보이기 함수
$("#btnShow").click( function() {
$("span").css("display", "inline");
});
</script>
<br><br>
<span>유재석</span>
<span>강호동</span>
<span>김혜수</span>
<span>황광희</span>
<span>김우빈</span>
<span>조인성</span>
<span>이효리</span>
</body>22.05.18 내용 추가
문제1) div 태그로 목록 태그를 일자로 나열하기
<코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<style type="text/css">
div:nth-child(1){
float: left;
overflow: hidden;
padding: 10px;
margin: 10px;
}
div:nth-child(2){
float: inherit;
overflow: hidden;
padding: 10px;
margin: 10px;
}
</style>
<title>2022. 5. 17. - 오후 11:09:15</title>
</head>
<body>
<!-- div 태그로 배치하기 -->
<div>
<ul>정렬되지 않은 HTML 목록:
<li>안건</li>
<li>안건</li>
<li>안건</li>
<li>안건</li>
</ul>
</div>
<div>
<ol>순서가 지정된 HTML 목록:
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
<li>네 번째 항목</li>
</ol>
</div>
<!-- 테이블로 배치하기 -->
<!--
<table style="width:100%">
<tr>
<td>
<ul>정렬되지 않은 HTML 목록:
<li>안건</li>
<li>안건</li>
<li>안건</li>
<li>안건</li>
</ul>
</td>
<td>
<ol>순서가 지정된 HTML 목록:
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
<li>네 번째 항목</li>
</ol>
</td>
</tr>
</table>
-->
</body>
</html>
<결과>
문제2) button 태그 + js / jq 코딩으로 숨기기, 보이기
<javascript 코딩이 포함된 코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div{
background-color: black;
color: white;
padding: 10px;
}
p:hover{
color: red;
}
</style>
<title>2022. 5. 18. - 오전 10:42:55</title>
</head>
<body>
<script>
function div_hide() {
// console.log("숨기기 버튼 클릭됨.") // F12 개발자도구 console 탭에서 버튼 클릭횟수 확인 가능
// document.getElementById("box").style.display="none";
var demo = document.getElementById("box");
demo.style.display ="none";
}
function div_show() {
document.getElementById("box").style.display="block";
}
</script>
<button onclick="div_hide();">숨기기</button>
<button onclick="div_show();">보이기</button>
<div id="box">
<!-- lorem1 무작위 한단어, lorem 텍스트 주루루룩 -->
<h2>Lorem.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut doloribus blanditiis earum iure soluta quaerat veniam libero aperiam at eaque nulla impedit aliquid molestias eius maxime quae accusamus placeat et.</p>
<p>Atque asperiores officia error saepe ex perspiciatis tempora molestias non inventore dolores sit labore vitae aspernatur laudantium perferendis praesentium sed magnam illum in molestiae incidunt voluptates similique recusandae illo eveniet.</p>
</div>
</body>
</html><jQuery 코딩이 포함된 코드>
button 태그에 id명을 주지 않았을 경우 태그명으로 가지고 와야한다.
- jQuery에서 첫 번째 버튼 태그를 가져오는 메서드로 first()가 있다.
$("button").first().click(function(){
- 두 번째 버튼 태그를 가져오는 방법으로는 3가지가 있다.
$("button:nth-child(2)").last().click(function(){ => 2번째 자식인 button 태그
$("button:last-of-type").last().click(function(){ => 마지막 button 태그
$("button").last().click(function(){ => 마지막 button 태그(jQuery 메서드)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div{
background-color: black;
color: white;
padding: 10px;
}
p:hover{
color: red;
}
</style>
<title>2022. 5. 18. - 오전 10:42:55</title>
</head>
<body>
<button>숨기기</button>
<button>보이기</button>
<div id="box">
<!-- lorem1 무작위 한단어, lorem 텍스트 주루루룩 -->
<h2>Lorem.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut doloribus blanditiis earum iure soluta quaerat veniam libero aperiam at eaque nulla impedit aliquid molestias eius maxime quae accusamus placeat et.</p>
<p>Atque asperiores officia error saepe ex perspiciatis tempora molestias non inventore dolores sit labore vitae aspernatur laudantium perferendis praesentium sed magnam illum in molestiae incidunt voluptates similique recusandae illo eveniet.</p>
</div>
<script>
// ******* jQuery 코딩은 body 닫기태그 바로 위에 위치시켜라 ******* [암기]
// $("#아이디명")
// $("태그명")
// first() => jQuery method
// 버튼 중 첫번 째 버튼을 가져와서 클릭 이벤트를 하면 함수 호출
// 이름이 없는 함수는 익명 함수
$("button").first().click(function(){
// window.alert("OK")
$("#box").css("display", "none");
});
// 아래 3가지 방법으로 사용가능 ***
$("button:nth-child(2)").last().click(function(){
//$("button:last-of-type").last().click(function(){
// $("button").last().click(function(){
// window.alert("OK")
$("#box").css("display", "block");
});
</script>
</body>
</html>
<결과>
'TIL > Web(HTML, CSS, JS, jQuery)' 카테고리의 다른 글
| [SIST] 자바스크립트(JavaScript) 자동완성 플러그인 "Tern" 설치하기 (0) | 2022.05.17 |
|---|---|
| [SIST] 이클립스 Emmet(zencoding) 설치하기 + Emmet 사용법 (0) | 2022.05.17 |
| [SIST] Web_HTML_days04/05_Navigation Menu/class 속성 (0) | 2022.05.17 |
| [SIST] Web_HTML_days04_목록(list) 태그(ol, ul, li, dl, dt, dd) (0) | 2022.05.17 |
| [SIST] Web_HTML_days03_<table>태그 = 테이블 (0) | 2022.05.17 |