KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_25일차(HTML/CSS)

자바&파이썬 웹애플리케이션 전문가 양성과정 채용연계형 교육과정 25일차

KT 자바교육 후기 (2021-07-22 ~ 2021-12-03) 

2021-08-26 (참고, 8월 16일 ~ 9월 3일 비대면 주간, 4단계 거리두기로 인하여)

HTML 문법 

---

[오전]

WWW와 웹 표준

World Wide Web

1990년 팀 버너스 리는 월드와이드웹 제안

최초의 웹은 과학자들 끼리 그들 만의 웹 페이지를 공유하기 위해 개발 됨

 

 

 

모자이크 웹 브라우저 

First World Major Browser 

1993년 미국 일리노이 NCSA

마크 앤드리슨, 에릭 비나 

Netscape Navigator 전신

 

 

 

Web Architecture

HTTP 프로토콜 

Request/Response 기반 

URL / URI 주소 방식

 

 

 

웹 컨텐츠 – HTML + CSS + JavaScript

HTML (구조언어)

  마크업, 시멘틱 정보, 컨텐츠 레이아웃 

  웹 페이지의 뼈대 역할 

 

CSS (표현언어)

  화면 디스플레이, 프레젠테이션 

  뼈대를 감싸는 피부역할

 

JavaScript (동작언어)

  동작, 논리적 제어, 사용자 상호작용 

  HTML과 CSS를 움직이게 하는 근육

 

 

URN : Uniform Resource Name

  location independent resource identifier 

 

URL : Uniform Resource Locator 

  location based 

 

URI : Uniform Resource Identifier 

  URL과 URL의 슈퍼셋

 

---

웹 페이지 작성을 위한 언어 - HTML

HTML

Hyper Text Markup Language

 

 

Hypertext, 하이퍼텍스트

Index, 전화번호부, 사전

링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능

 

 

Markup Language, 마크업 언어 

문서에 특별한 “표시“ 를 통해 

문서의 폰트와 목록 

다른 문서의 링크 

이미지를 표현

 

 

 

웹 표준 

웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것 

웹 표준으로 문서를 하나 만들고 나면 어떤 기기에서나 볼 수 있도록 할 수 있음 

HTML5로 문서를 만드는 것이 웹 표준을 지킨 문서를 만드는 기본 

 

HTML5와 CSS3 

최신 웹 표준에 맞는 웹 사이트를 제작할 수 있음 

앱 화면 디자인하기 위한 기초가 됨 

웹 사이트와 블로그를 원하는 대로 수정할 수 있음

 

다른 언어와 마찬가지로, HTML도 텍스트 파일로 작성하여 파일로 저장

온라인 편집기 https://repl.it/

 +Visual Studio Code 설치.

---

태그(tag)

마크업 할 때 사용하는 약속된 표기법을 말함 태그는 웹 문서에 표시하려는 내용을 전달하는 언어

태그는 < 와 > 를 이용하여 작성 

태그는 소문자로 씀

여는 태그와 닫는 태그를 정확히 입력

들여쓰기를 위해 tab키를 사용 

태그는 속성과 함께 사용 가능

포함 관계를 명확히 해야 함

 

 

 

텍스트 태그

<h1>~<h6>

제목 표시 

일반 텍스트보다 굵고 진하게 표시 됨

숫자가 작을수록 제목 글씨가 커짐

 

 

<p>

paragrap의 줄임말. 단락표시.

 

 

<br>

줄 바꾸기

 

 

<hr>

horizontal의 줄임말. 수평 줄 넣기 

단락의 주제가 바뀌는 경우 사용. 가로선이 표시되게 됨

 

 

---

[오후]

<blockquote>
인용문 표시
다른 텍스트보다 안쪽으로 들어가게 됨

 

 

<pre>
preformat의 줄임말. 입력 그대로 화면에 표시

 

 

<strong>, <b>
텍스트를 굵게 표시할 때 사용
굵기차이가 거의 나지 않지만, strong은 강조하고자 할 때, b는 굵게만 표시하고 싶을 때 사용

 

<em>, <i>
이탤릭체로 표시
em은 특정 부분을 강조하고 싶을 때, i는 단순히 이탤릭체로만 표시하고 할 때 사용

 

<mark>
선택한 부분을 형광펜으로 그어놓은 듯한 효과를 냄

 

<span>
 일부 텍스트만 묶어 스타일 적용하고자 할 때 사용

<ul>, <li>
순서가 필요하지 않은 목록 만들기
항목 앞에 작은 원 같은 불릿이 붙음

 

<ol>, <li>
순서가 필요한 목록 만들기
<ol>에 type 속성을 지정하지 않으면 1부터 순차적으로 순서가 붙고,
type 속성에 여러 값을 주면 다양한 순서를 지정할 수 있다.

 

<dl>, <dt>, <dd>
제목과 설명이 한 쌍인 설명 목록 만들기
<dl>은 목록을 만들고, <dt>는 제목을, <dd>는 설명을 표시

<table>, <tr>, <td>, <th>
<table>로 표가 들어갈 자리를 만들고,
<tr>로 행을 생성
<td>로 셀을 생성
<th>로 제목 셀 시정
colspan : 가로로 셀을 합침, rowspan : 세로로 셀을 합침

 

<caption>
<table> 다음에 사용되고, 표에 제목을 붙일 수 있음
표 위쪽 중앙에 표시됨

 

<figcaption>
<table> 위에 쓰면 표 위에 제목이 표시되고, 아래에 쓰면 표 아래에 제목이 표시됨

---

실습과제

자신만의 온라인 프로필을 만들어보세요.

 

>> HTML_ 웹 페이지에 자기 프로필 생성 예제(단순화) :: HappyEndingIsMine (tistory.com)

 

 

다음과 같은 표를 만들어보세요.

 

>> HTML_ 표 그리기 예제 :: HappyEndingIsMine (tistory.com)

 

 

---

<img>
웹 문서에 이미지를 삽입할 때 사용(gif, jpg, png)
src 속성을 사용해 이미지 파일 경로를 지정해야만 이미지 표시가 가능

 

<a>
텍스트나 이미지 앞에 지정되며, 클릭 시 다른 페이지로 넘어갈 수 있도록 하는 태그

<a>태그 속성

---

실습 과제

더 향상된 프로필 사이트를 생성해보세요.

 

>> HTML_ 웹 페이지에 자기 프로필 생성 예제(블로그 형식) :: HappyEndingIsMine (tistory.com)

 

---