태그의 뜻과 요소와 속성 그리고 속성값 이란?1
태그의 응용
이 페이지의 주요 목록
링크 이용 html 주요 목록link태그의 요소와 속성 속성값 그리고 CSS
지난 페이지에서 기본적으로 사용하는 태그와 명령어들의 종류를 도표 로 만들어 학습을 위한 자료로 준비를 해 뒀습니다.
이제 학습자료들을 하나씩 불러와서 태그가 가진 구체적인 요소들을 파헤쳐 보도록 하겠습니다. 이미 오래전 부터 블로그를 운영하며 커리어를 쌓아 온 파워블로그들의 대부분은 이러한 태그들로 자신의 블로그 환경에 맞게 자유 자재로 다루는 마술사들의 경지에 올라 있다고 봐야 하겠죠
그리고 그들은 이런 기본적인 html 코드외의 좀더 차원높은 C언어나 자바언어 같은 프로그래밍 언어들로 블로그 운영 을 달리 하고 있는 분들이 많습니다.
그런 반면 이제 갓 블로그나 카페에 입문한 초보 블로그들에겐 가장 기본이되고 쉬우면서 원하는 것을 대부분 구현해 주는 기본 언어인 <html> 은 꼭 알고 가야 하는 필수 코스라고 할수 있습니다.
태그의 요소란 무엇 인가?
그럼 우선 태그공부를 하기 위해서는 기본적인 용어 부터 알고 가야 합니다.태그 강의나 서적에서 보면 요소 라는 말이나 글을자주 접하게 됩니다.
태그는 웹에 문서나 영상, 소리 같은 정보를 나타 내기위해 컴퓨터에 기록 하는 언어 들을 콘트롤 해주는 각종 기호들을 말합니다.그리고 이런 각각의 태그에는 목적에 맞도록 성질을 부여하고 있는데요 이렇게 부여한 성질을 태그의 요소(element)라고 할수 있는 것입니다.
처음 웹 기록 언어인 html을 만든 사람은 팀버너스리 라는 영국 사람 이고 언어는 영어를 쓰는 사람이 였 습니다.
그러다 보니 그 사람이 쓰는 언어인 영어를 기초로 태그 문자들은 개발이 되었고 특히 컴퓨터하드웨어도 영어권 언어를 쓰는 미국에서 개발 되다보니 코딩부호도 영어를 기준 언어로 코딩이 이루어 지게 된 것이죠
최초로 컴퓨터를 만든 나라인 미국에서 컴퓨터 개발자와 관련업체의 관계자들과 정부의 관련 부서원들이 한테 모여 통일된 부호들을 기계에 접목 하여 네트워크로 주고 받을때 컴퓨터 개발 회사는 다르지만 문자를 통일되게 나타내기 위해 약속을 한것이 컴퓨터 표준언어인 아스키 코드 부호 입니다.
이렇게 만들어진 아스키 문서들에 hyper 라는 기능을 접목 한 사람이 팀 버너스리 죠 하이퍼 기능은 기존의 콤퓨터 문서의 직렬식 나열 구조를 사용자 마음대로 순서를 편집 할수 있도록 문서간에 연결기능을 부여 한것 인데요 이 기능을 가진 기록 언어가 바로 html 입니다.
html 에서 문자셋을 어떻게 묶느냐에 따라 나타내는 목적이 달라지도록 묶음을 해주는 기호를 가리켜 TAG 태그 라고 하며 각각의 태그에는 사용 목적에따라 기본적인 성질을 부여 해 주고 있는데요 그런 기본 성질이 태그의 요소 입니다.
많은 컴퓨터 언어들이 개발 되고 있지만 최종 적으로 파 헤쳐 보면 이 기본 적인 요소들을 어떻게 응용한것에 지나지 않은 것입니다.
가령a태그를 ()#이라고 정의를 내리고 에디터 에다 ()#요런 기호를 쓴다면 가시적으로는 ()#이렇게 보이지만 실질적인 요소는a태그 와 같은 링크를 거는 요소 a태그 인 것이죠 마치 암호 처럼 그렇게 약속하고 통용 한 것이죠.
자바언어나 C++언어 같은 복잡하고 난해한 언어들이 많지만 근본적으로는 모두 컴퓨터 상에 존재하는 표준 언어로 컴파일 되어 나타나게 되는 것입니다.
컴퓨터를 따로 개발 하면서 독자적인 기계어를 따로 만들지 않는 이상 기존의 언어 체계 안에서 응용한 것에 지나지 않은 것입니다.
지금은 대부분 브라우져에 통일되게 구현이 되지만 초기에는 각 컴퓨터 회사마다 다른 표현 방식으로 부호를 설정 하므로 사용자가 제품에 따라 따로 공부를 해야 하는 번거러움이 있었는데요 그것을 팀버너스리가 완전하게 해결 했다고 할수가 있읍니다.
그래서 현재는 웹언어에 쓰이는 태그들에는 통일된 태그요소를 가지게 되었고 가령 a를 쓰고 꺽쇠부호로 감싸면 링크하는 힘을 요소로 b를 꺽쇠부호로 감싸게 되면 태그가 미치는 영향권안에 놓이는 문자 들은 강조가 되게 또는 u를 꺽 쇠 부호로 감싸면 및 줄 을 나타내도록 하자 이렇게 서로 약속을 하고 서로 공통으로 표기 하는 기호를 만들고 태그에는 그에 맞는 성질을 전기적으로 심어 둔것이 태그의 요소 인 것입니다.
태그의 속성과 속성 값이란 무엇 인가?
태그의 속성이란? 태그가 가진 기본 성질 안에 잠재되어 있는 성질 이라고 할수가 있으며 속성값이란? 속성 태그로 기본 태그의 성질을 구체적이고 온전하게 드러내 주고 꾸며 주는 태그가 가진 요소의 완성을 결정 짓는 값을 말합니다.
그리고 요소가 없이 상위태그에만 완전히 종속한 태그도 있는데요 a태그의 속성 태그인 href(hyper text reference)태그가 대표적인 속성 태그 라고 할수 있겠죠
기본적인 모양을 그림으로 나타내면 이렇지요
<열림태그 속성태그 또는 엘리먼트 ...속성값;"> 나타 내려는 콘텐츠의 내용 </닫힘태그>
속성 태그란 본태그가 가지고 있는 확장성을 완전하게 만들어주는 태그 라고 할수가 있습니다.
상위태그가 가진 기본적 요소를 온전하게 만들고 꾸며 주는 역할을 하는 것이죠
예를 들어
<table
width
"100px"
height100px">
<tbody>
<tr>
<td>테이블 만들기
</td>
</tr>
</tbody>
</table>이렇게 테이블을 만드는 테그요소를 가진
<table>태그로 테이블을 만들때
width와
height 태그는 테이블의 속성중 넓이와 높이를 결정 하는 속성 태그가 되는 것입니다.
그리고 100px 이 값은 속성값이 되는 것이죠 이 외에도 오직 테이블에만 존재 하며 테이블 바디를 꾸며주는 속성태그 인 <tbody> 태그 와 테이블을 분할을 맏고 있는 속성 태그인 <tr>태그 와 테이블 내의 각종 정보를 담는 속성 태그인 <td> 태그들을 하위 속성 태그로 거느리고있 답니다.
바로
<tr> 태그 인데요 이 태그의 성질중에는 분할 하는 성질 즉 요소를 가지고 있는데요 이것의 하위 속성으로는
col 가로 정렬
row 세로 정렬 의 속성 태그들을 가지고 있죠 이렇게 자신의 요소를 가지면서 상위태그의 속성 태그로 종속된 태그 와 독립된 요소 태그 들이 html요소 안에 다 포함되어 있는 것을 알수가 있습니다
이렇게 기본적인 용어들을 알았으니 자 그럼 이제부터 웹 문서의 가장 기본이 되는 언어 <html>에 대해서 알아 보도록 합니다.
문서 의 기본 바탕이 되는 <html>의 뜻과 태그 부터 알아 보도록 합니다.
<html>
:문서 전체를 결정 하는 부분<html> 의 의미
<html> 이란? hyper text makup language의 접두어로 hyper 속에 문서와 문서를 연결 해주는 전기적 힘 을 컴퓨터에 심어 url 이라는 컴퓨터 웹상에 부여 되는 고유 주소를 갖는 페이지들을 연결 하는 컴퓨터 기록 언어 입니다.<html> </html>열린태그와 닫는태그 한쌍으로 이루어 지며<html>열린 태그로 문서의 시작 </html> 닫히는 태그로 문서의 끝을 표기 합니다. <html>문서의 최상위 태그 로 문서 전체를 결정 짓는 태그 입니다.
하위 태그 <head> <title > <body><footer>들을 가지고 있으며 <html>내에 기록되는 언어는 브라우져를 통해 시각화 됩니다.
<html> 의 주요 속성 태그들
<html>:문서의 시작<head>: html문서의 머리
<title>..</title>: html문서의 제목과 끝
</head>: html문서의 머리 끝
<body>..: html문서의 본문
<footer>..</footer>: html문서의 최 하위 부분에 위치 하며 콘텐츠의 지원 주체들과 라이센스의 표기를 하는 부분
<aside>..</aside>: html 문서의 본문과는 직접적 연관 없지만 전체 문서의 서버 역활을 하는 부분 주로 사이드바로 나타 냄
</body>: html문서의 본문 끝
</html>:문서의 끝<head>:문서의 title 과 datebase집합을 구성 하는 요소 태그
<head>태그는 한쌍의 열린태그<head>와 닫힌태그</head>로 구성 되며 <html>문서의 타이틀을 담아내는 요소 와 meta 데이타 정보를 집합 시켜 주는 요소를 가진태그 입니다.
<head>태그 와
</head>태그 사이에
<title></title>속성 태그가 위치해 전체 문서의 핵심 주제를 관장 하며
<meta>태그로
datebase의 집합을 위치 시켜 주는 요소를 가진 태그 이며
특히 head태그 안에 위치한 타이틀 속성은 브라우져상에 가시적 실현은 일어나지 않으며 외부 검색 봇에 타켓팅 되는 요소 입니다.
<title>:문서의 주제 를 구성 하는 요소 태그
<title>태그는 한쌍의 열린태그<title>와 닫힌태그</title>로 구성 되며 <html>문서의 타이틀을 담아내는 요소를 가진태그 입니다.
<head>태그 와
</head>태그 사이에
<title>속성 태그로 위치해 전체 문서의 핵심 주제를 관장 하는 요소를 함께 가진 태그 입니다.
<body>태그에서 위치 하는 경우엔 문서의 핵심 주제를 강조 해주는 요소를 가지며 바디상의 타이틀은 브라우져 상에 가시적 실현을 하게 됩니다.
<head>태그 와
</head>태그 사이에 위치 할 때는
meta-datebase의 집합을 위치 시켜 주는 요소를 가지며
특히 head태그 안에 위치한 타이틀 속성은 브라우져상에 가시적 실현은 일어나지 않으며 외부 검색 봇에 타켓팅 되는 요소를 가지게 됩니다.
<body>
html 문서의 본문의 내용을 구성 하는 요소 태그
<body>:
태그 는 열린태그
<body>와 닫는 태그
</body> 한쌍으로 구성되며
<html>문서에서
<head>아래 위치 하며 본문의 콘텐츠를 담아내는 주된 요소를 가진 태그로
<body>안에 기록된 정보들은 브라우져상에 가시적으로 실현 되기에
<html> 에서 중요한 범위를 차지 한다고 할수 있습니다.
지금부터는
<body>와 </body>사이에 들어가는 본문에 사용하는 테그들 을 알아 봅니다.
hyper link 요소
a(anchor)태그자 그럼 이페이지 에서 팀버너스리를 언급한 지난 시간에 공부한 페이지로 링크를 한번 걸어 봅니다.
팀 버너스리
a태그 url을 연결 해주는 href 속성
자 이렇게 정확 하게 주소를 표시 해 주기만 하면 틀림없이 그곳으로 이끌어 준다는 걸 알수 있습니다.그럼 이렇게 마술 같이 순식간에 지시 하는 곳으로 이동 하게 해주는 힘은 어디서 오는 것일까요?
이동을 사람이 하는 것이 아니니 그 주소의 콘텐츠를 눈앞으로 끌어 온다는 표현이 맞을것 같네요그럼 그런 힘은 어디서 생겨난 것일까요?
그것이 바로 이 태그 hyper 속에 문서와 문서를 연결 해주는 전기적 힘 을 컴퓨터에 심어 놓았기 때문에 가능 한 것이죠 이 힘이 a 태그에 걸리면 a 테그와 전기적으로 연결된 url 이라는 고유의 주소를 타고 흐르게 되고 그렇게 타겟팅된 주소의 콘텐츠묶음 들이 클라이언트의 브라우져로 확 끌려 오게 되는 것입니다.
이 기술이 컴퓨터에 접목 되면서 인터넷은 오늘날과 같은 비약적 발전을 가져 올수가 있었든 것입니다.
그런 문서를 코드 라는 형식으로 컴퓨터에 기록한 언어가 바로 html <hyper text makup language> 입 니다.
오늘은 hyper 코드중 링크를 담당 하는 a (anchor)태그 코드를 분석 해 보기로 합니다
우선 링크를 걸기 위해서는 url 이라는 컴퓨터 웹상에 부여 되는 고유 주소를 알아야 하겠지요
위에서 예제로 들었든 팀버너스 리 라는 사람을 찾아 현재 자신의 컴퓨터 시야 속으로 끌어 오기 위해서 그 내용을 담고 있는 콘텐츠 주소를 도출 해 내야 하겠죠
주소를 도출 하는방식은 아주 간단 합니다. 웹페이지 상단에는 항상 그 페이지를 표시 해주는 주소를 띄워 주는 바가 있기 때문에 이 바(bar)안의 주소를 복사 해서 a 테그로 감싸 주면 되는 것이죠 주소를 가져와 표시를 하면 이런식으로 표시가 되겠지요
<a href="http:// eproo.tistory.com/63#4;">팀버너스리 </ a> Html 태그로 웹 문서를 코딩 할때는 위의 모습 이지만 우리가 보게되는 브라우져에는 이런식으로 보이게 되겠죠
팀 버너스리
<a>태그의 중요한 속성과 태그들
<body>
<a>. . .... . .
</a>
</body>바디 속에 코딩 된 하이퍼 텍스트
<a>태그의 모습
<a
href=". . .... . ."
</a>주소를 타겟팅 하기 위한
href속성을 가진
<a> 태그의 기본 구조
<a
href
팀 버너스리 link
</a>주소
URL 라는 속성값을 가진
<a> 태그의 모습
<a href="http:// eproo.tistory.com/63#4">
팀버너스 리
</a>타켓팅 된
URL 로 연결 되어진 팀버너스 리 라는 이름이 가진 콘텐츠 내용으로 완성된<a> 태그의 모습
a 태그의 속성들 중 타게팅 되는 위치를 지정 해주는 속성 태그
target 이 있습니다.
타겟의 위치는 속성값에 따라 위치는 달라 지게 됩니다.
(예제1) 새 창에서 열기
< a href="#" target="_blank">
(예제2)브라우져 의 윗쪽에 타겟팅 되며 프레임을 무시한 현재 브라우져창에 타겟대상이 가득 채워짐 새창 열기와 비슷한 효과 발생 < a href="#" target="_top">
(예제3) 현재 위치 에서 열기 < a href="#" target="_self">
(예제4)부모 frame에서 열기 < a href="#"; target="_parent">
이렇게 속성값에 따라 타겟팅 되는 위치가 달라 집니다.
<a> 태그의 요소중에는 타겟팅 되는 콘탠츠의 위치를 지정 해주는 요소를 가지고 있습니다.
이 요소는 페이지값을 가지는 name속성 으로 이루어져 있습니다.
CSS(Cascading Style Sheet)란?
CSS 란Cascading Style Sheet의 접두어 로 태그가 구현한 속성값을 꾸며주는 것을 의미 하며 sheet라는 구간을 만들어 관리 하는것을 말합니다.
외부에 위치 하는 서버의 스타일 시트를 링크해서 꾸며주는
External style sheet방식 과 내부의 시트 를 링크해서 적용 하는
internal style sheet 태그에 직접 작용하여 꾸며주는
in line style 방식이 있습니다.
대략적인 링크 형태를 살펴 보면 아래 그림처럼 html문서의 메인 시트의 헤드부에 선언을 해줍니다
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link href="./images/fastboot.css" rel="stylesheet" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<title>CSS 스타일 시트로 테이블 만들기</title>
</head>
style/css
.a-box {table width:300px; height:150px; align:center; cellpadding:0; cellspacing:0px; border-collapse:collapse;}
.a-box tbody tr td {text-align:center; width:150px; height:150px; margin:0px; cellspacing:5px; border:1px solid red;
}
</style>
아래는 fastboot이라는 외부의 서버 스타일 시트에 링크를 해서 하는 External Style/CSS 스타일 방식으로 외부 서버를 링크한 모습 입니다.
외부의 서버 사이트 뿐만 아니라 자신의 홈 에 있는 글쓰기 에디트 에도 스타일을 정의 하여 사용 할수 있습니다.
링크한 모습은 이런 모습이 되겠죠
<style>
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
</style>
</body>
이렇게 내부 링크 스타일 방식 과 임시 추출 한 시트를 혼합 하여 사용 하는 방식을 혼합방식 이라고 하며 이런 유형도 internal Style/sheet 방식 이라고 할수 있겠습니다.
현재 우리가 가장 많이 사용 하는 방식 이라고 할수 있을 것입니다.
보통 지금 현재 제 블로그 의 skin 에디터처럼 internal style sheet 방식으로 된 sheet를 보조적으로 하단에 따로 두고 바디의 콘텐츠를 꾸며 주고 있는 데요 전형적 css style sheet라고 할수 있겠습니다.
아래 예제 참고