개발자 환경 구축 1일차(24/11/11)

웹프로그래밍/HTML

개발자 환경 구축 1일차(24/11/11)

wkun 2024. 11. 11. 18:00

CONTENTS

Section1 웹프로래밍 개요

1.웹의 개념

2.웹 표준과 HTML5

3.웹 브라우저와 HTML 편집기

Section2 실습환경 구축

1.웹 서버의 개념

2.웹 서버의 구축

Section3 HTML 구조와 규칙

1.HTML5 문서의 구조

2.HTML5 문서의 작성

3.태그의 분류 및 속성

4.웹 문서의 레이아웃

--------------------------------------------------------------------------------------------------------------

Section1 웹프로래밍 개요

1.웹의 개념

◎인터넷: 우리가 사용하는 컴퓨터를 전 세계 규모로 연결한 것으로 정보공유나 검색을 목적.

◎ 웹: 인터넷 표준 문서 시스템으로 체계적으로 관리.

◎웹의 특징

-전세계 컴퓨터 연결

-HTTP 프로토콜 사용(=약속)

-HTML로 작성된 문서 연결

-텍스트. 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공

◎반응형 웹

-웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 웹 환경

ex)PC, 스마트폰, 테블릿

2.웹 표준과 HTML5

◎웹 표준

-개발자 간 일종의 약속

-누가 게발하든 정해진 규칙을 준수하면 모두 호환되어 편리하게 사용

◎W3C(World Wide Web Consortium)

-웹에 관련된 기술과 웹 브라우저 사용을 위한 표준안 개정

-웹 개발자나 사용자 간의 정보 공유 및 신기술 개발 등에 기여

◎웹 표준 기술 문서의 발전 단계

초안(idea)-후보권고안(후보 문서최종안)-제안권고안(4주이내검토)-권고안

◎마크업 언어: 웹 사용문서 구조언어 ex)html

◎유형

-구조적 마크업: 문서 구성방식 표현

-유형적 마크업: 문서 시각적 표현방법

-의미적 마크업:데이터 내용 자체 ex)header, nav

◎HTML5

-정의: W3C와 WHATWG의 두 단체가 협동하여 제안한 새로운 HTML 규격

-특징

．구조적 설계 지원

．그래픽 및 멀티미디어 기능 강화 cf)오디오, 비디오 파일 등록

． CSS3 지원 cf)요소배치정렬, 정적

．자바스크립트 지원 cf)고객 요구 多 동적 기능

．다양한 API 제공

．모바일 웹 지원

<구조적 설계>

<header>: 머리글
<footer>: 꼬리말
<airticle>: 본문 내용 표시
<section>: 비슷한 특성 끼리 그룹화
<aside>: 별도 내용 분리
<nav>: 내비게이션 표시

3.웹 브라우저와 HTML 편집기

◎ 웹 브라우저

-HTML 문서를 읽고 웹페이지에 정보를 표시하는 소프트웨어

-URL을 통해 접근

ex)구글 크롬, 마이크로소프트 엣지, 모질라 파이어폭스, 애플 사파리, 오페라

◎웹 브라우저 기능

-웹페이지 탐색

-접속하는 프로그햄의 주소 관리

-웹 페이지의 저장, 인쇄, 소스파일보기

◎HTML 편집기: 문서작성, 실시간 미리보기, 코드 자동완성

-메모장, 노트패드++, 울트라에디트, 에디트플러스, 아크로에디트, 비주얼 스튜디오, 어도비 브라켓, 서브라임 텍스트

*HTML 문서만들기 -> 실습

-HTML 편집기 설치

-HTML 문서 작성 및 저장

-HTML 문서 실행

[메모장 사용.txt]

<!DOCTYPE html>
<html>
<head>
<title> HTML의 시작 </title>
</head>
<body>
<h1> HTML을 시작합니다. </h1>
</body>
</html>

*파일-> 다른 이름으로 저장-> 파일이름: "-".html 확장자명 -> 저장

파일형식: 모든파일

*주의: 오타조심!!!

Section2 실습환경 구축

1.웹 서버의 개념

◎웹 환경

요청 파일요구

클라이언트(웹 브라우저) ------> 웹서버(아파치)

<-------

응답

인터넷: 전송방식 HTTP 규약

ex)손님-주인장

(고객)

◎웹 서버

-클라이언트 요청에 따라 서버에 있는 파일 제공

◎웹서버 기능

-리스너 기능: 클라이언트 접속 항상 체크 대기

-답변 기능: 결과 클라이언트에 보냄

◎프로토콜

-네크워크에서 제공하는 일종의 데이커 전송 규약

-웹 서버는 HTTP를 통해 클라이언트와 대화

◎포트

-웹 서버에서 일종의 문(구분)

-아파치 톰캣(Tomcat)의 경우 8080번 포트 사용(서버번호)

-포트번호

· 0~65,535번 중에서 사용 가능

· 미리 예약된 포트 번호: 0~1,023번

· 사용할 수 있는 포트 번호: 1,024~65,535번

