HTML, CSS

HTML(2)

오매준 2024. 7. 16. 16:39

HTML 요소(Element)



 - 여는 태그와 닫는 태그와 그 사이의 내용을 모두 통틀어 HTML요소(Element)라고 부른다
        - 모든 태그에 여는 태그와 닫는 태그가 반드시 존재하는 것은 아니다
   - br, hr처럼 닫는 태그를 생략 가능한 태그들도 있다



&lt; (less than) : <를 출력할 때 사용하는 엔티티
&gt; (greater than) : >를 출력할 때 사용하는 엔티티

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>
            &lt;태그&gt;
        </p>
    </body>
</html>



속성(Attribute)



- 모든 요소는 속성(attribute)을 가질 수 있다
        - 속성은 해당 요소의 여는 태그에 정의해야 한다
        - 속성은 해당 요소에 대한 추가적인 정보를 묘사한다
        - 대부분의 속성은 속성 이름과 속성 값이 짝을 이룬다



하나의 요소에 여러개의 속성이 들어갈 수 있다

<p name="p5" id="p5" class="para"> 여러개의 속성 </p>


<p style="border: 두께 px 색; 가로: px; 높이: px></p> : 박스 만들기

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>
            <p style="border: solid 3px purple; width: 100px; height: 100px;"></p>
        </p>
    </body>
</html>



<p title="넣을 내용"> : 마우스 커서를 갖다대면 내용이 나온다

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>
            <p title="마우스를 올리고 있으면 나오는 내용">마우스를 올려보세요</p>
        </p>
    </body>
</html>


어떤 속성들은 속성의 값이 없는 경우도 있다 (e.g checkbox의 checked, disabled 속성)

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <p>
            <input type="checkbox" name="menu" id="meat" checked>제육정식A
            <input type="checkbox" name="menu" id="fish" disabled>고등어구이정식A
        </p>
    </body>
</html>


다른 페이지로 이동 할 수 있는 링크 걸기

1. <a></a> 태그 사용하기

1-1 다른 페이지로 이동 할 수 있는 링크 걸기

a태그의 href 속성에 원하는 페이지의 경로를 적어서 사용

<html>
    <head>
        <title>head 부분</title>
    </head>
    <body>
        <a href="http://www.naver.com">링크</a>
    </body>
</html>



링크를 클릭하게되면 입력해놓은 주소로 이동된다

예를 들어

- https://comic.naver.com/webtoon/list?titleId=823933 가 있을 때
- 해당 위치에서 ./naver.com은 https://comic.naver.com/webtoon/naver.com으로 간다
   (가장 마지막 위치에 있는 /에서 해당 경로를 찾는다) 
- 해당 위치에서 /naver.com은 https://comic.naver.com/naver.com으로 간다
   (가장 처음 위치에 있는 /에서 해당 경로를 찾는다)
- 해당 위치에서 //naver.com은 http://naver.com으로 간다 
   (프로토콜(https:) 다음에 있는 //에서 해당 경로를 찾는다) 

1-2 같은 경로의 다른 페이지로 링크 걸기

<a href="./01_HTML이란.html">01</a>
<a href="./02_제목과 문단.html">02</a>
<a href="./03_요소.html">03</a>
<a href="./04_속성.html">04</a>


2.자바 스크립트 사용하기

- 자바스크립트로는 꼭 a태그가 아니더라도 링크를 걸 수 있다

 

a 태그로 이동

<p 
style="width: 100px; height: 100px; border: solid 3px green;"
onclick="location.href='https://google.com';"
></p>

 

자바스크립트로 이동

<p 
style="width: 100px; height: 100px; border: solid 3px orange;"
onclick="orangeBoxClickHandler();"
/>

// 자바스크립트로 구글로 이동하는 함수 정의
<script>
function orangeBoxClickHandler() {
    location.href = "https://google.com";
}
</script>