▶ Javascript는 HTML 페이지를 보다 동적이고 대화식으로 만든다.

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_scripts_intro 

 

■ HTML <script> 태그

▶ HTML <script> 태그는 클라이언트 측의 스크립트를 정의하는데 사용된다.

▶ <script> 요소는 스크립트 문구를 포함하거나 "src" 속성을 통해 외부 스크립트 파일을 가리킨다.

▶ Javascript의 일반적인 용도는 이미지 조작, 양식 유효성 및 내용의 동적 변경이다.

▶ HTML 요소를 선택하기 위해 자바스크립트에서는 주로 "document.getElementById()" 메소드를 사용한다.

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_script 

 

■ Javascript 맛보기

▶ 문구 바꿔보기

document.getElementById("demo").innerHTML = "Hello JavaScript!";

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_script_html 

 

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_script_styles 

 

document.getElementById("image").src = "picture.gif";

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_script_attribute 

 

■ HTML <noscript> 태그

▶ HTML <noscript> 태그는 브라우저에서 스크립트를 비활성화했거나 스크립트를 지원하지 않는 브라우저를 사용하는 사용자게 표시할 대체 콘텐츠를 정의한다.

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_noscript 

 

출처 : https://www.w3schools.com/html/html_scripts.asp

 

HTML JavaScript

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

'HTML' 카테고리의 다른 글

HTML / (39) head 요소  (0) 2023.02.24
HTML / (38) 파일 경로  (0) 2023.02.24
HTML / (36) iframes  (0) 2023.02.24
HTML / (35) id 속성  (0) 2023.02.24
HTML / (34) Class 속성  (0) 2023.02.22

■ 요약

▶ "id" 속성은 HTML 요소에 대한 고유 id를 지정하는 데 사용한다.

▶ "id" 속성 값은 HTML 문서안에 고유해야 한다.

▶ "id" 속성은 CSS 및 Javascript에서 특정 요소에의 스타일을 지정/선택하는 데 사용된다.

▶ "id" 속성 값은 대소문자를 구별하지 않는다.

▶ "id" 속성은 HTML 북마크를 생성하는 데 사용된다.

▶ Javascript는 "getElementById()" 메서드에 특정 id를 가진 요소에 접근할 수 있다.

 

▶ HTML "id" 속성은 HTML 요소에 대해 고유한 id를 지정하는 데 사용된다.

▶ HTML 요소에서 같은 하나 이상의 요소가 같은 id를 가질 수 없다

 

■ id 속성 사용하기

▶ "id" 속성은 HTML 요소에 대해 고유한 id 를 지정한다.

▶ "id" 속성 값은 HTML 문서 안에서 고유해야 한다.

▶ "id" 속성은 스타일 시트에서 특정 스타일 선언을 가리키는 데 사용된다.

▶ Javascript에서 특정 ID를 가진 요소에 접근하고 조작하는 데 사용된다.