주요) HTTP, HTTPS, FTP(Data), FTP(Cotrol)

◎서버 프로그램

-JSP(Java Server Page), ASP, PHP 등

-특히 자바를 기반으로 한 웹 서버 프로그램인 JSP가 많이 사용됨 ex) 스프링, 프레임워크

◎데이터베이스 접속 API

-JDBC: 자바 기반의 웹 프로그램이 쉽고 빠르게 데이터베이스에 접속하여 데이터를 조회하거나 저장

-OCBC: 마이크로소프트에서 개발

◎웹 서버 종류: 아파치 HTTP 서버, IIS 웹 서버, 엔진X, 라이티, 아파치 톰캣 서버

2.웹 서버의 구축

-구글크롬

-비주얼 스튜디오 코드 설치

Visual Studio Code 다운로드

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

1.확장-> 1) "Korean Language Pack for Visual "검색 -> 설치 -> Change Language and Restart 한글 변경(필수)

2) "Live Server" 실시간 반영

3) "Material Icon Theme"

4) " Auto Rename Tag"

2.관리-> 설정-> Editor: Tab Size "2"

auto검색->files: auto save "after Delay" 변경 ->숫자 "500" 으로 cf)1000=1s

Editor:Word Wrap "on"으로 변경

3.파일만들기: 파일-> 폴더열기-> 새로 만들기-> 폴더-> 파일 이름 입력(_.html 확장자 포함!)

*cf) 영어로 사용 할 것, "!" Enter 코드 작성-> 자동완성

Section3 HTML 구조와 규칙

1.HTML5 문서의 구조

1) 기본 태그로 웹 문서 작성하기

<!DOCTYPE html>

<html>

<head>

</head>

<body>

HTML5 기본 태그를 사용하여 작성한 문서입니다.

</body>

</html>

*우클릭-> open with Live Server 문서실행가능

2)메타정보를 정의한 웹 문서 작성하기

<!DOCTYPE html>

<html>

<head>

<head>

<body>

<p>헤드 태그 내 메타정보에는 웹 문서를 만든 이, 검색 시 키워드, 문서에 대한 설명, 문서 내 기본 디렉터리 등이 포함됩니다.</p>

<p>이 문서는 10초 후 저자 카페로 이동합니다.</p>

<a href="">여기를 클릭하면 기본 디렉터리로 설정된 www.w3.org 사이트로 이동합니다.</a>

</body>

</html>

*반응형 태그웹/ http-equiv="refresh" 자동 새로고침 이동 시간 간격

2.HTML5 문서의 작성

1) 태그 이름은 대소문자를 구문하지 않음

1-1)

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

HTML5 문서는 소문자로 작성할 것을 권장합니다.

</body>

</html>

1-2)

<!DOCTYPE html>

<HTML>

<HEAD>

<title>Document</title>

</HEAD>

<BODY>

HTML5 문서는 소문자로 작성할 것을 권장합니다.

</BODY>

</HTML>

2) 본문 내 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리

<!DOCTYPE html>

<html>

<head>

</head>

<body>

HTML5에서는

엔터, 탭, 스페이스바와 같은

키보드 값을 인식하지 않습니다.

<P> HTML5에서는 스페이스바 대신 특수문자를 사용해주세요.</P>

</body>

</html>

3) 태그의 포함 관계를 표현하기 위해 들여쓰기 적용

3-1)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>문서의 구조를 명확하게 작성해주세요.</p>

<p>들여쓰기를 해야 소스코드의 가독성이 높아집니다.</p>

</body>

</html>

3-2)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>문서의 구조를 명확하게 작성해주세요.</p>

<p>들여쓰기를 해야 소스코드의 가독성이 높아집니다.</p><p>줄 바꿈도 해주세요.</p>

</body>

</html>

*Enter 자동들여쓰기

4) 종료 태그를 반드시 사용

-일반 표기 형식: <P>~</P>

-단축 표기 형식: </P>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

HTML5에서는 종료 태그를 사용하도록 권장합니다.

<P></P>

태그 사이가 공백이라면 단축형 태그를 사용할 수 있습니다.

<p/>

p 태그는 한 줄을 띌 때 사용합니다.

</body>

</html>

*예외있음

5) 주석은 ''로 끝냄

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>주석은 소스코드를 설명하거나 불필요한 부분을 일시적으로 사용하지 않기 위해 씁니다.</h1>

</body>

</html>

*단축키: Ctrl + /

3.태그의 분류 및 속성

◎미리 정의되어있는 태그

-사용자가 변경할 수 없으며 사용 용도에 맞게 사용 ex) <p>, <h1>, <a>

◎사용자가 직접 정의하여 사용하는 태그

-사용자 태그를 직접 설계하고 HTML 문서에 포함하여 작성

1)미리 정의된 태그로 웹 문서 작성하기

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br>줄 바꿈

</body>

</html>

2) 사용자 정의 태그로 웹 문서 작성하기

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<company>한빛아카데미

<department>편집부

</department>

</company>

</body>

</html>

◎사용자 정의 태그 작성시 유의점

