HTML 테이블

-테이블은 <table>태그로 정의된다.

-각 행은 <tr>태그로 정의된다.

-테이블 해더는 <th>로 정의된다.

-테이블 데이터/셀은 <td>로 정의된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table style="width:100%">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>BBANG</td>
    <td>ONE</td>
    <td>21</td>
  </tr>
  <tr>
    <td>BOSU</td>
    <td>SHIN</td>
    <td>21</td>
  </tr>
</table>
cs


참고

<td> 요소는 텍스트,이미지,목록,다른테이블 등 모든 종류의 HTML요소를 포함할 수 있다.


테이블 테두리

-<head>안의 <style>에 border 선언을 해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px solid black;
}
</style>
</head>
<body>
 
<table style="width:100%">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>BBANG</td>
    <td>ONE</td>
    <td>21</td>
  </tr>
  <tr>
    <td>BOSU</td>
    <td>SHIN</td>
    <td>21</td>
  </tr>
</table>
 
</body>
</html>
cs

  • border를 정의할땐 꼭 table과 table cell을 동시에 선언 해야한다.

  • 테이블의 테두리가 2개인 이유는 <table>태그와 <th>,<td>의 테두리들이 겹쳐있기 때문이다.

테이블 한 줄 테두리

-한 줄로 설정하려면 border-collaspe속성을 사용해야 한다.

1
2
3
4
5
6
7
8
<head>
<style>
table, th, td {
  border: 2px solid black;
border-collapse: collapse
}
</style>
</head>
cs














참고사이트

w3school

TCPschool





저작자표시 비영리

'WEB > HTML' 카테고리의 다른 글

HTML_이미지  (0) 2019.02.04
HTML_링크  (0) 2019.02.01
HTML_주석  (0) 2019.02.01
HTML_인용구  (0) 2019.01.31
HTML_서식  (0) 2019.01.31

HTML 이미지

-이미지는 <img>태그로 삽입된다.

-<img>태그는 끝태그가 없고 속성만 가질 수 있다.

1
<img src="URL">
cs

  • src속성은 이미지의 URL을 지정한다.
  • URL에 파일의 주소를 입력해줘야한다.

alt Attribute

-이미지가 어떠한 오류로 인해 볼 수 없을때 대신 보여지는 텍스트를 삽입한다.

1
<img src="examples/Mypiceture.jpg" alt="NOPE">
cs


참고

alt속성이 없으면 웹페이지가 제대로 검증할 수 없다.


Image Size

-style 속성을 사용하여 폭과 높이를 설정할 수 있다.

1
<img src="examples/SW.jpg" alt="SW logo" style="width:300px; height:300px;">
cs

-style 속성대신 width와 height 속성으로 지정할 수 있다.

-width와 height 속성은 픽셀로 정의된다.

1
<img src="examples/SW.jpg" alt="SW logo" width="300" height="300px">
cs


참고

이미지의 width와 height를 지정하지 않으면 이미지가 로드되는 동안 페이지가 깜빡일 수 있다.


Image <style> or <width&height>

-style 속성을 사용하여 폭과 높이를 설정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
<style>
/* 페이지(sheet)의 모든 이미지의 폭을 30%로 설정한다.*/
img{
  width : 30%;
}
</style>
<p>
  <h3>Size with width and height</h3><br>
  <img src="examples/SW.jpg" alt="SW logo" width="200" height="200px">
</p>
<br>
<p>
  <h3>Size with style</h3><br>
  <img src="examples/SW.jpg" alt="SW logo" style="width:200px; height:200px;">
</p>
 
 
</body>
</html>
cs

  • style을 사용하면 페이지(sheet)의 이미지 사이즈를 무시하고 삽입할 수 있다.


Image border

-border 속성을 이용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있다.

1
2
<img src="examples/SW.jpg" alt="SW logo" 
style="width:200px; height:200px; border:3px solid black">

cs


Image Link

-이미지에 링크를 넣을 수 있다.

-<img>태그를 <a>태그 안에 넣으면 된다.

1
2
3
<a href="https://beinmy.tistory.com/" title="Go to my blog">
    <img src="examples/SW.jpg" alt="SW logo" style="width:200px; height:200px;border:0;">
</a>
cs

  • border:0 은 Internet Explorer 9 이전의 브라우저가 링크걸린 이미지의 테두리를 표시하는 것을 방지한다.

  • 이미지를 누르게 되면 설정된 URL로 접속된다.


Image Map

-<map>태그를 이용한다.

-이미지의 일부만 지정하여 클릭할 수 있게 한다.

-shape엔 default, rect, circle, poly의 value값을 설정할 수 있다.

