일반 HTML5 강좌 4강 - HTML5 태그 - mark,time,meter

HTML5 강좌 4강 - HTML5 태그 - mark,time,meter

 

지난 강좌에서는 우리가 앞으로 계속 사용할 레이아웃을 잡아봤습니다.

이번강좌 부터는 태그를 중심으로 연습을 하겠습니다.

 

하지만 그전에 페이지에 대해서 잠시 설명을 하겠습니다.

이전 강좌에서 첨부파일을 받았다면 01.html 이라는 파일이 있을겁니다.

그 파일을 메인페이지로 사용하려고 합니다.

그래서 일단 01.html 을 main.html 이라고 파일명을 수정하였습니다.

그리고 nav 부분에 메뉴도 수정하였습니다.

 

 

 

 

 

보라색 부분은 강좌를 진행하면서 추가될 메뉴 입니다.

메뉴가 추가되면 당연히 페이지도 추가되겠죠~

그리고 추가되는 페이지마다 링크를 걸어 주겠습니다.

그리고 붉은색 부분은 강좌마다 연습할 테스트를 입력할 부분입니다.

추가되는 페이지마다 강좌의 내용이 들어가게 됩니다.

main.html 페이지의 내용을 수정한 후 그대로 복사하고, lec_04.html 이라고 저장하여 4강의 내용을 테스트 하겠습니다.

 

 

 

 

 

이렇게 메뉴에 링크를 걸어 줍니다.

또한 A링크 태그에 다음과 같은 CSS 코드도 한줄 추가해 주었습니다.

a {color: #121212;text-decoration: none;}

글자색과 텍스트 스타일을 변경해 주는 코드입니다.

(첨부파일을 다운받아서 확인해 보세요 :)

 

 

 

 

그리고 이런식으로 페이지가 하나씩 늘어나겠죠~

 

자 이제 lec_04.html 파일에 태그를 테스트 하겠습니다.

 

*mark 태그

mark 태그는 시각적, 의미적으로 특정 텍스트를 강조하는 경우에 사용합니다.

 

 

 

 

 

사용법은 위 그림과 같습니다.

그럼 4강 페이지로 이동해 확인을 해보겠습니다.

 

 

 

 

 

위와 같이 텍스트부분이 강조되는 것을 볼 수 있습니다.

단지 형광팬 정도의 강조 효과네요.

좀 더 세련되고 깔끔한 효과를 내고 싶다면 CSS를 사용해야겠죠?

 

*time 태그

time 태그는 날짜나 시간 표현에 대해서 의미를 부여합니다.

하지만 문서상에 나타나는 효과는 특별히 없습니다.

 

 

 

 

 

위와 같이 코딩을 하고 테스트를 해보죠~

 

 

 

 

 

역시 아무런 효과가 나타나지 않네요.

단지 의미상 부여하는 효과라고...

 

*meter 태그

일정 범위 안의 값이나 분포 비율 등을 나타낼 때 사용합니다.

-속성-

value : 실제로 측정한 데이터 지정

min, max : meter 요소가 인식하는 최소값/최대값 지정

low, high : 허용되는 범위의 최소값/최대값 지정

optimum : 기대값 지정

title : 타이틀 입력

 

테스트를 통해서 알아보도록 하겠습니다.

 

사진

 

 

 

위와 같이 meter 태그를 설정했습니다.

첫 번째는 value값이 high 값에 미치지 못하고, 두 번째는 value값이 high 값보다 더 크죠.

그 결과는 다음과 같습니다.

 

사진

 

 

 

수치는 그래프로 표현이 되는데 두 그래프의 색깔이 다르네요.

딱 봐도 두 번째는 최대값 수치에 간당간당 해보이는..

 

비가 내리는 주말입니다.

날씨는 많이 풀렸는데, 왠지 으스스한 기분이네요.

비가 그치면 날씨가 다시 추워진다고 하니 감기 조심하시고, 즐거운 주말 보내세요 :)

 

(예제는 첨부파일에서 받을 수 있습니다.)

 

04.zip