화면 속/HTML5(10)
-
인터넷에 사진/동영상 올리는 태그
웹 상에 사진이나 동영상을 올리는 태그 기본적으로 사진과 동영상(multimedia)은 HTML의영역에 태그를 추가 합니다. 먼저, 이미지를 추가하는 태그는 다음과 같습니다. (이런식으로 줄을 바꿔 쓰는건 개인적으로 선호하지는 않지만..) 바로 입니다.대표적인 attribute로는 src와 alt가 있습니다. src는 이미지의 경로를 적어주는 영역이고,혹시나 그 경로에 이미지 파일에 문제가 생겼을 경우대안하는 텍스트 등을 보여주는 것이 alt의 영역입니다. 경로에 관한 것은 가볍게 정리해드린 곳이 있으니참고바랍니다.2018/01/16 - [광고쟁이의 IT_study/HTML5] - HTML5 LINK 연결하기 위의 경로는 1유저의 바탕화면에 있는 파일입니다.*파일의 이름이 한글일 경우 인식을 못하는 경우..
2018.01.22 -
HTML5 UL과 OL의 차이, 리스트 만들기
'메뉴'를 만들기에 좋은, '목록'을 만들기에 좋은 List를 HTML을 통해 만드는 법입니다. HTML의 list는 크게 두 가지로 나누어집니다.1. 순서가 없는 목록2. 순서가 있는 목록 1. 순서가 없는 목록 (UL) 보통 리스트를 만들 때 사용하게 되는 tag는 tag입니다.순서가 없는(Unorder) 목록이고, 기본적으로 점 모양이 찍혀 나오게 됩니다. 보통 앞에 아무것도 없이, 하위메뉴처럼 만들고 싶을 때 사용합니다. DOCTYPE html> 순서가 없는(Unorder) 목록 모두 같은 표시 단지 위에서 아래로 위와 같이 사용 하고, 순서가 없는(Unorder) 목록 모두 같은 표시 단지 위에서 아래로 실제로 사용할 경우 이렇게 나타나게 됩니다. 후에, CSS를 통해 목록 앞의 점 표시는 지워..
2018.01.17 -
HTML5 LINK 연결하기
HTML의 HT는 HyperText입니다. Hyper를 담고있는 Text라는 의미인데,Hyper는, 다중으로 연결된 상태- 를 의미합니다. 지금 보고계신 이 화면까지 들어오시기 위해 검색하거나,클릭하여 이동하셨을 그 경로,그 연결이, HTML에서 가장 중요한 특징이라고 할 수 있습니다. 그리고 그 역할은a(anchor) tag가 담당합니다. a tag의 대표 어트리뷰트는 href로,이동하고자 하는 파일의 위치 값을 지정해줄 수 있습니다. tistroy로 이동 ->실행결과tistroy로 이동(클릭시 tistory메인으로 가버려요.. 제 글을 더 봐주세요..) 경로는 절대경로와 상대경로가 있는데, 절대경로는 작업 디렉토리와 상관없이 특정 파일의 절대적인 위치를나타냅니다. 위와 같은 주소나, C:\users\..
2018.01.16 -
HTML5 Tag의 기본, 다양한 HTML의 tag들(with body)
지난 HTML 태그가 head영역에 주로 쓰인 태그라면, 이번에는 body영역에 주로 사용되는 HTML 태그에 대해 알아보도록 하겠습니다. *지난 HTML 태그 정리2018/01/04 - [광고쟁이의 IT_study/HTML5] - HTML5 Tag의 기본, 다양한 HTML의 tag들(with head) body 영역의 위치는 head 다음으로,우리가 직접 웹에서 보게되는 영역을 생각하시면 됩니다 :) DOCTYPE html> 이곳입니다. 대표적인 첫 번째 태그, 태그 입니다. 태그는 전에 설명했으니, 가볍게 넘어가도록 하겠습니다.실제로, 문장을 잡아주는 역할 외에 큰 역할은 없습니다. 문장을 잡아주는 태그로 p태그와 함께 자주 사용되는 태그는 태그 입니다. 부터 까지 사용할 수 있으며,h1이 가장 크고..
2018.01.05 -
HTML5 Tag의 기본, 다양한 HTML의 tag들(with head)
'태그'의 개념에 대해서는 앞서 종종 설명하곤 했었는데요,요소들을 포함하여 하나의 기능을 하게되는 것 이라고 생각하셔도 좋을 것 같습니다. tag의 종류를 다 외울 필요는 없지만,자주 쓰는 것과 기본 틀이 되어주는 것은 이해하고, 외워두면 좋겠죠 :) html5 문서라는 것을 알려주는 tag는 DOCTYPE html>입니다. 이전에는 훨씬 긴 tag가 뒤를 이었다고 하는데,간결해진 셈이죠 :) 뒤를이어서, html영역을 표현하는 tag는 진짜로, html tag입니다.기억하기도 쉽고, 인지하기도 쉽네요 :)이제 이렇게 생긴 문서를 본다면, html 문서로군! 할 수 있겠죠? :) html을 구성하는 tag는 head와 body tag가 있는데, html tag사이에 위치하게 됩니다. 사람의 형상을 생각하..
2018.01.04 -
HTML5의 특징, 시맨틱 웹(Semantic Web)
HTML5의 특징, 시맨틱 웹 입니다. 시맨틱 웹(Semantic Web)이란, 웹에 존재하는 수 많은 페이지들의 메타데이터를 부여하여,그저 데이터의 집합- 이었던 웹 페이지를'의미'와 '관련성'을 가지는 거대한 데이터베이스(DB)로 구축하고자 하는 발상입니다.(의미 그대로, 의미론적인 웹 이란 뜻인 것 같습니다.) 이를 위하여 구분되어진 것이시맨틱 요소, 시맨틱 태그 입니다.이는 브라우저, 검색엔진, 개발자 모두에게콘텐츠의 의미를 명확히 설명하는 역할을 합니다. 시맨틱 웹 에 대하여 검색하면 나오는 가장 대표적인 계층 구조일 것입니다.아직 우리에게 조금 어려운 구조이지만,'의미와 개념을 찾아 원하는 값을 돌려주는 것'을 목표로 하는 구조라고 생각하면추후에 다시 공부하는 데 도움이 될 것 같습니다. 이런..
2018.01.02