'분류 전체보기' 카테고리의 글 목록 (7 Page)

요소의 생성 및 삽입 append사용, removeAttr 사용 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>이미지 자동 삽입</h2>
<p>클릭시 이미지 삭제됩니다.</p>
<script type="text/javascript">
$(document).ready(function() {
	for(i=1; i<=9; i++){ //.attr().attr()연달아 사용할 수 있다.
		let img = $("<img>").attr({'src': './image/photo_'+i+'.jpg',
							"class":"photo"});
	$("body").append(img);
	}
	$('.photo').click(function() {
		$(this).removeAttr("src");
	})
});
</script>
</body>
</html>

설명

우선 이미지명이 photo_1~9까지의 이미지가 9개가 있다고 가정한다.

연속되는 이미지 명이기 때문에 for문을 사용하여 img tag에 scr값과 class를 추가하여 body tag 밑에 생성한다.

클릭 시 removeAttr()함수를 사용하여 scr를 삭제한다.

removeAttr() : 선택된 요소의 속성을 삭제한다.

'IT > JavaScript' 카테고리의 다른 글

[jQuery] 여러가지 함수 사용 예제 (0)	2021.06.11
[jQuery] td elemant에 문자열을 치환하도록 하라./이름을 마우스 클릭하면 alert창에 이름이 출력되도록 하라 (0)	2021.06.11
[jQuery] 속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기 / 사용자 지정 태그 사용예시 (0)	2021.06.11
[jQuery] 이미지를 클릭 시 이미지 변경 예시 / hover함수 사용예시 (1)	2021.06.11
[jQuery] mouseover, mouseout, css 사용예시 / attr, addClass, removeClass사용예시 (0)	2021.06.11

속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기

<img alt="성 자비에르 성당(외부) 사진입니다."  src="./image/img01.jpg">
<img alt="성 자비에르 성당(내부) 사진입니다."  src="./image/img02.jpg">
<img alt="낡은건물 사진입니다."  src="./image/img03.jpg">
<img alt="가로등 사진입니다."  src="./image/img04.jpg">
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
	$("img").click(function() {
		let picname = $(this).attr("alt");
		alert(picname);
	});
});
</script>

설명

alt의 값에 사진의 제목을 넣고, 클릭할 때 경고창에 alt값이 출력되도록 하였다.

하지만, alt의 사용은 이미지가 없을 경우 나오는 문구이기 때문에 좋지 못한 예제이다.

사용자 지정 태그 사용예시

<img alt="" src="image/img01.jpg" picname="성 자비에르 성당 (외관)">
<img alt="" src="image/img02.jpg" picname="성 자비에르 성당 (내관)">
<img alt="" src="image/img03.jpg" picname="은행">
<img alt="" src="image/img04.jpg" picname="가로등">
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function () {
   $("img").click(function () {
      let picname = $(this).attr("picname");
      alert(picname);
   });
});
</script>

설명

'picname'라는 태그를 지정하여 값에 사진의 제목을 넣었다.

위 예제와 비교했을 때 jquery구문에서 변경된 건 attr("picname")이다.

'IT > JavaScript' 카테고리의 다른 글

[jQuery] td elemant에 문자열을 치환하도록 하라./이름을 마우스 클릭하면 alert창에 이름이 출력되도록 하라 (0)	2021.06.11
[jQuery] 요소의 생성 및 삽입 append사용 / removeAttr 사용 예시 (0)	2021.06.11
[jQuery] 이미지를 클릭 시 이미지 변경 예시 / hover함수 사용예시 (1)	2021.06.11
[jQuery] mouseover, mouseout, css 사용예시 / attr, addClass, removeClass사용예시 (0)	2021.06.11
[jQuery] jQuery에서 요소 추가하기/append() (0)	2021.06.11

이미지를 클릭 시 이미지 변경 예시

<h1>room image1</h1>
<img alt="" src="./image/p001.jpg" id="pic">
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script type="text/javascript">
$(function () {
	let num = 0;
	let imageName = ["p001", "p002", "p003", "p004"];
	$("#pic").click(function() {
		if(num == 3) num=0;
		else 	     num++;	
		$(this).attr("src","./image/"+ imageName[num]+".jpg");
	});
});	
</script>

