HTML 공통속성(attribute)
- hidden : 해당 요소를 눈에 보이지 않게한다. 속성값을 부여하지 않는다. 눈에 안 보일 뿐 아니라 자리도 차지하지 않는다. 속성값을 부여하지 않는다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Hidden 속성</title>
</head>
<body>
<div>첫번째 줄!</div>
<div hidden>두번째 줄!</div>
<div>세번째 줄!</div>
</body>
</html>첫번째 줄!
두번째 줄!
세번째 줄!
- onclick : 해당 요소를 클릭하였을 때 발생시킬 이벤트이고, Javascript 문법으로 작성한다. 단, 이는 인라인 스크립트(Inline Script)라 하여, 보안 취약점이 있음으로 사용을 자제한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Onclick 속성</title>
</head>
<body>
<input type="button" value="클릭!" onclick="alert('클릭했구나')">
</body>
</html>
- style : 해당 요소에 css 속성(Property)을 부여할 때 사용한다. CSS 문법으로 작성한다. 단, 이는 인라인 스타일(Inline Style)이라 하여, 보안 취약점이 있으므로 사용을 자제한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Style 속성</title>
</head>
<body>
<div style="background-color: red; color: white; display: inline;">주의 사항</div>
<span style="background-color: yellow; display: block;">어쩌고 저쩌고</span>
</body>
</html>주의 사항
어쩌고 저쩌고
- class : 어떠한 요소를 특정하기 위해 사용한다. 공백()으로 구분하여 여러개 부여할 수 있고, 문서내에 무제한으로 중복되어도 상관없다.
id : 어떠한 요소를 특정하기 위해 사용한다. 하나만 부여할 수 있고, 문서내에서 동일한 id 속성 값을 가지는 요소가 중복되어서는 안된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Class 및 ID 속성</title>
</head>
<body>
<div class="apple banana coconut" id="fruit">aaa</div>
<!-- 위 div는 apple, banana, coconut 이라는 클래스를 3개 가지고,
fruit이라는 id를 가진다 -->
<div class="apple coconut" id="fruit">bbb</div>
<!-- 위 div는 apple, coconut 이라는 클래스 2개를 가지지만
id가 중복되어있다. -->
</body>
</html>
// 위 div는 apple, banana, coconut 이라는 클래스를 3개 가지고, fruit이라는 id를 가진다.
// 위 div는 apple, coconut 이라는 클래스 2개를 가지지만 id가 중복되어있다.aaa
bbb
- 태그 style
- 가능한 부모 : head
- 문서 내에 적용될 CSS 문법을 작성하기 위해 사용한다.
- 인라인 스타일(Inline Style)임으로 잘 사용하지 않는다.
요소 선택자 - 요소 선택자(Element Selector)는 CSS 속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그의 이름으로 CSS 속성을 적용시키고자 할 때 사용한다.
다음과 같이 작성한다. ("는 없는 것으로 한다.)
"요소 이름" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선택자 요소</title>
<style>
a {
color: red;
}
</style>
</head>
<body>
<a>My First Color!</a>
<br>
<b>This is not colored.</b>
<br>
<a>I don't want to be changed.</a>
</body>
</html>This is not colored.
I don't want to be changed.
rootgo 매일, 꾸준히 성장하는 사람🌱