-
WEB & HTML공부 !/Django·Web 2020. 7. 8. 00:15반응형
WEB
인터넷 상의 하나의 서비스로 웹보다 더 광범위한 범주이다
인터넷은 세계적으로 확대되어 연결된 컴퓨터 네트워크망 자체를 의미한다.
WEB 의 동작원리
사용자 (Client)가 요청을 하면 웹 서버(Server)에서 html 문서를 받아
웹 브라우저를 통해서 화면에 웹 페이지를 표시해준다.
요청과 응답의 과정으로 이해하면 쉽다.
HTML
Hyper Text Markup Language
웹 페이지를 기술하기 위한 언어
모든 웹페이지의 뼈대라고 이해하면 좋다.
html은 태그와 내용 구성된다.
아래는 기본적으로 모든 에디터에서 자동 완성해주는 html 태그이다.
이제 코드블럭을 한 줄씩 해석해보자.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html><!DOCTYPE html>
사실 html 태그가 아니라 웹 브라우저에
어떤 html 버전을 쓸지에 대한 지시사항을 나타낸다.
<html> </html>
모든 태그를 둘러쌓고 있는 이 태그는 html 문서임을 나타낸다.
<head> </head>
이 부분에는 웹페이지에 대한 정보를 담는다.
<meta chartset="utf-8">
html 파일의 인코딩을 알려주는 태그로
여기서 'utf-8' 은 한글이 깨지지 않게 할때 사용한다.
<title> </title>
head 태그에 명시하며 문서의 제목을 정의한다.
<body> </body>
이 부분에는 웹 브라우저에 나타낼 내용들을 담는다.
HTML 여러 태그들 !
html에는 수많은 태그들이 존재하는데 다 외울 필요는 없고 필요에 따라 찾아 사용하면 된다.
기본적인 태그 사용법을 알면 모든 태그들의 여는 태그와 닫는 태그,
그 두 태그 사이에 내용을 적어 사용할 수 있다.
물론 속성을 갖거나 조금 특성을 가진 태그들도 존재하지만 충분히 공부하면 된다 !
아래 소개되는 태그들은 사실 통용되는 인기 태그라기보다 개인적인 기준으로 작성된 것들이다 ^^
본문 및 소제목을 나타내는 태그 <h1>
<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>h1부터 h6까지 6가지 단계가 있고 각 단계에 따라 크기와 굵기가 달라진다.
이 태그는 제목을 나타내는 용도이며 글자의 크기나 굵기를 조정하는 용도는 아니다.
크기나 굵기는 style 태그나 css 등을 사용해 설정할 수 있다 !
단락 태그 <p>
<h1>The p element</h1> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p>paragraph의 p를 의미하며 p 태그를 사용해 단락 단위로 본문을 작성할 수 있다.
단락 단위의 본문을 스타일 태그를 사용해 모양을 바꿀 수 있으며
단락 태그가 끝나면 자동으로 공백이 만들어진다.
이미지 삽입 태그 <img>
<img src = "이미지 파일 소스 url" alt="이미지를 출력할 수 없을때 출력되는 문자열 (필수속성!)" width="이미지 가로폭 px" height="이미지 세로폭 px">웹 사이트에 이미지를 출력할때 사용한다.
속성을 가지는 태그이며 src 속성에는 이미지의 경로를 지정해주면 된다.
src 이미지 경로 설정 방법은 절대 경로를 지정하는 방법과 상대 경로를 지정하는 방법 두 가지 방법이 있다.
절대 경로는 이미지의 절대적인 경로, 고유한 경로를 의미한다.
일반적으로는 상대 경로를 지정하는데 html 문서를 기준으로 경로를 적어주면 된다.
html 문서와 동일한 위치에 존재할 경우 파일명.확장자를 적으면 된다.
하지만 다른 위치에 존재하고 있다면 상위 폴더에 있는지 하위폴더에 있는지에 맞춰 적어주면 된다.
하이퍼링크 <a>
해당 주소로의 페이지 이동을 원할때 사용하는 태그이다.
아래 코드 블럭은 <img> 태그를 넣어 이미지를 누르면 페이지 이동이 되도록 짠 코드이다.
<a href="http://kangsu-2ji.tistory.com" target="_self"> <img src="me.png" alt="나!"> </a><a> 태그 또한 속성을 가지는 태그 중 하나이다.
href 속성에 이동하고자 하는 url 을 적어주면된다.
target 속성은 우리가 링크를 눌렀을때 이동하려는 페이지가 어떤 식으로 보여질지를 결정한다.
"_self" 라고 적을 경우 현재 윈도우 화면에서 이동하고자한 페이지가 뜬다.
"_blank" 라고 적을 경우 새로운 윈도우 창이 열린다.
"_parent" 라고 적을 경우 부모의 윈도우, "_top" 라고 적을 경우 브라우저 윈도우에서 뜬다.
정리 !
Django 라는 웹 프레임워크를 사용하기전 Web이란 무엇인가에 대한 간략한 개념과
클라이언트와 서버의 요청과 응답이라는 동작 원리로 구현된다는 것을 이해하게 되었다.
또 웹 페이지의 뼈대가 되는 html의 개념과 html 을 구성하는 태그들의 작성 방법
그리고 몇 가지 태그의 예시를 정리해보았다.
누군가 내 블로그를 볼지 모르겠지만 도움이 되었으면 좋겠다 :D
참고
https://www.w3schools.com/html/default.asp
HTML Tutorial
HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website. This tutorial follows the latest HTML5 standard. HTML is easy to learn - You will enjoy it! Start learning HTML now » Easy Learning with HTML "Try
www.w3schools.com
반응형'공부 ! > Django·Web' 카테고리의 다른 글
Django 클론코딩으로 인스타그램을 ! 3탄 (0) 2022.04.01 Django 클론코딩으로 인스타그램을 ! 2탄 (0) 2022.03.31 Django 클론코딩으로 인스타그램을 ! 1탄 (0) 2022.03.24 Django App 생성과 등록 및 static 파일 관리 (0) 2020.12.14 Django 개념 및 로컬 서버 돌리기 ! (2) 2020.08.26