22.04.15 - part 01-03, 01-04
무작정 시작하기
1. Doctype(DTD)
새 폴더 생성(ex. test) - VSCODE 실행 - 폴더 오픈 - 파일 생성(index.html)
<!DOCTYPE html> - 문서의 HTML 버전을 지정
DOCTYPE은 마크업 언어에서 문서 형삭을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로
페이지를 이해하면 되는지를 알려주는 용도입니다.2. HTML, HEAD, BODY
<!DOCTYPE html>
<html lang="en"> - 문서의 전체 범위
HTML 문서기 어디에서 시작하고, 어디에서 끝나는 지 알려주는 역할입니다.
<head> - 문서의 정보를 나타내는 범위
웹 브라우저가 해석해야 할 웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹
페이지의 보이지 않는 정보를 작성하는 범위입니다.
</head>
<body> - 문서의 구조를 나타내는 범위
사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지 같은,
웹페이지의 보여지는 구조를 작성하는 범위
</body>
</html>3. CSS, JS 연결하기
같은 위치의 폴더에 css 파일 생성(ex.main.css)
lang - 지정할 문서의 언어를 명시하는 HTML 속성입니다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css"> - css 파일 연결
<script src="./main.js"></script> - js 파일 연결
</head>
<body>
<div>Hello world!</div>
</body>
</html>main.css
div{
color: red;
font-size: 100px;
}main.js
console.log('HEROPY!');4. 정보를 의미하는 태그 살펴보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"> charset - 문자인코딩 방식
<meta name="viewport" content="width=device-width, initial-scale=1.0">
name - 정보의 종류, content - 정보의 값
<meta>는 문서(웹페이지)의 제작사, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브라우저에게
제공합니다.
<title>Document</title> - HTML 문서의 제목(title)을 정의 하고 웹 브리우저 탭에 표시된니다.
<link rel="stylesheet" href="./main.css"> - rel - 가져올 문서와 관계, href
- 가져올 문서의 경로
<style> - 스타일(css)를 HTML 문서 안에서 작성하는 경우에 사용
div{
color: red;
}
</style>
<script src="./main.js"></script> - 자바스크립트(js) 파일을 가져오는 경우
<script>
console.log('HEROPY!'); - 자바스크립트(js)를 HTML 문서 안에서 작서하는 경우
</script>
</head>
<body>
<div>Hello world!</div>
</body>
</html>5. 화면에 이미지 출력하기
이미지 파일 1개 가져오기 - 폴더에 저장
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<div>Hello world!</div>
<img src="./img.jpg" alt="이미지"> - alt - 이미지가 출력되지 못하는 경우 대신 출력할
텍스트라고 해서 대체 텍스트 라고 부릅니다.
</body>
</html>6. 상대 경로와 절대 경로
상대 경로(./ , ../) VS 절대 경로(http , /)
<img src="../images/img.jpg" alt="이미지"> - 상대 경로, 상위(주변) 폴더에 위치
<img src="/images/img.jpg" alt="이미지"> - 절대(최상위) 경로 , 루트
7. 링크 연결하기
<a href="https://www.naver.com/">NAVER</a> - 네이버 클릭시 네이버로 연결8. 개발자 도구 사용하기
코딩한 파일(index.html) - 브라우저로 열고 단춬키 F12 클릭 - Elements 클릭 - Style 클릭 - 원하는 스타일의 추가 및 변경과 수치 변경 시 브라우저 새로고침하기 전까지 변경된 스타일 적용 가능
웹에서 시작하기
1. Codepen.io 소개
새 폴더 생성(ex. hello) - VSCODE에서 폴더 열기 - 파일 생성(ex. index.html) - https://codepen.io 사이트 접속 - 왼쪽 버튼(Start Coding) 클릭 - HTML/CSS/JS 각각 내용 입력(회원가입 시 테스트 코드 저장 가능)
2. 브라우저 스타일 초기화
새 폴더 생성(ex. hello) - VSCODE에서 폴더 열기 - 파일 생성(ex. index.html)- 코드 작성 후 - 크롬으로 이동 - reset.css cdn 검색 - https://www.jsdelivr.com 접속 - /npm/reset-css@5.0.1/reset.min.css 부분 오른쪽 아이콘 클릭 - Copy HTML 선택 - VSCODE에 head 부분에 붙혀넣기
index.html
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div></div>
</body>main.css
div {
width: 200px;
height: 100px;
backround-color: orange;
}3. Emmet
emmet(에밋) - 태그 자동 완성
index.html
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div></div>
<img src="" alt=""> - img
<h1></h1> - h1
<div class="heropy"></div> - div.heropy
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div> - div>ul>li*4{$}
</body>