-일반적인 의미로 해석할 수 있도록 포함 관계 설정

-동등 관계로도 설정 가능 ex)회사<->학교

(a) 정상적인 포함 관계: 회사->부서->팀

(b) 비정상적인 포함 관계: 부서->회사->팀

◎속성

-모든 태그는 시작태그에 속성명을 가질 수 있고 태그명 뒤에 공백을 두고 작성

-태그의 종속적인 정보를 표현하기 위해 사용

-태그없이 단독으로 사용할 수 없음

-[속성명="속성값"] 형태로 작성

-같은 의미의 속성명이 태그별로 다를 수 있음 ex) 사람-키, 물건-높이

<시작 태그 속성="값">내용</종료 태그>

◎ 글로벌 속성

-모든 태그에 공통적으로 사용 가능한 속성

속성	설명
accesskey="단축키"	-공백으로 구분하여 여러 개의 단축키를 지정할 수 있음 -단축키를 작성한 순서대로 순위가 매져지기 때문에 제일 처음 작성한 단축키가 적용됨
class="클래스명"	-공백으로 구분하여 여러 개의 클래스명을 지정할 수 있음 -클래스 속성은 동일한 문서 안에 있는 여러 개의 태그에 동일한 이름으로 지정할 수 있음 -스타일 시트를 적용할 경우에는 셀렉터로도 이용 가능
contrteditable="편집할 수 있는지 없는지"	편집할 수 있는 경우에는 true로 지정하고 빈 문자{" ")이거나 편집할 수 없는 경우에는 false로 지정
contextmenu="menu 요소의 id 속성값"	메뉴 요소의 id 속성값을 지정
dir="텍스트 방향 표시"	왼쪽에서 오른쪽인 경우에는 lt, 오른쪽에서 왼쪽인 경우에는 rtl로 지정
draggable="드래그 할 수 있는지 없는지"	드래그 할 수 있는 경우에는 true, 드래그 할 수 없는 경우에는 false로 지정
dropzone="드롭한 아이템 처리 방법"	값을 copy로 지정하면 드래그한 데이터가 이 장소에 복사되고 move로 지정하면 드래그한 데이터가 이동함, 또한 link라고 지정하면 오리지널 데이터와 드롭된 곳 사이에 어떤 연결이 만들어짐
hidden="hidden"	-이 속성이 지정된 요소는 브라우저에 표시되지 않음 -<p hidden> 또는 <p hidden="hidden">과 같이 지정할 수 있음
id="이름"	-문서 내에서 해당 태그를 유일하게 식별하는 역할을 함 -동일한 문서 내에서 동일한 이름 중복하여 사용할 수 없음
lang="언어 코드"	한국어는 ko, 영어는 en, 미국 영어는 en-US, 프랑스어는 fr, 일본어는 ja 등 언어의 속성값을 지정
spellcheck="철자 체크를 할 것인지 말 것인지"	철자 체크를 할 것인지 말 것인지 지정
style="CSS선언"	세미콜론으로 구분하면 여러 개의 CSS 선언을 지정 할 수 있음
tabindex="이동 순서"	-실제로 tab키를 이용하는지 아닌지는 환경에 따라 다름 -값에는 정수를 지정하며, 값이 작은 것에서 큰 것으로 이동됨 -값이 0으로 지정된 요소와 tabindex 속성이 지정되어 있지 않은 요소는 1 이상의 값이 지정되어 있는 요소 다음으로 포커스가 이동됨, 또한 마이너스 값을 지정한 경우 포커스는 가능하지만 tab키에 의한 이동 대상은 되지 않음

◎ 미리 정의된 속성

-특정 태그에만 사용할 수 있도록 미리 정의된 속성

미리 정의된 속성 사용하기

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

*img src url 지정:

1.파일->폴더열기->상대경로복사

2.웹서버 주소: 우클릭->이미지주소 복사->주소 붙여넣기

img src: 사진주소(경로) url.jpg

border: 테두리 두께

width: 가로폭

height: 세로폭

alt: 설명

title: 제목

a href="주소" 필수

"#" 주소가기 싫을 때

4.웹 문서의 레이아웃

구조 태그를 사용하여 웹 문서 작성하기

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</center>

</header>

<hr>

</header>

<p>이곳은 부 세션 영역입니다.</p>

</article>

</header>

<p>이곳은 부 세션 영역입니다.</p>

</article>

</hgroup>

</article>

</section>

<aside>

<p>이곳은 부가적 정보를 제공하는 공간입니다.</p>

</aside>

<hr>

</footer>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>HTMML5 기본 구조 요소2</title>

</head>

<body>

</center>

</header>

</article>

</section>

</footer>

</body>

</html>

'웹프로그래밍 > HTML' 카테고리의 다른 글

개발자 환경 구축 4일차(24/11/14) (2)	2024.11.14
개발자 환경 구축 3일차(24/11/13) (6)	2024.11.13
개발자 환경 구축 2일차(24/11/12) (0)	2024.11.12

현재글개발자 환경 구축 1일차(24/11/11)

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

wkun 님의 블로그