html,css,javascrip란 무엇일까?
html
웹 사이트 설계작업을 담당.
즉, 웹 사이트에 접속했을 때 눈에 보이는 정보를 html로 입력.
css
는 공간과 정보에 디자인을 입히는 역할을 담당.
JavaScript
이미지에 슬라이드 효과를 적용, 팝업 알림 등 주요 기능을 구현하는 작업을 담당.
html태그의 구성요소에 대해서 알아보자.
<열린태그 속성=속성값;>콘텐츠</닫힌태그>html태그는 열린 태그, 닫힌 태그, 속성, 속성값들로 구성된다.
태그
입력된 정보의 성격.
속성
태그가 가진 역할.
속성값
태그가 수행할 역할에 대한 구체적 명령.
콘텐츠
열린 태그와 닫힌 태그 사이에 있는 내용물.
웹 사이트의 텍스트 정보를 입력하거나 다른 html태그 삽입 가능.
구체적으로 이해해보자.
<a href="http://www.naver.com" target="_blank" title="네이버로 이동">네이버</a>※<a>태그는 콘텐츠를 클릭했을 때 특정 영역이나 특정 페이지로 이동하는 역할.
※href속성은 연결할 주소를 지정할 때 사용.
href속성의 속성값으로 네이버URL주소가 입력됨.
※target속성은 웹 사이트를 이동할 때 어떤 위치에서 열리게 할지 결정하는 요소.
target속성의 속성갑승로 _blank와 _self가 주로 사용됨.
_blank속성값: 새 탭 또는 새 창을 띄워서 페이지를 이동.
_self속성값: 현재 탭에서 페이지를 이동.
※title속성은 <a>태그를 클릭했을 때 이동하게 되는 페이지의 정보를 나타냄.
다음과 같이 입력했을 경우, 사용자가 네이버 텍스트에 마우스 포인터를 올리면 title속성의 속성값인 '네이버로 이동' 이 나타남.
html문서의 기본구조에 대해서 알아보자.
<!DOCTYPE html>
<!--이 부분은 주석문입니다. 웹 브라우저는 주석을 화면에 출력하지 않습니다.-->
<html>
<head>
문서 제목, 자바스크립트 코드, CSS 스타일 정의, 메타 데이터 정의
</head>
<body>
문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<meta name=“description” content=“Web Tutorial”>
<meta name=“keywords” content=“HTML, CSS”>
<meta name=“author” content=“seoyoung”>
<title>웹 프로그래밍 기초</title>
</head>
<body>
</body>
</html>※<!DOCTYPE html>은 문서가 html5언어로 작성되었다고 선언하는 태그.
※<html>은 html문서의 시작과 끝을 알리는 태그.
※<head> html문서의 시작과 끝을 알리는 태그, html문서와 관련된 간단한 정보를 입력.
※<meta>태그는 <head>태그와 </head>태그 사이에 작성, 일반적으로 charset, name, content 속성을 사용.
name속성의 속성값: description, keywords, author등
1) description속성값: 해당 문서의 한 줄 요약 내용.
2)keywords속성값: 주요 키워드
3)author속성값: 주요 작성자 또는 저작권자
※<title>태그에는 문서의 제목 입력, 브라우저 상단 탭에 표시됨.
※<body>태그는 본문의 시작과 끝을 알림.
'HTML+CSS+JavaScript' 카테고리의 다른 글
| [html]웹 페이지에 타이틀 달기 (0) | 2021.09.08 |
|---|---|
| [html]<span>태그 (0) | 2021.08.01 |
| [html]<p>태그 (0) | 2021.08.01 |
| [html]<h1>~<h6>태그 (0) | 2021.08.01 |
| [html]다양한 태그 (0) | 2021.07.31 |