HTML 기본 구조
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "....>DOCTYPE(DTD Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도이다.
- 현재는 HTML5를 표준으로 사용중이다.
- html PUBLIC 뒤에 이전버전을 명시하여 이전 버전의 HTML로 표시하라고 명시할 수 있다.
HTML 버전
- HTML1
- HTML2
- HTML3
- HTML4
- XHTML
- HTML5(표준)
기본태그
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
- html 태그: 문서의 전체 범위를 나타냄
- head 태그: 문서의 정보를 나타내는 범위(제목, 설명, 사용할 파일 위치, 스타일 같은 보이지 않는 정보를ㅇ 작성하는 범위
- body 태그: 문서의 구조를 나타내는 범위(사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네비게이션, 이미지 같은 보여지는 구조를 작성하는 범위
html 파일 외부에 있는 css, js 연결
- css에 연결하기
<head>
<link rel = "stylesheet" href="./fileName.css">
</head>css를 html파일 외부에 작성했을 경우 html과 css 파일을 연결하기 위해서 html 파일내에 head 태그 안에서 link 태그를 사용하여 연결한다.
- js에 연결하기
<head>
<script src="./fileName.js"></script>
</head>자바스크립트 파일에 연결하기 위해 html 파일의 head 태그안에 script 태그를 통해서 연결한다.
head 태그안에 설정할 수 있는 태그
- style
<head>
<style>
div {
text-decoration: underline;
}
</style>
</head>css 파일을 외부에 따로 만들어서 연결 할 수도 있지만, html 파일내에서 head 태그 안에 style 태그를 사용하여 작성할 수도 있다.
- title : 웹 브라우저 탭에 표시되는 html 문서의 제목을 정의
<head>
<tlte> 제목 </title>
</head>- link
<link rel = "stylesheet" href="./fileName.css" />
<link rel = "icon" href="./favicon.png"> 외부 문서를 가져와 연결할 때 사용한다.(대부분 css 파일)
rel은 relation의 약어로 가져올 문서와의 관계를 나타내며 href는 특정 경로를 지정하는 html 속성으로 가져올 문서의 경로를 의미한다.
- script
<head>
<script src="./fileName.js"></script>
<script>
<console.log('Hello World!')
</script>
</head>외부 파일로 만들어서 연결할 수도 있지만 head 태그내의 script 태그 사용하는 방식도 가능하다.
- meta
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>meta는 정보를 의미한다. 따라서 meta 태그는 html 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공한다.
meta 태그의 속성 name은 정보의 종류, content는 정보의 값을 나타낸다.
viewport란 웹페이지가 출력되는 영역을 의미하고 모바일 장치에 해당되며 데스크탑에는 해당되지 않는다.
화면에 이미지 출력하기
<body>
<img src="./폴더명/파일명" alt="./폴더명/파일명">
<img src="이미지링크">
</body>
- alt: img 태그 사용할때 필수 속성으로 이미지 대신에 출력할 글자를 명시한다.
- 컴퓨터 내부의 경로를 이용 또는 이미지 웹 링크를 통해서도 이용 가능하다.
상대경로 vs 절대경로
상대경로
- ./ : 주변에서 찾기(생략 가능)
- ../ : 자기가 속해있는 폴더(상위폴더)로 나가서 찾기
절대경로
- / : 루트경로(최상위경로), 로컬호스트의 프로젝트 전체를 뜻함
- // : https 로컬 전용 주소
페이지를 나누고 연결하기
<body>
<a href="https://naver.com">NAVER</a>
<a href="/about/about.html">About</a>
<a href="/about">About</a>
</body>기타 활용
- 개발자도구: 웹페이지 f12 버튼을 이용하여 웹페이지의 요소, 레이아웃등을 확인할 수 있다.
- codepen.io: 별도로 편집기를 사용하지 않아도 웹페이지 내에서 간단한 테스트가 가능하다.
브라우저 스타일 초기화
- 웹 표준에 의하여 같은 코드라도 브라우저마다 조금씩 다르게 화면에 표현될 수 있다. 따라서 기본 태그가 가지고 있던 값들을 초기화 한 상태에서 작업해주는것이 좋다.
- reset.css 활용하며 원하는 css 링크의 앞쪽에 링크를 적용한다.
be driven