- HTML Block & Inline
- 블록 레벨 요소
- 요소 전후에 여백을 자동으로 추가
- 항상 사용 가능한 전체 너비 차지
<p>: 문서에서 단락을 정의<div>: 분할, 섹션 정의
<p>Hello World</p>
<div>Hello World</div>- 인라인 요소
- 텍스트, 문서의 일부를 표시하는데 사용
<span>을 사용해 정의
- Classes
- 클래스 특성 사용
- 스타일 시트의 클래스 이름을 가리키는 데 사용
- JavaScript에서 특정 클래스 이름으로 요소를 조작하는데 사용
- 클래스용 구문
.+클래스 이름작성 후{}내에서 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>- 클래스의 공유
- 서로 다른 요소들은 동일한 클래스를 공유할 수 있다
- 자바스크립트의 클래스 속성 사용
- JavaScript에서 특정 요소에 대한 특정 작업을 수행하는 데 사용할 수 있다.
getElementsByClassName메소드를 사용해 특정 클래스 이름을 가진 요소를 실행할 수 있다.
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>-> 버튼을 클릭해 클래스 이름 "city"가 있는 모든 요소를 숨긴다.- Id
- ID 특성 사용
id: 요소에 대한 고유 ID를 지정한다#를 작성하고 ID 이름을 작성한 후{}내에서 css 속성을 정의
<!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>- 클래스 이름은 여러 요소에서 사용할 수 있지만 id는 페이지 내의 한 요소에서만 사용해야한다
- 자바스크립트의 ID 특성 사용
- 자바스크립트는
getElementById()메소드를 사용하여 요소에 접근할 수 있다.
- JavaScript(중요)
- 스크립트 태그
<script>는 자바스크립트를 정의하는데 사용
-> 스크립트문이 포함돼있거나 src 특성을 통해 외부 스크립트 파일을 가리킨다- JavaScript의 일반적인 용도는 이미지 조작, 양식 유효성 검사, 콘텐츠의 동적 변경이다
- 자바스크립트 예시
- 자바스크립트는 콘텐츠를 변경할 수 있다
document.getElementById("demo").innerHTML = "Hello JavaScript!";- 자바스크립트는 스타일을 변경할 수 있다
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";- 자바스크립트는 특성을 변경할 수 있다
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>Here, a JavaScript changes the value of the src (source) attribute of an image.</p>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_bulboff.gif"
} else {
pic = "pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="pic_bulboff.gif" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>
감자에옹