1일차(1)
- 개발 전용 편집기 visual studio code를 사용
* Visual Studio Code (https://code.visualstudio.com/)
- file-preference 에서 기본 세팅 설정 가능
- autosave : 자동저장 설정 (afterdelay)
- extensions - open in browser 추가 : 추가기능(플러그인) 설치. 우클릭 창에 브라우저에서 열기 기능 추가
- ! + tab / ! + enter : 기본 html 문서 틀 자동 작성
- 태그 + tab : 닫는 태그까지 자동 작성
<HTML, CSS, Javascript 예제1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹페이지</title>
</head>
<body>
<h1>나의 첫번째 웹페이지</h1>
<p>Hello, World!</p>
<a href="https://naver.com">Naver</a>
<img src="images/a.png" alt="이미지 설명">
</body>
</html>
<xxx> </xxx> : x는 요소(element)
<xxx yyy="zzz"> : y,z는 속성(attribute).
y는 속성명(attribute name), z는 속성값(attribute value)
위와 같은 <html>, <head>, <meta> 등을 markup language 라고 부른다.
모든 요소(element)가 공통으로 가질 수 있는 속성(attribute)도 있고,
특정 요소만이 가질 수 있는 속성도 있다.
ex) href, src 와 같은 속성을 아무 요소에나 넣을 수 있는 건 아님
<!DOCTYPE html> : 웹브라우저에게 이 문서가 html5 형식의 문서라고 알려주는 역할
<title> : 웹페이지의 이름
<h1> : 제목, 헤드라인
<p> : 문자열의 단락 (paragraph)
<a> : 링크 연결
<img src="파일명" alt="설명"> : 이미지를 삽입하는 태그
- 해당 파일을 웹페이지에서 열면 주소는 file:///C:/work/html/hello.html 형태로 나온다. 웹브라우저는 http 주소뿐만 아니라, 개별 PC의 파일 시스템에 있는 파일도 읽을 수 있다.
- HTML과 CSS를 사용해서 내가 작성한 코드가 웹브라우저의 화면에 어떻게 나오는지, 웹브라우저의 해석 방식을 배울 수 있다.
'국비교육(22-23)' 카테고리의 다른 글
| 2일차(2)/HTML 기초 : table (0) | 2022.10.06 |
|---|---|
| 2일차(1)/HTML 기초 : ul, ol, dl (0) | 2022.10.06 |
| 1일차(4) CSS : Block, Inline 요소 예제 (0) | 2022.10.06 |
| 1일차(3)/HTML, CSS, Javascript 기초 (0) | 2022.10.06 |
| 1일차(2)/HTML, CSS, Javascript 기초 (1) | 2022.10.05 |