Notice
Recent Posts
Recent Comments
Links
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
In Total
관리 메뉴

A Joyful AI Research Journey🌳😊

[2] 221229 Ch. 1 기초사항: HTML 문서의 기본 구조 [K-디지털 트레이닝 2일] 본문

🌳Bootcamp Revision 2023✨/HTML5, CSS3, JSP

[2] 221229 Ch. 1 기초사항: HTML 문서의 기본 구조 [K-디지털 트레이닝 2일]

yjyuwisely 2022. 12. 29. 14:34

221229 Thu 2nd class

Ch. 1 기초사항
Ch. 2 HTML5 기본 요소 (주제별로 묶기 위해 윗글로 글 내용 옮김.) 
진도: ~ p. 61  (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초, 저자: 천인국)

아래는 교재 6개 중 첫 번째 사용 교재이다. :)
배우는 도중 아래 최신 버전이 나왔는데 그 책으로 아래 이미지를 첨부했다. 

 

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 천인국 - 교보문고

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 웹프로그래밍 초보자도 쉽게 배우는 웹 개발 지침서!이 책은 웹프로그래밍을 처음 배우는 초보자들을 위해 기초부터 차근차근 설명한다. 1~3장에

product.kyobobook.co.kr

오늘 배운 것 중 기억할 것을 정리했다.

지난 수업 때 배운 것 중 다시 기억할 것

- 마크업 언어

  • 정의: 태그 등을 이용하여 문서, 데이터 구조를 명기(분명히 밝히어 적음)하는 언어
  • 특징:
    • 메모장 편집 가능
    • 서버와 클라이언트 사이에 빠르게 주고받을 수 있다. 
    • 컴퓨터의 기종, 운영체제에 독립적이다.

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 눌러서 저장하는 습관을 들인다 :)

  • 아래는 한글 안 깨지게 바꿔준다.
  1. <meta charset = "UTF-8>
       (Meta=how text is transmitted and stored)

  2. 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

 

HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초 1장 연습문제

.       다음 중 HTML5에서 사용되는 웹 표준 기술이 아닌 것은 (1)&nb...

blog.naver.com

* 도움 되는 사이트

W3School.com
https://www.w3schools.com/tags/att_global_style.asp

 

HTML Global style Attribute

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

TCPschool.com
http://www.tcpschool.com/css/css_intro_apply

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

기타

Chrome에서 Naver 뉴스 웹사이트 방문해서 도구 더 보기 → 개발자 도구 눌러서 HTML, CSS 볼 수 있었다. Javascript는 보안 상의 문제로 안 된다고 한다.

도구 더 보기 → 개발자 도구 누르는 습관 가지라고 한다.  :0 

728x90
반응형

'🌳Bootcamp Revision 2023✨ > HTML5, CSS3, JSP' 카테고리의 다른 글

[6] 230104 Ch. 5 CSS3 박스 모델과 응용: 박스 모델, 경계선, 마진과 패딩, 배경 설정하기, 링크 · 리스트 · 테이블 스타일 [K-디지털 트레이닝 6일]  (0) 2023.01.04
[5] 230103 Ch. 4 CSS3 스타일 시트 기초: CSS 개념, 선택자, CSS를 삽입하는 방법, 색상, 폰트, 텍스트 스타일 설정 [K-디지털 트레이닝 5일]  (0) 2023.01.03
[4] 230102 Ch. 3 HTML5 멀티미디어 & 입력양식: 웹 브라우저와 멀티미디어, 오디오, 비디오, iframe, <div>와 <span>, HTML 입력 양식, 입력 태그 #1 · #2, HTML5 입력 요소 [K-디지털 트레이닝 4일]  (3) 2023.01.02
[3] 221230 Ch. 2 HTML5 기본 요소: 텍스트 표시, 리스트, 링크, 이미지, 테이블 [K-디지털 트레이닝 3일]  (1) 2022.12.30
'🌳Bootcamp Revision 2023✨/HTML5, CSS3, JSP' Related Articles more
Comments