설명

click : 요소를 클릭했을 때 이벤트가 발생하는 함수

이미지를 클릭할 때마다 이미지가 바뀌게 되는 예제이다.

숫자형 변수에 0으로 초기화해주고, 배열에 4장의 이미지를 준비한다.(각 배열의 값은 이미지명으로 초기화해준다.)

id로 접근하여 클릭을 했을 시 함수를 실행하여 준다.

클릭할 때마다 num은 +1씩 증가하고 num이 3이 됐을 때 0으로 초기화를 한다.

this는 #pic을 의미하며 attr() 함수를 사용하여 src의 값을 클릭할 때마다 바꾸어준다.

hover함수 사용예시

<h1>room image2</h1>
<img alt="" src="./image/p001.jpg" id="pic">
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script type="text/javascript">
$("#pic").hover(
	function () { // mouseover
		$(this).attr("src","./image/p002.jpg");
	},
	function () { // mouseout
		$(this).attr("src","./image/p001.jpg");
	}
);
</script>

설명

hover() : 마우스가 요소에 올라왔을 때, 벗어났을 때 이벤트가 발생하는 함수

첫 번째 function () == mouseover (올라왔을 때)

두 번째 function () == mouseout (벗어났을 때)

'IT > JavaScript' 카테고리의 다른 글

[jQuery] 요소의 생성 및 삽입 append사용 / removeAttr 사용 예시 (0)	2021.06.11
[jQuery] 속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기 / 사용자 지정 태그 사용예시 (0)	2021.06.11
[jQuery] mouseover, mouseout, css 사용예시 / attr, addClass, removeClass사용예시 (0)	2021.06.11
[jQuery] jQuery에서 요소 추가하기/append() (0)	2021.06.11
[jQuery] button tag 접근 예시/input radio, checkbox 접근 예시 (0)	2021.06.11

mouseover, mouseout, css 사용예시

<table border="1">
<col width="50"><col width="200"><col width="150">

<tr>
	<th>번호</th><th>이름</th><th>나이</th>
</tr>
<tr class="cls">
	<th>1</th><td>홍길동</td><td>24</td>
</tr>
<tr class="cls">
	<th>2</th><td>성춘향</td><td>19</td>
</tr>
<tr class="cls">
	<th>3</th><td>일지매</td><td>35</td>
</tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$("tr.cls").mouseover(function () {
		// Java Script
//		document.getElementsByClassName("cls").style.backgroundColor;
		
		$(this).css('background', '#00ff00');
	});
	$("tr.cls").mouseout(function () { 
		$(this).css('background', '#fff');
	});

	$("td").click(function() {
		let val = $(this).text();
		alert(val);
	});
});	
</script>

설명

위 예제는 테이블에 마우스를 가져다 놓으면 배경색이 바뀌고, 마우스를 테이블 밖으로 빼면 배경색이 원복이 된다. 클릭 시에 클릭한 부분의 데이터가 alert에 출력이 된다.

mouseover() : 마우스가 포커스 안으로 들어왔을 때 이벤트가 발생되는 함수이다.

mouseout() : 마우스가 포커스 밖으로 나갔을 때 이벤트가 발생되는 함수이다.

css() : CSS 속성 값을 가져오거나 추가한다.

형식

setter

css(property, value)

css(property, value).css(property, value)

css({property : value, property : value})

getter

$(접근할 태그명,id명,class명 등등).css(property)

attr, addClass, removeClass사용예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.back{
	color: #ffff00;
}
</style>
</head>
<body>
<p>p tag</p>

<button type="button" id="btn">버튼</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">

$("#btn").click(function () { 

	$('p').css('background' , '#0000ff').css('color', 'white'); 
	$('p').text('여기가 p태그');

	// getter
	let color = $('p').css('background');
	let text = $("p").text;
	alert(color);
	
	$('p').attr("id", "pid");
	let id = $('p').attr("id");
	
	$('p').attr("class", "back");
//	$('p').addClass("back"); //위와 동일

//	$('p').attr("class", ""); 
	$("p").removeClass("back"); //위와 동일

});
</script>
</body>
</html>