▶ id의 구문 : 해시 문자(#) 다음에 id 이름은 쓴 후에 중괄호 {] 안에 CSS 속성을 정의한다.

 

▶ 아래에 예시는 "myHeadr" id 이름을 가리키는 <h1> 요소가 있다.

▶ <h1> 요소는 head 섹션에 정의한 #myHeader 스타일에 따라 스타일이 설정된다.

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_css 

 

※ id 이름은 대소문자를 구별하지 않는다.

※ id 이름은 최소한 문자 하나를 포함해야 하며, 숫자로 시작할 수 없고, 공백을 포함해서는 안된다. (스페이스, 탭 등)

 

■ class 와 id 차이점

▶ class 이름은 다수 HTML 요소에 사용할 수 있다.

▶ 반면에 id 이름은 페이지 안에 하나의 HTML 요소만 사용해야 한다.

<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_class 

 

■ id와 링크를 사용한 HTML 북마크

▶ HTML 북마크는 독자가 웹 페이지의 특정 부분으로 이동할 수 있도록 도움을 주는데 사용된다.

▶ 북마크는 페이지가 길다면 유용할 수 있다.

▶ 북마크를 사용하려면 먼저 책갈피를 만든 다음 링크를 추가해야 한다.

▶ 그리고 링크를 클릭할 때 페이지는 북마크 위치에 스크롤된다.

 

■ 예시

▶ 먼저 "id" 속성을 가진 북마크를 생성한다.

<h2 id="C4">Chapter 4</h2>

▶ 그리고 같은 페이지에 북마크의 링크를 추가한다.

<a href="#C4">Jump to Chapter 4</a>

링크 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_bookmark 

 

▶ 또는 다른 페이지에서 북마크의 링크를 추가한다.

<a href="html_demo.html#C4">Jump to Chapter 4</a>

 

■  Javascript 에서 id 속성 사용하기

▶ "id" 속성은 특정 요소에 대해 일부 작업을 수행하기 위한 Javascript에서 사용할 수도 있다.

▶ JavaScript는 "getElementById()" 메서드에 특정 id를 가진 요소에 접근할 수 있다.

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_js 

 

출처 : https://www.w3schools.com/html/html_id.asp

 

HTML - The id attribute

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

'HTML' 카테고리의 다른 글

HTML / (37) Javascript  (0) 2023.02.24
HTML / (36) iframes  (0) 2023.02.24
HTML / (34) Class 속성  (0) 2023.02.22
HTML / (33) Block 과 Inlin 요소  (0) 2023.02.22
HTML / (32) 다른 목록  (0) 2023.02.22

■ 요약

▶ HTML "class" 속성은 요소에 대해 한 개 이상의 클래스를 지정한다.

▶ 클래스는 CSS 및 Javascript 에서 특정 요소를 선택하고 접근하는 데 사용된다.

▶ "class" 속성은 모든 요소에 사용할 수 있다.

▶ 클래스 이름은 대소문자를 구별하지 않는다.

▶ 다른 HTML 요소는 같은 클래스 이름은 가리킬 수 있다.

▶ Javascript는 "getElementsByClassName()" 메서드를 사용하여 특정 클래스 이름을 가진 요소에 접근할 수 있다.

 

▶ HTML "class" 속성은 HTML 요소에 대한 클래스를 지정하는 데 사용된다.

▶ 다수 HTML 요소는 같은 클래스를 공유할 수 있다.

 

■ Class 속성 사용하기

▶ "class" 속성은 종종 스타일 시트에 서 클래스 이름을 가리키는 데 사용된다.

▶ 특정 클래스 이름을 가진 요소에 접근하고 조작하기 위해 Javascript 에서 사용할 수 있다.

 

▶ 아래 예시는 "city" 값을 가지는 "class" 속성을 사용하는 세 개의 <div>가 있다.

▶ 모든 <div> 요소는 head 섹션에 정의한 ".city" 스타일에 따라 같은 스타일이 적용된다.

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_capitals 

 

▶ 아래 예시는 "note" 값을 가지는 "class" 속성을 사용하는 <span> 요소가 있다.

▶ 두 <span> 요소는 head 섹션에 정의한 ".note" 스타일에 따라 같은 스타일이 적용된다.

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_span 

 

※ "class" 속성은 모든 HMTL 요소에 사용할 수 있다.

※ 클래스 이름은 대소문자를 구별하지 않는다.

 

■ Class의 구문

▶ 클래스를 만들려면 마침표(.) 문자와 클래스 이름은 쓴다.

▶ 다음 중괄호 { } 안에 CSS 속성을 정의한다.

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_css 

 

■ 다수 클래스

▶ HTML 요소는 하나 이상의 클래스에 속할 수 있다.

▶ 다수 클래스를 정의하려면 공백을 사용하여 클래스 이름을 구분한다 ( 예시 : <div class="city main"> )

▶ 정의된 모든 클래스에 따라 요소의 스타일이 적용된다.

 

▶ 아래 예시에서 첫 <h2> 요소는 "city"와 "main" 클래스 둘 다 속하며 두 클래스로부터 CSS 스타일을 얻는다.

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_multiple 

 

■ 다른 요소들은 같은 클래스를 공유할 수 있다.

▶ 다른 HTML 요소는 같은 클래스를 가리킬 수 있다.

 

▶ 아래 예시에 <h2>와 <p>는 "city"를 가리키며 같은 "style" 을 공유한다.

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_tags 

 

■ Javascript 에서 Class 속성 사용하기

▶ 클래스 이름은 특정 요소에 대한 특정 작업을 수행하기 위해 Javascript에서 사용할 수도 있다.

▶ Javascript는 "getElementsByClassName()" 함수를 사용하여 지정한 클래스 이름으로 모든 요소에 접근할 수 있다.

function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_js 

 

출처 : https://www.w3schools.com/html/html_classes.asp

 

HTML Classes - The Class Attribute

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

'HTML' 카테고리의 다른 글

HTML / (36) iframes  (0) 2023.02.24
HTML / (35) id 속성  (0) 2023.02.24
HTML / (33) Block 과 Inlin 요소  (0) 2023.02.22
HTML / (32) 다른 목록  (0) 2023.02.22
HTML / (31) 정렬된 목록  (0) 2023.02.22

+ Recent posts

티스토리툴바