HTML 기본 내용 정리 [ 02 ]

coc·2023년 7월 29일
0

navigation과 footer만들어보기

1. navigation

<ul>
    
    
    <a href="#"><li>HTml</li></a> (<li></li> 를 사용하면 결과물 앞에 점이 붙는다.)
    <a href="#"><li>css</li></a>  
    <a href="#">
        <li>java script</li>
    </a>
    <a href="#">
        <li>j-query</li>
    </a>
    <a href="#">
       <li>bootstrap</li>
    </a>
</ul>

1번 처럼 일자로 계속 쓰거나 아니면 2번 처럼 띄어서 써도 작동은 잘된다.

   1.<a href="#"><li>css</li></a>  
   2.<a href="#">
        <li>java script</li>
    </a>

1. href 를 통해 다른 url을 접속 할 수 있게된다.

2. a태그를 사용해야한다.

2.footer

<a href="https://www.daum.net/">
    <img src="img/daum.png" alt="다음CI" width="180px" height="50px"/>
</a>

<a href="https://www.msn.com/ko-kr" target="_parent">
    <img src="img/msn.jpg" alt="msn CI" width="180px" height="50px"/>
</a>

<a href="https://www.google.com/"  target="_blank">
    <img src="img/google.png" alt="구글 CI" width="180px" height="50px"/>
</a>

<a href="https://www.naver.com/">
    <img src="img/naver.png" alt="네이버 CI" width="180px" height="50px"/>
</a>

<a href="https://www.nate.com/">
    <img src="img/nate.png" alt="네이트 CI" width="180px" height="50px"/>
</a>

1. img="src" 표시할 이미지

2. alt="" 이미지 설명

3. width="" 너비 값

4. height="" 높이 값

footer을 작동해보면 아래 처럼 결과물이 나오며 로고를 클릭하면 그 사이트에 접속이 가능하다.

profile
시작

0개의 댓글