검색결과 리스트
글
HTML 소개
언어로그/Html/Javascript/CSS
2011. 6. 13. 23:22
1. HTML (Hyper Text Markup Language)
문서가 서로 다른 OS에서 동일한 형식으로 보여지게 하기위한 필요성에 의해 등장했으면, SGML 이란 마크업 언어를
원류로 하고 있다.
원류로 하고 있다.
2. HTML의 구성
<head> 와 같은 눈에 보이지 않는 요소 와 <table>. <div>와 같은 눈에 보이는 요소 로 나뉜다
눈에 보이는 요소는 다시 block-level 과 inline-level 로 구분된다.
block-level 은 <div>와 같이 한라인에 하나만 위치할 수 있는 요소이고,
inline-level 은 <span>과 같이 한라인에 복수로 위치할 수 있는 요소이다.
inline-level 은 <span>과 같이 한라인에 복수로 위치할 수 있는 요소이다.
<div style="border:1px gray solid;">block-level element </div> <div style="border:1px gray solid;">block-level element </div> <span style="border:1px gray solid;">inline-level element </span> <span style="border:1px gray solid;">inline-level element </span>
block-level 요소는 inline-level 요소를 포함할 수 있지만, 그 반대는 불가능하다 .
2.1 block-level elements
p - 문단태그
h1~h6 - 글씨 태그
ul - 도형목록 태그
ol - 순서목록 태그
pre - 공백까지 그대로 출력
dl
div - 영역을 지정해줌
noscript
blockquote
form
hr - 수평선을 그려줌
table
fieldset
address
2.2 inline-level elements
samp
kbd
var
cite
abbr
acronym
a - 링크
img - 이미지
object
br
script
map
q
sub
sup
span
bdo
input
select
textarea
label
button
2.3 table 태그
사이트에 레이아웃을 잡는데 활용되며, 중첩해서 사용할 수 있다.
<table border=1 width="700" height="400">
<tr>
<td height="10%">상단</td>
</tr>
<tr>
<td height="80%" width="100%">
<table border=1 height="100%" width="100%" >
<tr>
<td> 테스트 1</td>
<td> 테스트 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10%">하단</td>
</tr>
</table>
2.4 table 선을 단선으로 표현하기 : border-collapse
table에 border 속성을 주면 2중 선으로 테투리가 그려지는데, style 속성으로 border-collapse:collapse 를 줘서 단선으로 그릴수 있다.
<table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse;border:1px gray solid;">
<tr>
<td style="border:1px gray solid;">Css </td>
<td style="border:1px gray solid;">Cascading Style Sheet</td>
</tr>
</table>
2.5 table 셀 크기 고정하기 : table-layout 속성
table 태그에 한글을 쓰면 중간중간 공백이 들아가기 때문에 테이블의 width에 맞춰 자동 줄바꿈이 된다.
그러나 공백이 없는 영문 주소와 같은경우, width 를 지정해줘도 밀리는 경우가 생긴다.
이때 table 태그 style 속성에 style="table-layout:fixed" 를 지정해서 밀리는 것을 방지할 수 있다.
그러나 이럴경우, width 를 넘어서는 부분은 내용이 잘리는데, word-break:break-all 속성으로 width에 맞춰
줄바꿈하게 해줄 수 있다.
<!-- 한글은 공백으로 인해 자동 줄바꿈 -->
<table width="200" cellpadding="5" cellspacing="2" border="1" align="center">
<tr>
<td> 셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.</td>
</tr>
</table>
<!-- 공백이 없는 영문주소는 width를 지정해도 셀이 측면으로 밀림 -->
<table width="200" cellpadding="5" cellspacing="2" border="1" align="center">
<tr>
<td>http://www.homejjang.com/09/border-callapse.php</td>
</tr>
</table>
<!-- table-layout:fixed 를 설정해서 셀 크기 고정 : 하지만 내용이 잘린다. -->
<table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout: fixed;">
<tr>
<td>http://www.homejjang.com/09/border_collapse.php</td>
</tr>
</table>
<!-- word-break:break-all; 지정해서 width에 맞춰 줄바꿈이 일어나게 함 -->
<table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed; word-break:break-all;">
<tr>
<td>http://www.homejjang.com/09/border_collapse.php</td>
</tr>
</table>
'언어로그 > Html/Javascript/CSS' 카테고리의 다른 글
| HTML5 Canvas API (0) | 2012.03.11 |
|---|---|
| jquery 간략한 사용법 (0) | 2011.10.15 |
| [HTML5] 데이터 스토리지 (0) | 2011.06.26 |
| HTML 소개 (0) | 2011.06.13 |
