프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v

이미지 클릭 시 하이퍼링크 되도록 만드는 방법

 앞서 다룬 a 태그 와 img 태그를 활용하면,
이미지를 클릭했을때 특정 사이트로 이동(하이퍼링크) 하게 만들 수 있다.
웹 페이지들에서 정말 많이 사용되는 기능 중 하나 이다.
코드는 a 태그가 img 태그를 감싸는 구조로 부모 자식 관계가 형성된다.

이미지 클릭 시 하이퍼링크 되도록 만드는 방법


예제에서는 a 태그의 href 속성이 네이버를 가리키고 있고, target 속성으로 새탭에서 웹페이지가 열리도록 했다.
img 태그는 이미지를 가지고 오며, 대안 텍스트 와 툴팁 도 제공한다.

이미지 클릭 시 하이퍼링크 되도록 만드는 방법2
결과 화면이다. 이미지를 클릭하면 새로운 탭에 네이버 페이지가 열린다.
앞서 배운 a 태그 와 img 태그 만으로도 재미있는 웹 페이지의 기능이 구현된다.
어떠한 장비 도 필요치 않고 오직 컴퓨터 만 있으면 바로 브라우저에서 결과값을 확인 할 수있으니 재미있다. 이것이 바로 HTML 의 장점이기도 하다.

감사합니다.

댓글

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

HTML 페이지 기본 구성.(HTML Page Structure)

구글 블로그 대표이미지 설정하기