일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- Absolute
- AGI
- ai
- AI agents
- AI engineer
- AI researcher
- ajax
- algorithm
- Algorithms
- aliases
- Array 객체
- ASI
- bayes' theorem
- Bit
- Blur
- BOM
- bootstrap
- canva
- challenges
- ChatGPT
- Today
- In Total
A Joyful AI Research Journey🌳😊
[2] 221229 Ch. 1 기초사항: HTML 문서의 기본 구조 [K-디지털 트레이닝 2일] 본문
[2] 221229 Ch. 1 기초사항: HTML 문서의 기본 구조 [K-디지털 트레이닝 2일]
yjyuwisely 2022. 12. 29. 14:34221229 Thu 2nd class
Ch. 1 기초사항
Ch. 2 HTML5 기본 요소 (주제별로 묶기 위해 윗글로 글 내용 옮김.)
진도: ~ p. 61 (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초, 저자: 천인국)
아래는 교재 6개 중 첫 번째 사용 교재이다. :)
배우는 도중 아래 최신 버전이 나왔는데 그 책으로 아래 이미지를 첨부했다.
오늘 배운 것 중 기억할 것을 정리했다.
지난 수업 때 배운 것 중 다시 기억할 것
- 마크업 언어
- 정의: 태그 등을 이용하여 문서, 데이터 구조를 명기(분명히 밝히어 적음)하는 언어
- 특징:
- 메모장 편집 가능
- 서버와 클라이언트 사이에 빠르게 주고받을 수 있다.
- 컴퓨터의 기종, 운영체제에 독립적이다.
Ch. 1 기초사항
책의 목차
-웹에 대한 기초 사항
-HTML5-웹 브라우저
-HTML 편집기
-메모장으로 첫 번째 HTML 문서 만들기
-VS for web으로 첫 번째 HTML 문서 작성하기
-HTML 문서의 기본 구조
-HTML 맛보기
1. HTML 문서의 기본 구조
1.1 요소
시작 태그 + 콘텐츠 (요소의 내용) + 종료 태그로 문서의 구성요소이다.
ex)
<title> Naver </title>
1.2 속성
요소에 대한 추가적인 정보, 이름 = "값"
예시 1)
<a(하이퍼링크)href= "주소"(연결)> 내용(클릭) </a>
(href =hypertextreference)
adefines a hyperlink, used to link from one page to another
예시 2) p. 21
<p style = "color:red">
예시 3)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!--한글 안 깨짐-->
<title>Naver</title> <!--하나의 요소-->
</head>
<body>
<p style="color:red">이정원 국무2차장은 협약식에서
"이번 상생 협약은 영업규제 도입 10년 만에 대형마트와 중소유통의 상생 발전을 위해 내딛는 귀중한 첫걸음"이라며
"대·중소 유통 업계가 손을 맞잡고 미래를 함께 대비하는 계기가 됐으면 좋겠다"고 말했습니다.</p>
<p style="color:red">이 차장은 규제 완화에 따른 대형마트 노동자들의 건강권 문제와 관련한 질문에는
"근로자의 휴식권은 반드시 보장돼야 한다"며 구체적 사항은 근로기준법에 의해
대형마트와 근로자 간 계약에 의해 이뤄질 것으로 본다고 전했습니다. </p>
결과)
주석
<!-- 주석 내용 -->
태그
문서의 구조 스타일
ex) html. head, meta, body 등
- IDE (Integrated Development Environment, 통합 개발 환경) 중에 Visual Studio Code로 간략하게 해 보고, 그 뒤에 쭉 Eclipes를 사용했다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹 페이지</title>
</head>
<body>
<p>Hello Web Programming World!</p>
</body>
</html>
- Eclipes 썼을 때
- Dynamic (동적) web project, Static (정적) web project 중 후자를 사용했음
- 파일 만들 때
webContent → New → HTML File - 만든 파일 결과 웹브라우저에 보려고 열 때
오른쪽 마우스 버튼 → open with → web browser - 파일 이름 앞 *index.html처럼 * 나오면 저장이 안 된 것이고,
Ctrl+s 눌러서 저장하는 습관을 들인다 :) - 아래는 한글 안 깨지게 바꿔준다.
- <meta charset = "UTF-8>
(Meta=how text is transmitted and stored) - window → Prefences → ENCODING 넣음 → HTML, CSS, JSP Files 전부 UTF8로 바꿈
(문자 인코딩(character encoding), 인코딩은 사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 말한다.)
Web client
ex) Chrome
Web server
ex) Apache, IIS(Internet Information Services), Netscape
교재 정답:
https://m.blog.naver.com/lwj798/220850580582
* 도움 되는 사이트
W3School.com
https://www.w3schools.com/tags/att_global_style.asp
TCPschool.com
http://www.tcpschool.com/css/css_intro_apply
기타
Chrome에서 Naver 뉴스 웹사이트 방문해서 도구 더 보기 → 개발자 도구 눌러서 HTML, CSS 볼 수 있었다. Javascript는 보안 상의 문제로 안 된다고 한다.
도구 더 보기 → 개발자 도구 누르는 습관 가지라고 한다. :0