웹 프로그래밍 기초 3

1. 정의 리스트(definition list) : 항목들과 함께 항목들의 정의(설명)가 표시되는 리스트

 

2. 링크(하이퍼링크) : 다른 문서로 점프할 수 있는 단어나 이미지

여기서 a는 anchor(앵커)의 줄임으로, 기능은 링크로써의 기능과, 링크의 타깃이 되는 기능이다. a 요소는 보통 다음과 같이 작성한다.

<a href="연결하고자 하는 domain">링크에 쓸 Text</a>

 

3. target 속성 : target 속성은 각 링크가 클릭되었을 때, 새로운 페이지가 어디에 열리는 지를 지정.

 1) _blank : 새로운 윈도우에서 새로운 페이지를 연다.

 2) _self : 현재 윈도우에 새로운 페이지를 적재한다. 

 3) _parent : 부모 프레임에 새로운 페이지를 적재한다. 

 4) _top : 현재 윈도우에 새로운 페이지를 적재하고 모든 프레임을 취소한다. 

 

4. id 속성 : 이전에는 a에 name 속성을 넣는 방식으로 사용되어졌으나, 지금은 거의 사용되지 않고, 대신 id 속성을 사용한다. 이들의 특징으로는 목차 아래의 링크들을 클릭 시 스크롤이 자동으로 해당하는 글 위치로 이동하는 것이다. id 속성은 다음과 같은 형식으로 작성한다.

<a id="이름">text</a>

id 속성은 body 내의 모든 요소에서 쓸 수 있는 속성이다. 또한 id는 한 페이지의 html 문서 안에서 단 한개만 존재해야 한다.

 

 

5. 이미지 : <img> 태그를 사용하는데, 이는 이미지를 웹페이지에 삽입할 때, 사용한다.

<img> 태그의 주요 속성에는 src, alt, width, height, loading 이다.

 1) src : 이미지의 경로

 2) alt : 이미지를 표시할 수 없을 때 출력할 내용

 3) width : 이미지의 가로 크기

 4) height : 이미지의 세로 크기

 5) loading : 이미지 로딩 방식

 

6. 이미지의 종류

 1) JPEG : 실사 사진과 같이 복잡하고 많은 색상으로 이루어진 이미지에 적합하고, 손실 압축 방식을 사용한다.

 2) PNG : 클립 아트와 같이 적은 수의 색상을 가진 이미지에 적합하고, 무손실 압축 방식을 사용한다.

 3) GIF : 로고나 클립아트 형태의 이미지에 적합하고, 256 색상만을 지원하며, 투명 배경과 애니메이션을 지원한다.

 손실 압축 방식은 데이터를 압축하여 자료를 받는 곳에 압축으로 풀어서 원래의 것과 다르게 보여주는 것을 말한다. -ko.wikipedia.org/wiki/%EC%86%90%EC%8B%A4_%EC%95%95%EC%B6%95

손실 압축 - 위키백과, 우리 모두의 백과사전

7. 테이블 : 표를 만들어주는 HTML 태그.

 1) <table> : 테이블을 만드는 태그

 2) <th> : 테이블의 헤더부분을 만드는 태그

 3) <tr> : 테이블의 행을 만드는 태그

 4) <td> : 테이블의 열을 만드는 태그