본문 바로가기

프로그램 강좌

[html05]이미지로 코딩하기2


이미지 크기 줄이는 방법(with CSS)

아까 실습에서 이미지가 너무 커서 보기 안좋았죠? 적당한 사이즈로 줄여보겠습니다. style="" 입력

<p>
	<img src="image/flower.jpg" style="" alt="꽃 이미지"/>
</p>

아직 아무런 변화가 없죠? 이제부터 기술 들어갑니다.

<body>

    <p><img src="image/flower.jpg" style="width:400px;" alt="꽃 이미지"/></p>

</body>

width는 너비를 뜻합니다. height(높이)는 설정하지 않으면 width 값에 맞춰서 자동으로 줄어듭니다. 반대로 height 값만 적어준다면 height 값에 맞춰서 width도 변형하겠죠. 물론 width, height 모두 지정해도 됩니다.

대신 정확한 이미지 비율을 맞추지 않는다면 이미지는 찌그러지겠죠.

 

링크 넣기

이미지에도 링크를 넣을 수 있습니다. 생각해보니 텍스트 편 할때 링크를 알려드렸어야 했는데, 안했네요. 링크는 텍스트에도 되고, 이미지에도 됩니다.

<a href="이동할경로">버튼이나 이미지</a>

이렇게 해주면 됩니다. 실습해볼까요?

<p>
	<a href="http://www.naver.com">
		<img src="image/flower.jpg" style="width:400px;" alt="꽃 이미지" />
	</a>
</p>

브라우져에서 확인해봅시다. 이미지를 클릭하면 네이버로 이동합니다. 또 다시 의문점이 생기죠? 새창으로는 어떻게 하는지?

 

새창으로 링크열기

아주 간단합니다.

<p>
	<a href="http://www.naver.com" target="_blank">
		<img src="image/flower.jpg" style="width:400px;" alt="꽃 이미지" />
	</a>
</p>

왜 p 태그까지 감싸주지 않느냐고 물으실수도 있겠지만 p나 div 블록 요소(줄단위로 공간을 차지하며 쌓이는) 입니다. a태그 span 등등은 인라인 요소(줄단위로 공간에 영향을 주지 않는)요. 인라인 태그안에는 블록태그를 쓰지 않아요. 아마 작동은 할수도 있지만 공식 문법이기 때문에 지켜주세요.

다시 실습. 새창으로 잘 이동되죠?

 

이미지 태두리에 선 넣기

이제 태그 작성 규칙은 조금씩 익숙해지시나요? 당연히 style 안에 넣어주면 됩니다.

<img src="image/flower.jpg" style="width:400px; border:1px solid red;" alt="꽃 이미지" />

긴 글 읽어주셔서 감사드리고 다음 강의때 뵙겠습니다.


2019/06/22 - [프로그램 강좌] - [html01]코딩은 누구나 할 수 있다?

2019/07/08 - [프로그램 강좌] - [html02]html = head + body

2019/07/11 - [프로그램 강좌] - [html03]CSS가 뭔데? 텍스트 꾸며보기

2019/07/24 - [프로그램 강좌] - [html04]이미지로 코딩하기!

2019/07/26 - [프로그램 강좌] - [html06]이미지로 코딩하기3 (문법설명이니 스킵해도 됨)


728x90