1
2
3
4
5
6
<img src="examples/SW.jpg" alt="SW logo" usemap="#SW" style="width:200px; height:200px;">
  <map name="SW">
    <area shape="rect" coords="20,50,180,180" alt="Chung-Ang University"
    href="https://www.cau.ac.kr/index.do">
  </map>
</p>
cs
  • <map name>은 <img>의 usemap속성과 관계되며, 같은 name으로 연결하면 이미지와 맵사이의 관계가 설정된다.
  • <map>은 이미지의 클릭 가능한 영역을 지정하는 <area>태그를 포함한다.

  • 이미지를 꾹 누르면  coords에 입력한 정사각형 모양의 범위가 뜬다.
  • 이미지를 누르게 되면 설정된 URL로 접속된다.


Picture

-<picture>요소는 브라우저의 크기에 따라 가장 적합한 이미지를 선택하여 내보낸다.

-따라서 각각 다른 이미지 소스를 가리키는 다수의 <source>요소를 포함하고 있다.

1
2
3
4
5
<picture>
  <source media="(min-width: 1300px)" srcset="공학도.jpg">
  <source media="(min-width: 800px)" srcset="cau100th.png">
  <img src="examples/SW.jpg" alt="SW logo" usemap="#SW" style="width:auto;">
</picture>
cs

  • 폭이 1300px 이상이면 공학도.jpg를 내보낸다.
  • 폭이 800px 이상이면 cau100th.png를 내보낸다.
  • 아무것도 해당하지 않을때, img태그안에 있는 SW.jpg를 내보낸다.


움직이는 애니메이션

.gif 확장자의 애니메이션 그림도 넣을 수 있다.



참고사이트

w3school

TCPschool



저작자표시 비영리

'WEB > HTML' 카테고리의 다른 글

HTML_테이블  (0) 2019.02.14
HTML_링크  (0) 2019.02.01
HTML_주석  (0) 2019.02.01
HTML_인용구  (0) 2019.01.31
HTML_서식  (0) 2019.01.31

HTML 링크

-링크는 <a>태그로 정의된다.

1
<a href="URL">TEXT</a>

cs
  • TEXT에는 페이지에서 보이는 부분이다.
1
<a href="https://beinmy.tistory.com/">Visit my blog</a>
cs
  • 클릭하면 URL에 저장된 주소로 이동한다.


참고

<a>태그에서 TEXT부분은 이미지나 단락등 다양한 요소를 사용할 수 있다.


Local Link