설명

위 예제는 버튼 클릭시 p tag의 배경색과 글자색, 문자열이 변경 그리고 id명과 class명 추가, 삭제를 담은 예시이다.

(id값을 태그명으로 추가하는건 좋은예시가 되지못한다. 중복우려..)

attr() : 속성자체를 가져오거나 추가한다.

형식

$(추가할 요소명).attr(추가할 속성,값)

$(추가할 요소명).attr(추가할 속성,값).attr(추가할 속성,값)

$(추가할 요소명).attr({추가할 속성:값, 추가할 속성:값})

addClass() : 클래스를 추가해주는 함수이다. attr로 대체 가능하다.

removeClass() : 클래스를 삭제해주는 함수이다. attr로 대체 가능하다.

'IT > JavaScript' 카테고리의 다른 글

[jQuery] 속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기 / 사용자 지정 태그 사용예시 (0)	2021.06.11
[jQuery] 이미지를 클릭 시 이미지 변경 예시 / hover함수 사용예시 (1)	2021.06.11
[jQuery] jQuery에서 요소 추가하기/append() (0)	2021.06.11
[jQuery] button tag 접근 예시/input radio, checkbox 접근 예시 (0)	2021.06.11
[jQuery]jQuery와 JavaScript 차이점/ jQuery 형식/ jQuery 태그 접근방법/html()와 text()차이점 (0)	2021.06.10

jQuery에서 요소 추가하기

<button type="button">태그 추가</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$("button").click(function() {
	
	let txt = "<p>p 태그 추가함</p>";
	$("body").append(txt); // 버튼 밑에 추가됨
	
	let js = document.createElement("h2");
	js.innerHTML = "h2 태그 추가함";
	$("body").append(js); // jquery문법
	
//	let jqu = $("<p></p>").html("jquery p태그 추가"); // 정석
	let jqu = $("<p>").html("jquery p태그 추가"); 
	$("body").append(jqu);
});

</script>

설명

버튼을 클릭할 때마다 태그가 추가되는 코드이다.

append()

형식 : $(선택한 요소명).append(추가할 요소명)

요소를 추가해주는 함수이다.

선택한 요소의 끝에 요소를 추가해준다.

가장 쉬운방식은 text로 추가하는 방식이다. 하지만 명확하지가 않다.

"<p>p 태그 추가함</p>"

java script 추가

위 코드의 접근은 java script를 사용하였고 추가는 jquery문법을 사용하였다.

jquery추가

$("<태그명></태그명>").html("문자열") 이 방법이 정석이지만,

$("<태그명>").html("문자열") 이 방식도 가능하다.

'IT > JavaScript' 카테고리의 다른 글

[jQuery] 이미지를 클릭 시 이미지 변경 예시 / hover함수 사용예시 (1)	2021.06.11
[jQuery] mouseover, mouseout, css 사용예시 / attr, addClass, removeClass사용예시 (0)	2021.06.11
[jQuery] button tag 접근 예시/input radio, checkbox 접근 예시 (0)	2021.06.11
[jQuery]jQuery와 JavaScript 차이점/ jQuery 형식/ jQuery 태그 접근방법/html()와 text()차이점 (0)	2021.06.10
[jQuery] jQuery 정의/juery.min.js 소스 구하기, 파일 다운로드/jquery.min.js 적용방법 (0)	2021.06.10

button tag 접근 예시

<button type="button" id="btn1">클릭</button>
<button type="button" id="btn2">클릭</button>
<button type="button" id="btn3">클릭</button>

<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script type="text/javascript">

$("button").click(function () {
	alert("태그명으로 버튼 클릭");
});
$("#btn1").click(function () {
	alert("id명으로 버튼 클릭");
});
$("#btn2").on("click", function (){
	alert("[on함수이용] id명으로 버튼 클릭 ");
});

$("#btn3").click(btnProc);
function btnProc() {
	alert("[btnProc] id명으로 버튼 클릭");
}
</script>

설명

button을 디자인할 때 class를 사용한다. 이벤트는 id로 처리한다.

