오늘도 이어지는 HTML 수업이다.

오늘은 이미지 삽입과 관련된 태그, 그리고 링크 삽입하는 태그를 배웠다.

백코드 불여일견. 바로 이미지 삽입 코드의 문법을 알아보도록 하자.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .pic1{width: 200px; height: 200px;}
        </style>
    </head>
    <body>
        <h2>이미지 삽입 테스트</h2><br/>
        <!--이미지 삽입 태그 <img src="파일 경로or주소"/>-->
        <img src="파일경로or파일주소" alt="대체문자열" title="마우스오버시나타내줄문자열"/> 

    </body>
</html>

img 태그는 종료 태그가 없다. 따라서 img src로 시작해서 마지막 닫아주는 괄호에 /만 붙여주면 된다. 안붙여줘도 작동은 한다.

alt 는 이미지가 깨졌을시 대체해서 보여줄 문자열이다. title은 말 그대로 이미지 위에 마우스오버를 했을때 말풍선처럼 발생시킬 문구를 의미한다.

테스트삼아 저작권이 없는 이미지를 하나 다운로드 받아서 경로에 넣어주었다.

정상적으로 잘 출력이 된다. 이번엔 경로를 일부러 틀리게해서 사진이 나오지않도록 처리해보았다.

사진이 깨지면서 alt 부분에 입력해놓은 문구가 출력이 된다.

다시 정상적으로 이미지가 나오게 한후 마우스 오버를 해보았다.

사진에 마우스오버 하니 말풍선처럼 창이 하나 뜨고 title에 적어놓은 문구가 출력이 되는것을 확인할수 있다.

HTML에서는 Style 태그를 이용하여 사진의 크기나 테두리를 조절할수 있다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            img {width: 200px; height: 200px; border: 1px solid pink; border-radius: 5px;}
        </style>
    </head>
    <body>
        <h2>이미지 삽입 테스트</h2><br/>
        <!--이미지 삽입 태그 <img src="파일 경로or주소"/>-->
        <img src="images/img1.jpg" alt="여기가alt부분" title="여기가title부분"/> 

    </body>
</html>

border는 테두리인데. 테두리에 한줄짜리 핑크색상의 1px 두께의 줄을 추가해주었고

border-radius로 테두리를 모서리를 좀 둥글게 만들어주었다.

자세히보면 이미지 테두리에 핑크색상으로 줄이 보이는것을 확인할수 있고 모서리도 둥글어진점을 확인할수 있다.

다음은 링크를 삽입하는 a href에 대해 알아보도록 하겠다. 먼저 기본 문법부터 살펴보자

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>

        </title>
    </head>
    <body>
        <h2>a href 링크 삽입 테스트입니다</h2><br/>
        <!--a href는 링크삽입 태그-->
        <a href="링크주소" target="새창or현재창에서열지여부">문자열</a>

    </body>
</html>

이 블로그 주소를 링크로 가지고 있고, 누르면 새창으로 열리는 문자열을 작성해보겠다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>

        </title>
    </head>
    <body>
        <h2>a href 링크 삽입 테스트입니다</h2><br/>
        <a href="https://yat-ong.tistory.com/" target="_blank">여기를 누르면 새창 블로그로 이동됩니다</a>
    </body>
</html>

아래 HTML 코드블럭에서 문자열을 클릭하게 되면 새창에서 블로그가 열리게 됩니다

a href 링크 삽입 테스트입니다

안녕하세요 얏옹이의 주관적인 블로그입니다

Target의 속성은 크게 _blank, _self, _parent, _top으로 나눌수 있다.

_blank : 해당 링크를 새창에서 열어준다
_self : 해당 링크를 현재 창에서 열어준다. target을 명시하지않으면 기본적으로 이 _self가 defalut 값이다.
_parent : 해당 링크를 부모 프레임(Frame)에서 열어준다
_top : 해당 링크를 현재 창의 가장 상위 프레임에서 열어준다.

이중에 주로 쓰이는건 _blank가 되겠다.

마지막으로 이미지와 링크를 이용해서 링크가 삽입된 이미지 링크를 만들어주겠다.

간단하다 <a href 태그 사이에 img 태그를 넣어주면 된다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>이미지에 링크삽입하기</title>
        <style>
            img{width: 200px; height: 200px; border-radius: 5px;}
        </style>
    </head>
    <body>
        <h1>이미지에 링크 삽입하기 누르시면 블로그로 이동됩니다</h1><br/>
        <a href="https://yat-ong.tistory.com/" target="_blank">
            <img src="https://images.freeimages.com/images/large-previews/218/my-dog-cutter-1499799.jpg" 
                alt="얏옹이의 주관적인 블로그" title="블로그이동이미지"/></a>
        
    </body>
</html>

이미지에 링크삽입하기

이미지에 링크 삽입하기 누르시면 블로그로 이동됩니다

강아지 그림을 클릭하면 블로그로 이동된다.

저작자표시 비영리 변경금지

'Study > 중앙정보처리학원과정' 카테고리의 다른 글

36일차. HTML Form 태그와 input 그리고 JSP (0)	2022.12.14
35일차. JSP를 위한 이클립스(Eclipse) Enterprise 와 Tomcat 9설치 (0)	2022.12.13
33일차. HTML 그리고 Visual Studio Code 설치 (0)	2022.12.09
32일차. DTO와 SET, MAP (0)	2022.12.08
31일차. ArrayList와 DTO (0)	2022.12.07