JUST GO

[HTML] 공통속성(Attribute) 본문

HTML/학습내용

[HTML] 공통속성(Attribute)

root_go 2022. 10. 3. 15:41

HTML 공통속성(Attribute)

  • hidden : 해당 요소를 눈에 보이지 않게한다. 속성값을 부여하지 않는다. 눈에 안 보일 뿐 아니라 자리도 차지하지 않는다. 속성값을 부여하지 않는다.
<!DOCTYPE html>
<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
  • 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
  • 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가 중복되어있다.
  • 태그 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>

'HTML > 학습내용' 카테고리의 다른 글

[HTML] 태그정리  (1) 2022.10.03
[HTML] 기본개념  (0) 2022.10.03
[HTML] Tag정리(2)  (0) 2022.10.03
[HTML] Tag 정리  (0) 2022.09.13
'HTML/학습내용' Related Articles more