본문 바로가기
공부기록/HTTP

2월 13일 (1) HTML - 웹 개발 시작하기

by project100 2023. 2. 13.

1. 웹 개발

웹 브라우저 화면에 보이는 겉모습을 만드는 것이 전부가 아니다.

웹 사이트는 사용자에게 제공할 기능, 서비스까지 모두 담아야 한다.

 

서버 vs 클라이언트

프런트엔트 개발 vs 백엔드 개발

 

기본페이지, 웰컴파이, 웰컴페이지 - 처음 웹 사이트에 들어갔을 때 

웹페이지의 상단 

제어하는 부분(주소창, 제목 등) 

서비스를 제공하는 부분(화면 부분) - 프런트엔드 

 

엔드 포인트 ------------ 엔드 포인트

 

기본영역

HTML, CSS, JS

 

HTML - 웹 문서의 뼈대

CSS - 웹 문서를 꾸밈

JS - 사용자 동작에 반응

 

과거 : 정적인 페이지가 주, 변하지 않음

현재 : 동적인 페이지, 뉴스 등 변화함

 

배울 기술 

제이쿼리

스프링

 

2. 웹 개발 환경 만들기

 

웹 브라우저 

크롬, 엣지, 파이어폭스, 사파리 등

 

웹 편집기, 에디터

Visual Studio Code

텍스트를 기반으로 함

 

메모리 누수 : 메모리가 깔끔하게 삭제되지 않고 남아서 메모리를 사용할 수 없게 되는 경우

가장 좋은 방법은 윈도우가 느려지면 포맷하고 다시 까는 것이 필요하다.(초기화)

* 작업 파일의 경우 백업하는 것이 중요! (포맷하면 복구 불가)

 

로컬디스크를 나누어서 사용하는 것이 필요

C 드라이브에 운영체제 뿐만 아니라 

다른 프로그램을 설치할 만큼의 크기를 할당해 주는 것이 필요

 

윈도우 관리도구> 컴퓨터 관리> 디스크 관리

드라이브 문자 변경 가능

 

작업한 파일은 바탕화면보다 

다른 디스크에 저장하는 것이 좋다.

 

 

3. Visual Stuido Code 실행

 

<!DOCTYPE html>
<html>
    <head>
        <title>웹 문서 만들기</title>
    </head>
    <body>
        <h1>웹 개발 기초</h1>
        <h2>웹 개발 기초</h2>
        <h3>웹 개발 기초</h3>
        <h4>웹 개발 기초</h4>
        <h5>웹 개발 기초</h5>
        <h6>웹 개발 기초</h6>
        <p>HTML</p>
        <p>CSS</p>
        <p>JavaScript</p>
    </body>
</html>

<p>보일까요?</p>

 

코드 어시스턴트기능이 있다.

코드를 치면 자동완성

* 들여쓰기 그대로 작성하기!

 

path 경로/ndex.html

작성한 것과 화면에 보이는 것이 어떻게 다른지 비교해 보기

<!DOCTYPE html> 현재 작성된 문서의 표준을 알려준다.
이 부분만 대문자
나머지 작성은 소문자로
 
선언한 후 아랫 부분은 전부 요소라고 한다.
 
<tag> 
<>시작하는 태그와 </>종료하는 태그가 있다. 쌍으로 이루어져 있다.
태그와 태그 사이를 영역이라고 한다.
 

<html> </html>의 작성한 모든 부분을 문서라고 한다.

 
<head>의 역할
문서를 화면에 어떻게 보여줘야 하는지에 대한 규칙을 작성하는 부분
화면에는 보이지 않음.
 
예외적으로 title만 보임
 
 
<body>  실제 웹 브라우저 화면에 나타나는 내용
 
<h1> 제목 heading의 h를 따와서 h
숫자 1-6까지 존재
주로 1-3까지만 제목으로 많이 사용한다.
 
<p> 본문태그
 
HTML
hyper text mark up languge
웹에서 자유롭게 연결될 수 있는 문서를 만드는 언어
 
융통성이 좋아서 </html> 이후에 
태그를 작성해도 보인다.
</html>

<p>보일까요?</p>
> 바깥 쪽으로 작성하지 않도록 하는 것이 필요하다
 
 
들여쓰기를 하는 이유
1. 영역의 구분을 나타내기 위해서
2. 유지 보수의 용이함을 위해서
왼쪽정렬
 
 
 
아스키코드- 영어만 사용가능
7비트 부호체계
 
부모태그, 자식태그 
형제태그 : 같은 라인선상
 
 
단축키 ! 사용하면 편리
meta UTF-8 한글이 깨지지 않고 사용되기 위해서 사용한다.
<!DOCTYPE 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>Document</title>
</head>
<body>
    <header>여기는 머릿글 영역입니다.</header>
    <nav>여기는 메뉴 영역입니다.</nav>
    <section>여기는 본문영역입니다.
        <article>여기는 본문1 영역입니다.</article>
        <article>여기는 본문2 영역입니다.</article>
    </section>
    <aside>여기는 부가 정보 영역입니다.</aside>
    <foorer>여기는 바닥글 영역입니다.</foorer>
</body>
</html>

시멘틱 : 의미론적인, 의미가 통하는 이름만 봐도 의미를 알 수 있다.

사이트 구성영역

헤더(header) - 로고, 메뉴,

                         내비게이션 영역 <nav>

섹션영역(section) - 본문

                                article 영역

                                aside 영역

푸터(footer) - 꼬리글, 바닥글

 

웹 브라우저로 봤을 때는 의미가 없으나,  코딩한 작업으로 봤을 때 의미가 있다.

 

 

 

HTML 버전에 따라서 바뀌기 때문에

업데이트된 내용을 배우는 것이 필요할 것 같다.

 

코딩을 작성할 때나 분석할 때 영역별로 

작게 분할하여 생각하거나 쪼개서 코딩을 하는 연습을 할 필요가 있다.

 

태그를 전부 외우지 말고 필요한 태그를 찾아서 사용해도 되지만,

기본적인 태그나 자주사용하는 태그는 외우기!

 

 

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'공부기록 > HTTP' 카테고리의 다른 글

2월 15일 (2) HTML - 하이퍼 링크  (0) 2023.02.15
2월 15일 (1) HTML - 멀티미디어  (0) 2023.02.15
2월 14일 (2) HTML - table  (0) 2023.02.14
2월 14일 (1) HTML - 목록  (0) 2023.02.14
2월 13일 (2) HTML - 웹 문서 만들기  (0) 2023.02.13

관련글

티스토리툴바