click(function () : 클릭 시 function ()를 실행한다.

on("click", function ()) : on()함수 이용, 클릭 시 function ()를 실행한다.

click(btnProc); : 클릭시 btnProc() 함수를 실행한다.

<input type="radio"> 접근 예시

<ul>
	<li><input type="radio" name="radioTest" value="apple" checked="checked">사과</li>
	<li><input type="radio" name="radioTest" value="pear">배</li>
	<li><input type="radio" name="radioTest" value="orange">오렌지</li>
</ul>

<button type="button" id="choice">선택</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#choice").click(function() {
		let rVal = $("input[name='radioTest']:checked").val();
		alert(rVal);
		
		$("input[name='radioTest']").val(["orange"]);
	});
});
</script>

설명

setter

$("input[name='radioTest']").val(["orange"]); : 버튼을 누르면 orange가 선택되어진다.

getter

$("input[name='radioTest']:checked").val() : 체크된 값을 가져온다.

<input type="checkbox"> 접근 예시

<input type="checkbox" id="ch">그림그리기
<br><br>
<button type="button" id="btn">체크</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	$("#btn").click(function() {
		let check = $("#ch").is(":checked");
		// 위와 동일
//		let check = $("input:checkbox[id='ch']").is(":checked");	
		alert(check);
		

		$("#ch").attr("checked", "checked");
		// 위와 동일    
//		$("#ch").prop("checked", true);
	});
});


</script>

설명

checkbox 독립적이다(다 골를 수도 있고 하나만 고를 수도 있다 / radio와 다른 점)

setter

$("#ch").attr("checked", "checked")

$("#ch").prop("checked", true)

둘 다 실행결과는 동일하다. 체크박스를 체크해준다.

getter

$("#ch").is(":checked")

$("input:checkbox[id='ch']").is(":checked")

둘 다 실행결과는 동일하다. 체크박스가 체크가 되어있으면 true, 체크되지 않으면 false를 반환한다.

'IT > JavaScript' 카테고리의 다른 글

[jQuery] mouseover, mouseout, css 사용예시 / attr, addClass, removeClass사용예시 (0)	2021.06.11
[jQuery] jQuery에서 요소 추가하기/append() (0)	2021.06.11
[jQuery]jQuery와 JavaScript 차이점/ jQuery 형식/ jQuery 태그 접근방법/html()와 text()차이점 (0)	2021.06.10
[jQuery] jQuery 정의/juery.min.js 소스 구하기, 파일 다운로드/jquery.min.js 적용방법 (0)	2021.06.10
[Html+JavaScript] NodeList/getElementsByTagName (0)	2021.06.08

jQuery와 JavaScript 차이점

	javascript	JQuery
input태그 등 접근시	value	val()
일반태그 접근시	innerHTML	html()
일반태그 접근시	innerHTML	text()

JavaScript getter와 setter 예시

  document.getElementById("id명").innerHTML = "abc123"; // setter 
  let val2 = document.getElementById("id명").innerHTML // getter

jQuery getter와 setter 예시

    $("p").html("hello <b>p<b> tag"); // setter
    let ptag = $("p").html();	// getter

jQuery 형식 예시

 	$(tag명, id, class, name).핸들러 함수(매개변수)	onclick(JS)

jQuery 태그 접근방법 예시

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
</head>
<body>
<p id="demo">p tag id=dome</p>
<h3 class="cls">h3 tag class=cls</h3>
<p class ="cls">p tag class=cls</p>

<script type="text/javascript">
$(document).ready(function () {
	// id로 접근하기
	 let demo = $("#demo").html(); //getter

	 $("#demo").text("hello p tag demo"); //setter;
	 
	 // class로 접근하기
	 $(".cls").text("이 element의 class는 cls입니다");
     
	 // 태그명.class로 접근하기
	 $("p.cls").text("p tag class cls");     
	 
	 //태그명으로 접근하기
	 $("p").text("p 태그입니다");
	 
	 // 위 코드와 동일 java script : 3줄
	 let arrp = document.getElementsByTagName("p");
	 for(i=0; i<arrp.length; i++){
		arrp[i].innerHTML = "이것은 p태그입니다"; 
	 }

});
</script>
</body>
</html>

