달력

12

« 2019/12 »

  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  

header태그를 이용해서 회사의 로그, 메뉴, 검색 상자등을 표시해 보겠습니다.

출력 결과는 한 줄로 나열되어 표시됩니다.

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>시멘틱 태그</title>

</head>

<body>

<!-- header        : 회사의 로고, 메뉴, 검색 상자등을 표시 -->

<header id="page_header">

<!-- 제목 -->

<h1>Star BLog</h1>

<!-- nav        : 메뉴, 페이지 연결 링크(메뉴) -->

<nav>

<ul>

<li><a href="1.html">최신 </a></li>

<li><a href="2.html">이전 </a></li>

<li><a href="3.html">다음 </a></li>

<li><a href="4.html">연락처</a></li>

</ul>

</nav>

</header>

<!-- section        : 페이지의 논리적 영역(내용 부분) -->

<section>

<!-- article        : 내용 표시 -->

<article class="post">

<!-- 내용의 작은 제목 -->

<header>

<h2>버전 v.3 대한 추가 기능 공지사항입니다.</h2>

<p>Posted By CodeDragon on 2020.02.10</p>

</header>

<aside>

<p>

&quot; virtual기능등 73,439 기능 추가 &quot;

</p>

</aside>

<p>

사과은 그동안 이같은 사실에 대해 지적 받았지만 이를 공식적으로 인정하지는 않았었다. 고객지원센터는 사용자의 이같은 문의에 대해 처음으로 이를 인정하고 해결방법을 게시했다.

그동안 많은 사람들이 자신의 아이폰을 안드로이드폰으로 기기 변경했을 경우 아이폰을 사용하는 친구들의 아이메시지 문자를 받지 못해왔다.

</p>

<p>

패시는 사과 고객센터 직원과 연락한 결과 아이폰이 아이메시지를 통해 안드로이드폰과 문자할 이를 전달하지 않는다는 사실을 확인했다고 밝혔다.

그는 사과 고객지원센터에 전화를 결과 "이는 많은 사람들이 겪고 있는 문제이며 엔지니어링팀이 이를 해결하려 하고 있지만 고칠 방법을 없으며 현재로서는 신뢰할 만한 해결책이 없다"는 말을 들었다고 밝혔다.

하지만 사과은 결국 자사 도움말 페이지에서 아이폰 사용자들이 심카드와 전화번호를 iOS단말기로 옮길 경우 아이메시지를 끄고 재설정하는 방법을 밝혔다.

사과은 심카드, 또는 전화번호를 아이메시지를 지원하지 않는 기기로 옮겨 받고 싶으면 '설정(Settings)>메시지(Messages)>송수신(Send & Receive)' 방식을 따르라고 고객지원 설명서에서 새로이 밝히고 있다.

</p>

<!-- 내용에 대한 반복적인 문구 -->

<footer>

<p>

<a href="comments.html">3,994,545,334,948 Comments</a>

</p>

</footer>

</article>

</section>

<!-- 사이드 -->

<section>

<nav>

<h3>이전 </h3>

<ul>

<li><a href="1.html">2020 1 10</a></li>

<li><a href="2.html">2020 1 12</a></li>

<li><a href="3.html">2020 1 26</a></li>

<li><a href="4.html">2020 1 29</a></li>

<li><a href="5.html">2020 2 01</a></li>

<li><a href="6.html">2020 2 15</a></li>

<li><a href="7.html">2020 2 22</a></li>

</ul>

</nav>

</section>

<!-- footer        : 저작권이나 사이트 소유자에 대한 정보 -->        

<footer>

<p>&copy; 2020 Star Blog</p>

<nav>

<ul>

<li><a href="home.html">홈으로</a></li>

<li><a href="about.html">블로그 소개</a></li>

<li><a href="board.html">게시판</a></li>

<li><a href="contact.html">연락처</a></li>

</ul>

</nav>

</footer>

</body>

</html>

   


출력결과   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

HTML5 지원 API  (0) 2014.06.05
Tomcat 설정 및 Dynamic Web Project 생성  (0) 2014.06.05
02.html-시멘틱 태그 작성  (0) 2014.05.20
01.html-시멘틱 태그  (0) 2014.05.20
HTML5 시멘틱 태그  (0) 2014.05.20
ch01-first / 01.html-Hello World  (0) 2014.05.17
Posted by codedragon codedragon

댓글을 달아 주세요

시멘틱 태그

   

sematic

무의미한 태그가 아니라

'의미를 갖는다'는 뜻으로, 각 태그가 스스로 의미를 지닌다는 뜻

   

   

