All about {Web}

[HTML] Tag ; address, area, article

Web Design/HTML & HTML 52018. 5. 7. 17:49

[HTML/HTML5] Tag ; address, area, article

04. [ address ]
☞ 정의 :  address요소는 연락처 정보를 나타냅니다
☞ 설명 :  가장 가까운 상위의 <article>이나 <body>의 연락처 정보를 제공할 때 사용됩니다.
☞ 예제 :

<footer>
    <address>
        오시는 길 : 서울시 서울구 서울동 123-777 77호 <br />
        이메일 : <a href="mailto:sample@example.com"> test@test.org</a><br />
        <a href="http://www.facebook.com/test">Facebook</a> | 
        <a href="http://www.twitter.com/test">Twitter</a><br />
    </address>
    <p><small>©copyleft 2077 test.org</small></p>
</footer>


05. [ area ]
☞ 정의 :  area요소는 이미지맵의 영역을 지정하기 위한 요소입니다.
☞ 속성
shape : 영역의 형태를 지정합니다.
default : 화면전체
rect : 사각형
circle : 원형
poly : 다각형
coords : 영역의 좌표를 지정합니다.
shape속성값이 rect일때 : 왼쪽위의 XY좌표와 오른쪽아래 XY좌표
shape속성값이 circle일때 : 중심의 XY좌표와 반경
shape속성값이 poly일때 : 첫번째 각의 XY좌표, 두번째각의 XY좌표, 세번째각의 XY좌표
href : 해당영역 클릭시 이동할 주소를 지정합니다.
alt : 영역을 설명할 대체 텍스트를 지정합니다.
☞ 설명
href속성을 갖는다면 alt 속성을 반드시 사용하는것이 좋습니다. 반대로 href속성을 갖지 않는다면 alt속성역시 반드시 생략되는것이 좋습니다.
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>


06. [ article ]
☞ 정의 :  article요소는 문서내에서 독립적인 컨텐츠를 나타냅니다.
☞ 설명 :
article요소는 포럼의 글이 될수도 있고, 잡지나 신문의 기사일 수도 있으며, 블로그의 글이나 사용자가 올린 의견이나 상호작용적인 위젯이나 가젯 또는 다른 어떤 독립적인 아이템등이 될 수 있습니다.
하나의 문서 안에서 여러개의 article가 올 수 있습니다.
☞ 예제
<article>
  <h1>Google Chrome</h1>
  <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>

저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

[HTML] Tag ; b, base, bdi  (0) 2018.05.08
[HTML] Tag ; aside, audio  (0) 2018.05.08
[HTML] Tag ; a, abbr, acronym  (0) 2018.05.07
HTML5 - New Structural Tags : <nav>  (1) 2018.04.28
HTML5 - New Structural Tags : <footer>  (0) 2018.04.28

HTML5 - New Structural Tags : <aside>

Web Design/HTML & HTML 52018. 4. 28. 11:56

HTML5 - New Structural Tags ( 구조 태그 ) :  <aside></aside>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

03. <aside></aside>
aside 요소는 주위 요소의 내용과 접점을 이루는 섹션으로, 보통 사이드바 형태로 표현됩니다.
인용구, 광고, 네비게이션 용도로 사용할 수 있지만, 단순한 삽입구에 사용하는 것은 적합하지 않습니다.
source )
<!DOCTYPE html>

<html>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<aside>
   <h4>Code is Poetry</h4>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</aside>
<p><strong>Note:</strong> The aside tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

result )
Lorem ipsum dolor sit amet, consectetur adipisicing elit

Note: The aside tag is not supported in Internet Explorer 8 and earlier versions.



저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <header>  (0) 2018.04.28
HTML5 - New Structural Tags : <hgroup>  (0) 2018.04.28
HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML - META tag  (0) 2018.04.26

HTML5 - New Structural Tags : <section>

Web Design/HTML & HTML 52018. 4. 26. 10:30

HTML5 - New Structural Tags ( 구조 태그 ) : <section></section>



01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

01. <section></section>
HTML Section 요소 (<section>) 는 문서의 일반적인 구획을 나타냅니다. 즉, (전형적으로 제목을 가지고 있는) 컨텐츠의 주제 그룹을 말합니다. 각 <section>은 식별되어야하며, 일반적으로 (<h1>-<h6> 요소들을 자식으로 가집니다.

- 제목으로 시작하는 컨텐트를 의미적으로 그룹핑하기 위해 사용됩니다.
- section요소를 사용할 수 있는 예로는 챕터나 탭으로 구분된  대화상자에서 탭된 페이지, 또는 논문의 번호가 매겨진 색션이 될 수 있습니다. 홈페이지에서는 소개, 뉴스 아이템, 연락처등이 섹션으로 분리될 수 있습니다.
- 요소의 컨텐츠를 배포해도 이치에 맞다면 section요소대신 article요소를 사용할것을 권장합니다.
- section요소는 일반적인 컨테이너 요소는 아닙니다. 요소가 단순히 스타일링을 위한 목적이나 스크립팅의 편의를 위해서 필요할때 section요소보다는 div요소를 사용할것을 권장합니다.

<!DOCTYPE html>
<html>
<body>

<section>
  <h1>WOOIN21</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.</p>
</section>

<section>
  <h1>CODE IS POETRY.</h1>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

<p><strong>Note:</strong> The section tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>

WOOIN21

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CODE IS POETRY.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Note: The section tag is not supported in Internet Explorer 8 and earlier versions.

 


저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <aside>  (0) 2018.04.28
HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML - META tag  (0) 2018.04.26
HTML vs HTML5  (0) 2018.04.25
[HTML] 메타태그 - viewport (뷰포트)  (0) 2018.04.13

티스토리툴바