HTML / CSS

일반 태그

<태그명>내용</태그명>

단일 태그

<태그명 />

<!-- HTML5부터는 / 없어도 됨 -->
<태그명>

예전버전도 사용할 수 있기 때문에 /를 다 해줌

기본 스타일

HTML에는 기본적으로 스타일이 먹혀있다.

태그 속성

ex) a 태그의 꺽쇠 안에 href라는 속성이 있음.

공통 속성

어떤 태그든 대부분이 가지고 있는 속성

특수 속성

a태그의 href와 target은 다른 태그들에는 없는 속성이다.

s01.html(실습)

<!-- css 적용방법 -->
<!-- 대상이 되는 태그명이나 선택자를 적고 -->
<!-- 중괄호 사이에 스타일 속성을 적어 준다 -->
<!-- 스타일 속성 및 속성값 뒤에는 꼭 세미콜론을 붙인다. -->
<style>
    h1 {
        background-color: aqua;
        color: blue;
        cursor: pointer;
    }
</style>

<!-- 꺽쇠 사이에 태그명을 적는다 -->
<!-- 태그는 앞뒤로 꺽쇠 사이에 태그명을 적고 -->
<!-- 뒤에는 /를 넣어준다 -->
<!-- 태그 사이에는 문서 내용이 들어간다 -->
<h1>안녕하세요</h1>

s02.html(실습)

<!-- 모든 태그가 사용할 수 있는 공통 속성이 있다.  id, class 등 -->
<h1 id="title" class="title">제목</h1>
<div id="myDiv" class="my-div">문단</div>
<!-- 특정 태그만 사용가능한 특수 속성이 있다. -->
<a id="myA" class"my-a" href="https://google.coom">링크</a>

---

JS 추가해보기

<!-- css 적용방법 -->
<!-- 대상이 되는 태그명이나 선택자를 적고 -->
<!-- 중괄호 사이에 스타일 속성을 적어 준다 -->
<!-- 스타일 속성 및 속성값 뒤에는 꼭 세미콜론을 붙인다. -->
<style>
    h1 {
        background-color: aqua;
        color: blue;
        cursor: pointer;
    }
</style>

<!-- 꺽쇠 사이에 태그명을 적는다 -->
<!-- 태그는 앞뒤로 꺽쇠 사이에 태그명을 적고 -->
<!-- 뒤에는 /를 넣어준다 -->
<!-- 태그 사이에는 문서 내용이 들어간다 -->
<h1 onclick="test()">안녕하세요</h1>

 <script>

    const test = () => alert("클릭하셨습니다.");

 </script>

클릭하면 아래의 같은 팝업창이 뜸