시멘틱 태그

태그

설명

header

사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함됨

hgroup

제목과 부제목을 묶는 역할

nav

사이트나 메뉴나 링크 같은 내비게이션 요소들이 포함

section

실제 문서 내용이 들어감

article

문서 내용이 많을 경우 여러 개의 <article>요소로 나눌 수 있음

aside

문서의 주요 내용 외의 내용들을 넣어 문서의 주 영역 주변에 배치

footer

작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있음

   

   

표현을 위한 태그

태그

설명

mark

특정 텍스트를 강조하고자 할 때 사용하는 태그

   

   

소스코드

<html>

<head>

<meta charset="UTF-8">

<title>시멘틱 태그</title>

</head>

<body>

<header id="page_header">

<hgroup>

<h1>대한 대학교 홈페이지</h1>

<h4>세계를 향상 지식의 공간</h4>

</hgroup>

<nav>

<ul>

<li><a href="">1학년</a></li>

<li><a href="">2학년</a></li>

<li><a href="">3학년</a></li>

<li><a href="">4학년</a></li>

</ul>

</nav>

</header>

<section>

<header>

<h3>이달의 소식</h3>

</header>

<article>

네셔널 컨테스트에서 <strong>대상 수상</strong> 하여 대한 대학교를 알렸습니다. 수상자는 <mark>홍길동</mark>입니다.

</article>

</section>

<footer>

2020 대한 대학교

</footer>

</body>

</html>

   


   

   

   

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

HTML5 지원 API  (0) 2014.06.05
Tomcat 설정 및 Dynamic Web Project 생성  (0) 2014.06.05
02.html-시멘틱 태그 작성  (0) 2014.05.20
01.html-시멘틱 태그  (0) 2014.05.20
HTML5 시멘틱 태그  (0) 2014.05.20
ch01-first / 01.html-Hello World  (0) 2014.05.17
Posted by codedragon codedragon

댓글을 달아 주세요

시멘틱 태그

페이지의 구조를 더 잘 나타내기 위해 새로운 태그 추가

태그

설명

header

페이지나 절의 헤더 영역을 정의

footer

페이지나 절의 푸터 영역을 정의

nav

페이지나 절의 내비게이션 영역을 정의

section

페이지의 논리적 영역 또는 내용의 그룹을 정의

article

하나의 글 또는 완결된 내용을 정의

aside

부차적인 또는 관련 있는 내용을 정의

meter

특정 범위 내의 측정 값을 나타냄

progress

어떤 목표까지의 진척도를 실시간으로 보여줌

hgroup

제목과 그에 관련된 부제목을 하나로 묶음

figure,figcaption

그림이나 비디오 같은 멀티미디어 콘텐츠에 캡션을 붙일 때

audio,video

멀티미디어 콘텐츠를 표시

embed

플러그인 콘텐츠 표시

mark

텍스트에 형광펜으로 칠한 것과 같은 강조 효과

time

날짜와 시간을 표시

ruby,rt,rp

루비 문자 표시

canvas

웹상에 그래픽을 표시

command

사용자 실행 명령어 표시

details

추가적인 정보나 사용자가 요청하는 정보 표시

datalist

사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 리스트

keygen

양식(form)을 서버로 전송할 때 한 쌍의 키를 만들어 private key(프라이비트 키)는 로컬에 저장하고 public key(퍼블릭 키)는 서버에 저장

output

수학적인 계산의 결과값을 표시

   

   

시맨틱 요소(Semantic Element) 또는 시맨틱 태그

의미 없는 <div> 태그의 사용보다 문서의 내용을 쉽게 이해할 수 있도록 의미를 가지는 새로운 태그 요소

태그

설명

header

사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함

hgroup

제목과 부제목을 묶어주는 역할

nav

사이트의 메뉴나 링크 같은 내비케이션 요소 포함

section

실제 문서 내용

article

문서 내용이 많을 경우 여러 개의 <article> 요소로 분할

aside

문서의 주요 내용 외의 내용들. 문서의 주영역 주변에 배치

footer

작성자 정보나 저작권 정보, 관련 문서 링크 등 부가 정보 배치

 

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

HTML5 지원 API  (0) 2014.06.05
Tomcat 설정 및 Dynamic Web Project 생성  (0) 2014.06.05
02.html-시멘틱 태그 작성  (0) 2014.05.20
01.html-시멘틱 태그  (0) 2014.05.20
HTML5 시멘틱 태그  (0) 2014.05.20
ch01-first / 01.html-Hello World  (0) 2014.05.17
Posted by codedragon codedragon

댓글을 달아 주세요