따라하며 배우는 HTML - #5 ( a 태그 )

HTML 링크 a 태그 및 속성

안녕하세요 오늘은 오전부터 비가 조금씩 내리네요 ~

그래도 힘내서 HTML 배워볼까요...이번에는 HTML 의 꽃이라고 할 수 있는 웹 페이지 이동 태그를 배워봅시다.

먼저 실습 영상 보시겠습니다. 영상의 사운드는 무음 처리 되어 있으니 양해 바랍니다. 

일단 기본 템플릿을 가져와서 body 태그 안에 아래의 소스를 넣어봅니다.

        <ol>

            <li>nels's IT blog</li>

            <li><a href="https://nels.tistory.com">nels's IT blog</a></li>

        </ol>

        첫번째와 두번째의 차이점 아시겠죠..^^?? 링크를 클릭하시면 해당 페이지로 이동합니다.

그럼 아래와 같은 화면이 나오게 됩니다.

1. nels's IT blog

2. nels's IT blog

리스트 태그는 지난번 시간에 배우셔서 알고 계실 거라 생각되어집니다. 모르시는 분은  2018/10/04 - [Program/HTML] - 따라하며 배우는 HTML - 4  참고하시기 바랍니다.

1번 리스트는 링크가 걸려있지 않고 2번 리스트는 링크가 걸려 있습니다. 

a 태그는 이렇게 웹페이지를 이동시킬 수 있는 태그 입니다. 하지만 이 태그는 항상 속성과 같이 사용하게 되어 있습니다. 

href 속성은 링크의 대상주소를 지정합니다. ( https://nels.tistory.com/ )

링크를 지정해줄 글자 앞 과 뒤에 a 태그를 넣어 주고 시작 태그 부분에 href 속성을 지정해 주면 됩니다. 

a 태그에는 target 속성도 있는데 이것은 검색엔진을 통해 한번씩 찾아보시면 많은 도움이 되실 겁니다.