Local Link는 relative URL(https://www... )을 제외해도 링크된다.


HTML target Attribute

-target 속성은 링크된 문서를 어디서 열지 지정한다.

  • _blank - 새 창 또는 탭에서 문서를 연다.
  • _self - 기본값 - 지금보고있는 창이나 탭에서 문서를 연다.
  • _parent - 상위 프레임에서 연다.
  • _top - 현재 창 본문 전체에 링크된 문서를 연다.
  • framename - 지정된 프레임에서 연다.
1
2
3
4
5
6
7
<p><a href="https://beinmy.tistory.com/" "target = _blank">Visit my blog at blank</a></p>
<p><a href="https://beinmy.tistory.com/" "target = _self">Visit my blog at self</a></p>
<p><a href="https://beinmy.tistory.com/" "target = _parent">Visit my blog at parent</a></p>
<p><a href="https://beinmy.tistory.com/" "target = _top">Visit my blog at top</a></p>
<p><a href="https://beinmy.tistory.com/" target="inframe">Visit my blog at frame</a></p>

<iframe name="inframe" style="width : 30%; height : 330px"></iframe>
cs


참고

현재 페이지가 프레임속에 갇혔다면, "target = _top"을 사용하여 프레임에서 벗어날 수 있다.


HTML 프레임

frame에 대한 더 자세한 내용은 HTML iframe


HTML 링크 타이틀

-title 속성은 요소에 대해 추가적인 정보들을 보여준다.

1
<a href="https://beinmy.tistory.com/" title="Go to My Blog">Visit My Blog</a>
cs
  • 커서를 링크위에 올릴때 나오는 텍스트이다.



참고사이트

w3school

TCPschool



저작자표시 비영리

'WEB > HTML' 카테고리의 다른 글

HTML_테이블  (0) 2019.02.14
HTML_이미지  (0) 2019.02.04
HTML_주석  (0) 2019.02.01
HTML_인용구  (0) 2019.01.31
HTML_서식  (0) 2019.01.31

HTML 주석

-주석(comment tag)로 웹브라우저에 표현되지 않으면서 설명을 넣을 수 있다.

1
<!-- Comment here -->
cs
  • 주석의 시작코드는 <!-- 인 반면
  • 끝코드는 -->임을 확인한다.

e.g.

1
2
3
<!-- This is comment -->
<p>Where is comment?</p>
<!-- Here is comment -->

cs


HTML 중복주석

-주석은 중복으로 사용이 불가하다.

e.g

1
2
3
4
5
6
<!-- This is comment -->
<p>Where is comment?</p>
<!-- Here is comment
    <!-- This is superimposed comment -->
    This is another comment
-->
cs

  • 주석을 중복으로 사용하게 되면, 삽입된 주석의 끝태그를 첫번째 주석의 종료태그로 인식한다.


따라서

HTML 문서에서 주석을 중첩으로 사용하면 안된다.



참고사이트

w3school

TCPschool



저작자표시 비영리

'WEB > HTML' 카테고리의 다른 글

HTML_이미지  (0) 2019.02.04
HTML_링크  (0) 2019.02.01
HTML_인용구  (0) 2019.01.31
HTML_서식  (0) 2019.01.31
HTML_스타일  (0) 2019.01.30

HTML 짧은 인용구

-짧은 인용구는 <q> 를 이용하여 표현할 수 있다.

e.g.

1
<p>My goal : <q>Make site for One-BBANG</q></p>
cs


HTML 블록 인용구

-블록 인용구는 <blockquote>를 이용하여 표현할 수 있다.

-별도의 단락으로 구분하여 나타낸다.

1
2
3
4
<p>My goal</p>
<blockquote>
Make a site for One-BBANG is my goal. i want to make him famous.
</blockquote>
cs


HTML 축약형

-<abbr>을 이용하여 약어를 표시할 수 있다.

-약어를 사용하면 브라우저, 번역 시스템, 검색엔진에 유용한 정보를 제공할 수 있다.

1
2
3
<p>Put cursor over OB</p>
<p><strong><abbr title ="One-BBANG">OB</abbr></strong> is handsome. 
i want to make him famous.</p>
cs
  • title 속성값에 있는 값이 표시된다.


HTML 주소

-<address>를 이용하여 작성자/소유자의 주소를 표현한다.

-주소는 기울임체로 쓰여진다.

1
2
3
4
5
6
7
8
blank
<address>
Sangdo-ro,<br>
Dongjak-gu,<br>
Seoul,<br>
Republic of Korea
</address>
<p>blank</p>
cs
  • 일반적으로 위아래에 줄바꿈이 들어간다.


HTML <cite>

-<cite>는 작품의 제목을 의미한다.

-보통 기울임으로 표현한다.

1
2
Put image here <br>
<p><cite>One-BBANG</cite> by Oh_Park, Painted in 2019
cs



HTML 작성방향 재정의

-<bdo>는 텍스트 방향을 재정의하는 데 사용된다.

-브라우저가 양방향재정의 ( Bi-Directional Override )를 지원해야 한다.

1
2
<p>written from right to left(rtl)</p>
<bdo dir="rtl">written from right to left(rtl)
cs
  • direction으로 Right To Left를 설정해주면 오른쪽에서 왼쪽으로 써지는 것을 볼 수 있다.



참고사이트

w3school

TCPschool



저작자표시 비영리

'WEB > HTML' 카테고리의 다른 글

HTML_링크  (0) 2019.02.01
HTML_주석  (0) 2019.02.01
HTML_서식  (0) 2019.01.31
HTML_스타일  (0) 2019.01.30
HTML_단락  (0) 2019.01.29

HTML 서식

-웹페이지에서 특별한 부분은 특별하게 표현하듯, HTML에서도 특별하게 표현할 수 있다.

  • <b> - 굵게
  • <strong> - 중요
  • <i> - 기울임
  • <em> - 강조
  • <mark> - 하이라이팅
  • <small> - 작게
  • <del> - 삭제된
  • <ins> - 삽입된
  • <sub> - 아래첨자
  • <sup> - 위첨자


HTML <b> , <strong>

-강조효과

1
2
<p>This is normal <b>This is bold text</b></p>
<p>This is normal <strong>This is strong text</strong></p>
cs


HTML <i> , <em>

-기울임체

1
2
<p>This is normal <i>This is italic text</i></p>
<p>This is normal <em>This is emphasized text</em></p>

cs


참고

<b>와<i>는 텍스트를 굵거나 기울임체로 표현만 하지만

<strong>와 <em>은 텍스트가 '중요'하다다는 것을 내포한다.


HTML <mark> , <small>

-하이라이팅 , 작은 텍스트

1
2
<p>This is normal <mark>This is mark text</mark></p>
<p>This is normal <small>This is small text</small></p>

cs


HTML <del> , <ins>

-삭제선 , 삽입선

1
2
<p>This is normal <del>This is delete text</del></p>
<p>This is normal <ins>This is insert text</ins></p>

cs


HTML <sub> , <sup>

-아래첨자 , 위첨자

1
2
<p>This is normal <sub>This is subscript text</sub></p>
<p>This is normal <sup>This is superscript text</sup></p>
cs



참고사이트

w3school

TCPschool



저작자표시 비영리

'WEB > HTML' 카테고리의 다른 글

HTML_주석  (0) 2019.02.01
HTML_인용구  (0) 2019.01.31
HTML_스타일  (0) 2019.01.30
HTML_단락  (0) 2019.01.29
HTML_제목  (0) 2019.01.29

HTML 스타일<CSS>

-style Attribute를 사용하여 서식을 나타낼 수 있다.

1
<tagname style="property:value;">
cs
  • property와 value값에 대해선 CSS에서 자세히 다룬다.


HTML 배경색

-background-color 속성은 HTML요소들의 배경색을 지정한다.

e.g.

1
2
3
4
5
6
<body style="background-color:purple;">
 
<h1>제목_배경색</h1>
<p>단락_보라색</p>

</body>
cs


HTML 폰트,크기,정렬

-font-family 속성을 사용하여 글꼴을 설정할 수 있다.

-font-size 속성을 사용하여 크기를 설정할 수 있다.

-text-align 속성을 사용하여 텍스트를 정렬할 수 있다.

e.g.

1
2
3
4
5
6
7
8
<h1 style="font-family:Monospace;">Monospace Heading</h1>
<p style="font-family:Georgia;">Georgia paragraph</p>
 
<h1 style="font-size:250%;">250% Heading</h1>
<p style="font-size:200%;">200% paragraph.</p>
 
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:right;">right_aligned paragraph.</p>
cs


HTML style 중첩

-인용구 안에 style Attribute를 중첩으로 쓰면 적용된다.

e.g.

1
2
3
4
5
<p style="font-size:160%; font-family:georgia; text-align:center;">160%
<br>
georgia
<br>
centered</p>
cs
  • ;으로 속성의 마지막을 끝낸다.


참고

140 standard color names

140 colors sorted by HEX Value

More Styles _ CSS



참고사이트

w3school

TCPschool



저작자표시 비영리

'WEB > HTML' 카테고리의 다른 글

HTML_인용구  (0) 2019.01.31
HTML_서식  (0) 2019.01.31
HTML_단락  (0) 2019.01.29
HTML_제목  (0) 2019.01.29
HTML_속성  (0) 2019.01.28

HTML 단락(Paragraph)

-<p> 태그로 정의된다.

-HTML 코드에 직접 공백이나 추가 줄을 추가하여 출력결과를 바꿀 수 없다.

-많은 양의 띄어쓰기도 하나의 띄어쓰기로 인식한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<p>단락1</p>
<p>단락2</p>
 
<p>
이 단락은
많은 띄어쓰기를
포함하지
않는다.
</p>
 
<p>
이        단락은
많은     띄어쓰기를
포함    하고    있지만
페이지에    표시    되지 않는다.
</p>
 
<p>
문단의 줄 수는 브라우저 창의 크기에 따라 달라진다.
</p>
 
<p>
브라우저 창의 크기를 조정하면 단락의 줄 수가 바뀐다.
</p>
cs

  • 아무리 ENTER키를 눌러도 줄바꿈을 인식하지 못한다.


HTML 줄바꿈(Line Breaks)

-<br> 태그로 정의된다.

1
<p>새로운 줄을<br>만들수<br>있습니다.</p>
cs
  • <br>태그는 끝 태그가 없는 빈 태그이다.


HTML 서식 미리 지정

-<pre> 태그로 정의된다.

-<pre>태그 내에있는 모든 텍스트는 그대로 표현된다.

1
2
3
4
5
6
7
8
<pre>
줄을    막 나눠
 
봅  시다.      이렇게
말
 
이        죠
</pre>
cs

  • <pre>태그 내에있는 텍스트 서식은 고정 너비 글꼴로 표시된다.



참고사이트

w3school

TCPschool



저작자표시 비영리

'WEB > HTML' 카테고리의 다른 글

HTML_서식  (0) 2019.01.31
HTML_스타일  (0) 2019.01.30
HTML_제목  (0) 2019.01.29
HTML_속성  (0) 2019.01.28
HTML_요소  (0) 2019.01.28

+ Recent posts

티스토리툴바