[웹개발] HTML 페이지 이동, 이미지 출력, 리스트 출력
안녕하세요
로로봉입니다 : )
오늘은 HTML에서 페이지 이동, 이미지 출력, 리스트 출력에 대해 알아보도록 하겠습니다.
1) 페이지 이동
웹 어플리케이션은 많은 뷰 페이지로 이루어졌기 때문에 다른 페이지로 이동해야 하는 경우가 많습니다.
뷰 페이지는 텍스트뿐 아니라 이미지를 출력해야 할 일이 많습니다.
HTML에서 페이지 이동은 하이퍼링크(Hyperlink)로 구현됩니다.
하이퍼링크는 텍스트나 이미지를 클릭하여 다른 페이지로 이동하는 것을 말하며, <a> 태그로 링크를 구현합니다.
<a href="url">링크 텍스트</a>속성 href는 이동할 페이지의 위치인 url을 설정합니다.
<a>태그는 어느 윈도우에 출력할지 target 속성을 지정할 수 있습니다.
target 속성에 설정할 수 있는 값은 아래와 같습니다.
_blank : 새 윈도우나 새 탭에서 링크 페이지 실행
_self : 링크를 클릭한 위치와 동일한 프레임에 링크 페이지 실행(기본값)
_parent : 부모 프레임에 링크 페이지 실행
_top : body 전체에 링크 페이지 실행
프레임명 : 지정한 이름의 프레임에 링크 페이지 실행<a>태그는 id 속성을 이용해서 북마크를 설정할 수도 있습니다.
북마크(Bookmark)란 스크롤이 길어졌을 때 원하는 위치로 이동할 수 있게 표시하는 것을 말합니다.
아래와 같이 현재 페이지에 있는 북마크나 다른 페이지에 있는 북마크로도 이동이 가능합니다.
<h3 id="bookmark">북마크</h3>
<br/> 태그 여러 개를 이용하여 스크롤이 생기도록 한다.
<a href="#bookmark">북마크로 이동</a>
<a href="Test2.html#Bookmark">Test2.html 북마크로 이동</a>HTML에서 다른 페이지로 이동하거나 이미지를 출력하려면 경로 지정이 중요합니다.
저장 위치가 다른 HTML 파일이 있다면 상대경로나 절대경로를 이용하여 지정해 주어야 합니다.
상대경로 : 상위 폴더 "../", 하위폴더 "폴더명/"
절대경로 : 드라이브 명 부터 C:/Data/Source/
2) 이미지 출력
이미지를 출력하기 위해선 <img> 태그를 사용하면 됩니다.
<img>태그는 body 부분 없이 속성 값만 설정하면 됩니다.
속성 값으로는 src, alt가 존재하며 src는 출력 이미지 경로, alt는 이미지가 출력되지 않을 경우 보여줄 텍스트를 설정합니다.
그리고 style속성으로는 이미지 크기(width, height) 및 정렬(float)를 설정할 수 있습니다.
<img src="img/naver.png" style="float:left;width:100px;height:100px">
이미지 링크 설정
<a href="http://www.naver.com"><img src="img/naver.png" style="float:left;width:100px;height:100px">3) 리스트 출력
HTML 리스트 출력은 순서 있는 목록과 순서가 없이 표시만 하는 리스트를 출력할 수 있습니다.
순서 있는 목록은 <ol></ol>로 묶어주며, 순서 없는 목록은 <ul></ul>로 묶어줍니다.
각 리스트의 항목은 <li></li>로 구분합니다.
순서 있는 목록의 설정 값은 아래와 같습니다.
type : 표시 종류 설정 ( 1-숫자, A-대문자, a-소문자, I-로마 대문자, i-로마 소문자 )
start : 시작 값 지정순서 없는 목록의 설정 값은 아래와 같습니다.
style="list-style-type:disc" - 안이 채워진 원 모양(기본값)
style="list-style-type:circle" - 안이 빈 원 모양
style="list-style-type:square" - 사각형 모양
style="list-style-type:none" - 모양 없음위의 목록을 테스트 하면 아래와 같은 결과를 볼 수 있습니다.
<body>
<h4>순서 있는 목록</h4>
<ol type="1">
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
</ol>
<ol type="A">
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
</ol>
<ol type="a">
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
</ol>
<ol type="I">
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
</ol>
<ol type="i">
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
</ol>
<h4>순서 없는 목록</h4>
<ul style="list-style-type:disc">
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
</ul>
<ul style="list-style-type:circle">
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
</ul>
<ul style="list-style-type:square">
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
</ul>
<ul style="list-style-type:none">
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
</ul>
</body>출력 결과는 아래와 같습니다.
좋아요♥ + 구독 부탁드립니다 : )