전문지식 없이 누구나 쉽게 시작할 수 있고, 평범하지만 필요한 정보들을 손쉽고 압축적으로 공유할수 있죠.
제 블로그는 이러한 본래 블로그의 목적에 맞게 양질의 정보를 공유하는데 목적이 있습니다 :)
# 글, 사진 및 이미지 위용준#
#일부 이미지는 퍼왔음을 밝힙니다.#◀
HTML CSS 기초부터 배우기 4 에 이어서 공부를 해보자.
저번 포스팅에서 각 파트별로 나누어 전체적으로 알아봤으니 본격적으로 파트별 예제와 그 사용법을 배우도록 하겠다.
Elements
나중에 혼용해서 사용 할 자바 때문이라도 정확하게 Elements에 대해서 알고 있는것이 중요하다.
Element 와 Element Content는 다르다.
Elements는 시작 태그에서 부터 끝 태그까지를 전부 Element라 한다.
예를 들어 <p> Hi </p> 라 써있다면 <p>부터 </p> 까지 전부 P(단락) Element라 할 수 있다.
HTML Element는 Content로 중첩이 가능 하다. 다음을 살펴보자
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
<html> 태그 요소는 전체 문서를 정의한다.
그 안에 <body>요소는 문서의 본문 내용을 정의 한다.
<body>안에 <h1>태그는 단락 제목을, <p>태그는 단락을 정의 한다.
앞서 말한것에 따르면 <html>와 </html> 를 포함한 모든 문장은 Element라 할 수 있다.
그 사이에 있는 <bdoy></body>는 HTML의 컨텐츠라 할 수 있는데 이는 <body></body>의 Element라 할 수 있다.
즉 대부분의 HTML의 Element(요소)는 다른 Element의 Content로써 중첩이 가능하다.
Empty HTML Element
내용이 없는 Element를 빈 요소, 즉 Empty Element라 한다.
예로 줄 바꿈을 하는 <br>의 경우 종료 태그와 안의 Content가 따로 없다. 이러한걸 빈 요소라 한다.
빈 요소는 시작태그와 동시에 닫을 수 있다.
HTML5로 넘어오면서 종료 태그를 굳이 사용하지 않아도 대부분의 브라우져가 이를 자동으로 인식하여 보여 주지만 이에 의존하지 말자.
정확하게 사용해서 손해 볼 일 없으며 후에 여러 태그와 혼용해서 쓸 경우 정확하지 않은 문법 사용은 오류의 원인이 된다.
HTML5는 시작 태그와 종료 태그는 대소문자 구분을 요구하지 않지만 역시나 정확한 사용을 위해서라면 항상 소문자로 태그를 시작하고 닫는 습관을 들이자.
Attributes
대부분의 Element는 Attribute ( 속성 ) 을 가지고 있다.
속성이란 그 요소의 추가적인 정보를 제공하는 것으로 항상 시작 태그에 지정 된다.
일반적으로 속성은 이름과 값이 쌍으로 함께 지정 된다. 예를 들면 name(속성이름)="value(속성 값)"
속성의 값은 보통 " (큰 따옴표)로 묶는게 일반적이다. 다만 Html5는 큰 따옴표로 묶지 않아도 인식이 된다.
만약 속성의 값 자체에 큰 따옴표가 들어갔다면 '(작은 따옴표)로 묶으면 된다.
1 | <p title='나는 "진짜"다'> 예시 입니다. </p> |
여기서는 각 태그에 대한 속성 예를 간단하게 몇개 들고 각 태그당 속성의 자세한 사항은 각 태그에 대한 공부를 할 때 자세히 언급 하겠다.
속성은 각 태그 마다 공통적으로 사용되는 속성과 개별적으로 사용되는 속성이 있기 때문에 각 태그와 함께 속성을 같이 알아 사용하기 용이하다.
lang Attribute
html 시작 태그와 함께 오는 속성으로 언어를 선언 할 수 있다.
검색 엔진 혹은 접근성 응용 프로그램 ( screen reader ) 등을 사용할 때 언어를 선언하는 것이 중요하기 때문에 알아둬야 한다.
예제>
1 2 3 4 5 6 7 8 | <!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> |
title Attribute
대부분 태그에 공통적으로 사용 되는 속성에는 id, class, title, style 등이 있다. title 속성은 쉽게 예를 들면 '설명 툴팁'이라 보면 된다.
해당 태그가 들어간 요소에 마우스를 대면 속성 값으로 지정된 툴팁이 표시 된다. 예를 들어 보자
1 2 3 | <p title="이것은 예시 입니다."> 타이틀 요소 </p> |
위 태그로 title속성을 넣어서 작성하면 다음과 같다. 타이틀 요소라는 글씨에 마우스롤 대보자
▶타이틀 요소◀
href Attribute
<a>태그는 속성 없이는 불안정한 태그라 할 수 있다.
링크태그로 주로 사용되는 <a>태그는 보통 속성과 함께 사용되는 태그로 href라는 링크 주소 속성과 함께 사용 된다.
링크 속성 | <a href="http://troyboy.tistory.com">이것은 묘하내 세상 블로그 링크 입니다.</a> |
<a>태그에는 타겟 속성 이라는게 있다. 해당 링크를 여는 타겟을 지정하는 속성이다.
생략하면 self로 해당 창에서 링크로 넘어가고 다음과 같이 _blank 새창을 지정 해주면 해당 링크로 넘어 갈때 새창에서 열린다.
타겟 속성 | <a href="http://troyboy.tistory.com" target="_blank" >이것은 묘하내 세상 블로그 링크 입니다.</a> |
각각을 사용하면 다음과 같다.
첫번째 예제 : 이것은 묘하내 세상 블로그 링크 입니다.
두번째 예제 : 이것은 묘하내 세상 블로그 링크 입니다.
Size Attribute
크기를 지정하는 속성은 이미지나 문단 글자, 표등 다양한 태그에서 사용된다. 예를 들어 이미지의 경우 보통 이미지 소스를 지정하는 속성인 src와 크기 속성이 함께 온다.
1 | <img src="http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile30.uf.tistory.com%2Fimage%2F250B9D4558D5B24806BB1D" width="200" height="202"> |
이를 사용하면 다음과 같이 된다.
이와 연관하여 alt Attribute라는게 존재 한다.
대체 속성으로 다양한 환경의 사용자가 웹 사이트를 이용할 수 있게 돕는 속성이다.
<h>태그나 <alt>속성과 같은 정확한 Html 사용은 사용자가 사이트를 이용하는데 도움이 될 뿐 아니라, 사이트 평가에 긍정적인 효과를 주기 때문에 꼭 적용하자.
이 속성은 Screen reader가 읽을 수 있다. 따라서 만약 맹인과 같은 웹 페이지를 '듣는 사용자'의 경우 이 속성 요소를 듣게 하는게 가능하다.
예로 위 이미지에 alt="note book" 이라 하면 여기에 노트북 이미지가 있다고 들을 수 있다.
늦어서 죄송합니다.
이제 빠르게 해당 콘텐츠를 채우도록 하겠습니다. 행복하세요 오늘도 :)
'여러가지 정보 > HTML CSS 와 블로그' 카테고리의 다른 글
| HTML CSS 기초부터 배우기 7 (홈페이지 제작, 블로그 꾸미기) (0) | 2017.07.17 |
|---|---|
| HTML CSS 기초부터 배우기 6 (홈페이지 제작, 블로그 꾸미기 ) (0) | 2017.04.18 |
| HTML CSS 기초부터 배우기 4 (홈페이지 제작, 블로그 꾸미기 ) (0) | 2017.03.31 |
| HTML CSS 기초부터 배우기 3 (홈페이지 제작, 블로그 꾸미기 ) (0) | 2017.03.28 |
| HTML CSS 기초부터 배우기 2 (홈페이지 제작, 블로그 꾸미기 ) (1) | 2017.03.23 |
