웹사이트에서 각각 요소가 무엇을 뜻하고 알려주는 언어가 HTML입니다
HTML은 대게 Tag를 사용합니다 즉 Tag로 이루어진 텍스트 문서라고 할 수 있습니다
이론은 재미없으니 실전을 통해서 바로 확인해봅시다
#4에 github desktop에서 만들었던 폴더가 있을 겁니다 필자는 TEST로 지정하였습니다 vscode에서 해당 폴더를 켜시고 폴더에 제목 이름 "index.html"를 작성해주세요
index를 쓴 이유는 웹 서버들이 index 파일을 제일 먼저 찾도록 디폴트 값으로 설정되어 있기때문입니다
이제 태그를 작성할 것입니다
*당부하지만 아래처럼 사용하는 태그는 실제로 없습니다 이해를 돕기위해 만들어낸 태그입니다*
태그는 보통 이렇게 생겼어요
<이름 속성="값">내용</이름>
<food meat="beef">고기는 역시 소고기</food>
태그가 있고 그 가운데에 들어가야할 컨텐츠를 넣습니다 그 다음 태그를 닫습니다
태그를 열고 닫기 때문에, 태그 사이에 위치한 컨텐츠가 태그가 명칭하는 것으로 알 수 있습니다
자 그럼 실제로 사용하는 태그를 사용하여 띄워봅시다
<title>여기가 제목입니다</title>
제목 바에 보이시나요? html문서에서 title인 제목 태그는 저기에 사용됩니다
<p>여기가 글 내용이에요</p>
문단 태그는 이렇게 사용됩니다
<a href="https://www.google.com">구글로 이동</a>
링크 이동입니다 원하는 링크를 띄우고 글을 눌렀을 때 이동되게끔 하고 싶다면 이 태그를 지정해주시면 됩니다
<a href="https://www.google.com" target="_blank">구글로 이동</a>
링크가 새탭으로 켜지게 하고 싶을 때 사용합니다
꼭 구글뿐만 아니라 네이버,다음 등등 웹사이트는 모두 해당됩니다 단! "http://" or "https://"를 붙여주셔야합니다
여기까지입니다 감사합니다
'MARK UP > HTML' 카테고리의 다른 글
링크 Anchor(#9) (0) | 2020.11.10 |
---|---|
semantic 태그 | non-semantic 태그(#8) (0) | 2019.08.21 |
HTML -3(#7) (0) | 2019.08.15 |
HTML -2(#6) (0) | 2019.08.13 |
HTML + CSS(#2) (0) | 2019.07.26 |