설명

접근방법은 style tag와 비슷하다.

id = #id명

class = .class명

tag = tag명

마지막쯤 자바스크립트 코드를 보면 제이쿼리는 1줄이면 실행되는 것을 자바스크립트는 3줄이나 작성해야 실행이 된다. 제이쿼리가 훨씬 간편하다!

$(document).ready(function ()

웹브라우저에서 이문서를 다 읽고 난 다음에 함수를 실행해라!

반드시 사용하는 건 아니다.

document : html 문서 (정적)

html() vs text() 예시

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
</head>
<body>
<p id="demo1">p tag id=dome</p>
<p id="demo2">p tag id=dome</p>
<script type="text/javascript">
 $(document).ready(function () {
  	$("#demo1").html("hello <b>p<b> tag");
	$("#demo2").text("hello <b>p<b> tag");
 });
</script>
</body>
</html>

실행화면

설명

두 가지 다 일반 태그의 문자 값을 바꿔주는지만, html()은 <b>를 태그로 취급하고, text()는 <b>를 문자열로 취급하여 작성한 그대로 실행되는 것을 볼 수 있다.

'IT > JavaScript' 카테고리의 다른 글

[jQuery] jQuery에서 요소 추가하기/append() (0)	2021.06.11
[jQuery] button tag 접근 예시/input radio, checkbox 접근 예시 (0)	2021.06.11
[jQuery] jQuery 정의/juery.min.js 소스 구하기, 파일 다운로드/jquery.min.js 적용방법 (0)	2021.06.10
[Html+JavaScript] NodeList/getElementsByTagName (0)	2021.06.08
[Html+JavaScript] DOM/childNodes/appendChild/insertChild/insertBefore/removeChild/createElement/createTextNode (0)	2021.06.08

JQuery란?

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리

Java Script를 경량화, 간략화한 것이다

요즘은 jQuey보다 다른걸 더 많이 사용한다.

중요한 거 1가지.. == Ajax (비동기 통신)

JQuery 대신 요즘 사용하는 것

react, vue : 자바스크립트로 구현해놓은 프레임워크, 엔진이다.

jquery.min.js 소스 구하기, 파일 다운로드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="./jquery/jquery.min.js"></script>

<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>

jQuey를 사용하기 위해선 head tag 안에 위와 같은 링크가 있거나 script tag 바로 위에만 있으면 동작된다.

첫 번째 샘플은 w3Schools에서

w3Schools 홈페이지 : https://www.w3schools.com/

사이트에 접속하여 Tutorials 클릭 → Learn jQuery 클릭

Try it Yourself 클릭

복사하여 html문서 head tag 안이나 script tag 사용 전에 넣으면 된다. (예시는 아래 작성)

두 번째 소스는 jquery.min.js 파일을 구해서 직접 적용하는 방식이다.

w3Schools에서 복사한 코드 중 링크만 인터넷 주소창에 붙여 넣기를 한다.

마우스 우클릭 후 다른 이름으로 저장.. 한다.

이클립스를 사용하여 이클립스.......... GO.....

이클립스 WebContent폴더 안 폴더를 생성하고 그 안에 다운로드한 파일을 넣는다.

스크립트 문을 작성한다.

형식

<script src="./폴더명/jquery.min.js"></script>

jquery.min.js 적용방법

예시 1 : head tag 선언방법

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

예시2 : script tag 위 선언방법

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
   ...
</script>   
</body>

'IT > JavaScript' 카테고리의 다른 글

[jQuery] button tag 접근 예시/input radio, checkbox 접근 예시 (0)	2021.06.11
[jQuery]jQuery와 JavaScript 차이점/ jQuery 형식/ jQuery 태그 접근방법/html()와 text()차이점 (0)	2021.06.10
[Html+JavaScript] NodeList/getElementsByTagName (0)	2021.06.08
[Html+JavaScript] DOM/childNodes/appendChild/insertChild/insertBefore/removeChild/createElement/createTextNode (0)	2021.06.08
[Html+JavaScript] 미술관 및 박물관 링크 이동하기 (0)	2021.06.07

샘플여러개 있음. 예제 파일 보기를 누러서 맘에 드는 걸 골라 사용하면 된다.

jquery UI

https://jqueryui.com/

Maven : jar파일 다운로드(spring 사용시 필요)

https://mvnrepository.com/

JSON Viewer(크롬) -

스프링 부트에서 객체를 넘길때 json형태로 넘어오는데 json을 정리해주는 사이트

공간 분할 태그

div

HTML 문서에서 부분, 혹은 세션을 정의
요소는 CSS스타일 지정하거나 Javascript로 특정 작업을 수행하기 위해 다른 HTML 요소의 컨테이너로 사용
CSS와 함께 웹페이지를 레이아웃 할 때 자주 사용

span

문서의 인라인 요소를 그룹화
시각적으로 변경되지 않으며, 텍스트의 일부 혹은 문서의 일부에 후크를 추가하는 방법을 제공

semantic

의미론적인 웹, 작성 (눈으로 보기에 바뀌는게 없다)
자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술

header

문서의 서론이나 섹션의 목차, 검색, 로고등이 들어가는 곳
소개 내용 또는 탐색 링크 모음을 위한 컨테이너
포함 요소

> 하나이상의 제목 요소(h1~h6)
> 로고, 아이콘
> 저자 정보
> 하나의 문서에 여러개의 Header 요소 포함 가능

nav

네비게이션, 페이지 이동을 위한 메뉴들이 모여 있는 곳
탐색 링크를 정의하며, 탐색 링크의 주요 블록에서만 사용

aside

사이드에 위치하는 공간, 보조 메뉴나 광고를 배치하는 곳
사이드바, 본문 이외의 내용

section

여러 중심 내용을 감싸는 공간
글을 구분하는 단락의 개념

section 안에 section을 넣는 것도 가능

article

글자가 많이 들어가는 부분, 콘텐츠 부분

footer

가장 바닥의 데이터, 저장자의 이름, 문서의 날짜, 연락처, 메일주소, 주소 등을 작성

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
*{ /* 모든태그에 적용 : * (초기값 설정) */
	margin: 0;
	padding: 0;
}

header{
	background-color: #e2c100;
	margin: 10px auto;	
	border: 1px solid #000000;
	padding: 5px;
	width: 700px;
	height: 100px;
} 

main{
	background-color: #a6ae24;
	margin: 0 auto; /* auto 알아서 중앙으로 맞춰줌 */
	border-bottom: 1px solid #000000;
	padding: 20px 0 20px 0; 
	width: 500px;
	height: 150px;
}

#box1{
	background-color: #ff8000;
	width: 250px;
	height: 120px;
	float: left;
}
#box2{
	background-color: #be81f7;
	width: 250px;
	height: 120px;
	float: left;
}

footer{
	background-color: #75c1e3;
	margin: 30px auto;
	border: 3px dotted #000000;
	padding: 20px;
	width: 650px;
	height: 50px;
}

</style>

</head>
<body>

<header>
	<p>header 영역</p>	
</header>

<main>
	<p>main 영역</p>
	
	<div id="box1">
		<p>box 1</p>
	</div>
	
	<div id="box2">
		<p>box 2</p>
	</div>
</main>

<footer>
	<p>footer 영역</p>
</footer>

</body>
</html>

실행화면

Insert title here

header 영역

main 영역

box 1

box 2

>

참조

padding 한줄기입 순서

예) 20px 0 20px 0; → top right bottom left

이미지 출처 : https://www.w3schools.com/html/html5_semantic_elements.asp

'IT > CSS' 카테고리의 다른 글

[CSS] button 꾸미기! (hover효과 주기) (0)	2021.06.17
[bootstrap]bootstrap정의/ bootstrap.min.js 사용예제 (0)	2021.06.09
[CSS] div태그로 공간 나누기 (0)	2021.06.09
[CSS] 리스트 마커 변경하기/list-style-image/list-style-type (0)	2021.06.09
[CSS] a:link/a:visited/a:hover/a:active (0)	2021.06.09