1. HTML의 기초 개념
- HTML은 코드를 작성한 파일이며 브라우저에서 실행하여 해당 결과를 볼 수 있습니다.
- 표준 브라우저는 크롬, 인터넷익스플로러(IE), 에지(Edge), 파이어폭스, 오페라, 사파리입니다.
- 확장자는 ".html"입니다.
- 파일과 코드의 인코딩은 모두 "UTF-8"입니다.
2. HTML 코드 작성
- 메모장(Notepad), 편집기(에디트플러스, 브라켓, 비주얼스튜디오코드, ...) 에서 만듭니다.
- 코드를 요소(또는 엘리먼트)라고 하며 소문자로 작성합니다.
3. HTML파일 작성순서
- 파일을 만들 폴더 선정
- 파일 만들기
- HTML 기본 코드 작성
- 최종 저장
- 파일을 실행하여 브라우저에서 결과보기
4. HTML 기본코드
<html lang="ko">
<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>HTML 실습</title>
</head>
<body>
html 코드 작성 구간
</body>
</html>5. HTML 의 요소
- HTML에서의 코드는 "요소(Element, 엘리먼트)"라고 합니다.
- 요소의 사용방법은 다음과 같습니다.
<시작태그 속성="속성값">내용</종료태그>
보기. <h1>늘 행복한 날들</h1>
=> 브라우저에서 이 코드가 실행되면 제목처럼 표시됩니다.- 요소를 사용하여 HTML 문서를 구성할 수 있습니다. 문서를 구성한다는 것은 아래의 내용을 뜻합니다.
- 제목과 문단 표현
- 목록과 표의 표현
- 이미지, 동영상 표현
- 그 외에 책을 만들 때 필요한 항목을 모두 표현할 수 있습니다.
6. HTML 실습
| 순서 | 항목 | 내용 |
| 1 | 폴더 선정 | D:\wd\day01\part01\silsp |
| 2 | 파일 만들기 | sample.html |
| 3 | HTML 기본 코드 작성 | 4번 참조 |
| 4 | 브라우저에서 실행하여 만들고 싶은 결과에 맞는 코드 작성 |
아래 예제 참조 |
| 5 | 최종 저장 | Ctrl+S (별표기호로 확인) |
| 6 | 브라우저로 파일 실행 | 실행 방법 다양함 |
@실습예제.
<html lang="ko">
<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>HTML 실습</title>
</head>
<body>
<h1>문서의 제목입니다</h1>
<p>이곳은 문단을 적는 곳입니다</p>
<hr>
<h2>학습할 과목</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript(자바스크립트)</li>
<li>jQuery(제이쿼리)</li>
</ol>
</body>
</html>
참고.
- HTML은 문서의 내용을 구성합니다.
- CSS는 HTML로 만든 내용의 크기, 색상, 배치, 형태를 적용할 수 있습니다.
- JavaScript는 HTML과 CSS로 만든 내용과 디자인에 기능을 적용할 수 있습니다.
- jQuery는 JavaScript를 편리하게 사용하기 위해서 사용합니다.
• HTML 프로그램 작성시 주의사항!!
- 처음 학습하시는 분들은 오타가 많이 발생합니다.
또한 오타가 있지만, 있는지 잘 모릅니다.
결국 정상실행이 안됩니다. 그러므로 오타 주의!!
7. 편집기 설치
• 편집기(= Editor, 에디터)는 HTML, CSS의 코드 작성과 실행을 쉽고 편리하게 도와주는 프로그램입니다.
• 에디트플러스(Editplus), 브라켓(Brackets), 비주얼스튜디오코드(Visual Studio Code) 등 많이 있습니다.
• 브라켓(Brackets) 설치 => http://brackets.io
'Study > HTML5&CSS' 카테고리의 다른 글
| part06_HTML유효성검사 (0) | 2022.05.13 |
|---|---|
| part05_Semantic요소 (0) | 2022.05.13 |
| part04_Div요소 (0) | 2022.05.13 |
| part03_HTML_table요소 (0) | 2022.05.13 |
| part02_HTML요소 (0) | 2022.05.13 |
