아래 링크에 대한 정리글입니다.
WEB1 - HTML & Internet - 생활코딩
--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여
opentutorials.org
1. HTML
- Web이란?
웹은 한 기업이 독점하여 만든 것이 아닌 누구든지 만들 수 있는 것. 웹페이지 소스코드도 마찬가지로 누구든지 볼 수 있고, 모든 운영체제에서도 열린다.
- HTML이란?
HyperText Markup Language. 웹페이지를 만들 때 사용하는 코드. 저작권이 없는 퍼블릭 도메인(Public Domain)이기 때문에 자유롭게 HTML을 이용하여 웹페이지를 만들 수 있다.
- Atom
HTML을 편집할 에디터. github에서 만들어졌다.
- 기본적 문법
<태그> 내용 </태그> 의 식으로 코드를 적어간다. 태그는 중복하여 쓸 수 있고 태그 사이에 내용을 적어 웹페이지를 표현할 수 있다. 끝나는 태그에는 /를 붙인다. 요즘에는 약 150개가 넘는 태그가 존재한다.
https://advancedwebranking.com/html/ -> 자주 쓰이는 태그를 확인할 수 있는 사이트
자주 쓰이는 태그의 예
<strong> : text를 진하게(두껍께) 한다.
<u> : text에 밑줄을 그린다.
<h1>~<h6> : heading 즉 제목을 의미. 숫자가 작을 수록 글자가 크다.
*<br> : 줄바꿈. (/br 와 같은 닫는 태그가 없다 img, input, br, hr, meta)
<p> : 하나의 단락을 나타낸다. 각 단락을 나눌 수 있다.
- 속성
태그 이름만으로는 정보가 부족한 경우가 있다. 따라서 속성(attribute)를 추가해 문법에 사용하게 되었다.
예로 이미지를 입력하는 *<img> 태그에 source의 줄인말인 src를 붙여 이미지의 주소를 불러와 이미지를 불러올 수 있게 된다.
ex : <img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png">
해당 링크에 있는 이미지를 코드에 해당하는 웹페이지에 출력할 수 있다.
또 width 등을 이용해 그림 크기를 조정하거나 등등 속성을 통해 태그로 보다 더 풍부하게 웹을 꾸밀 수 있다.
- 부모(parent), 자식(child)
태그가 중첩될 때 바깥이 부모 안 쪽이 자식 태그라고 불린다.
기본적으로 관계는 뒤바뀔 수 있지만 고정된 관계도 있다.
ex) 목차(list)를 나타낼 때 쓰는 태그인 <li>는 목록을 다른 목록과 구분할 수 있게 해야한다. 따라서 <ul>태그를 통해 분리한다. 혹은 순서를 나타내는 <ol>을 사용할 수도 있다.
- 웹페이지의 구조
구조를 만들 때 사용하는 태그들이 따로 존재한다.
<title> : 웹페이지의 제목 지정
<body> : 웹페이지의 본문을 지정
<head> : 본문을 설명하는 태그. 본문에 포함되지는 않는다.
이 때 <body>와 <head> 는 html 태그로 감싸 표현하기로 하였다.
또 HTML로 만들어졌다는 것을 표현하기 위해서 문서의 앞을 <!doctype html> 로 시작한다.
- 기타 태그의 설명
<a> : 하이퍼링크를 거는 태그. 속성인 href로 해당 링크를 지정한다.
ex) <a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML)</a>
<iframe> : 동영상 삽입을 위한 태그.
ex ) <iframe width="560" height="315" src="https://www.youtube.com/embed/jSJM9iOiQ1g"
frameborder="0" allowfullscreen></iframe>
2. 서버와 클라이언트
정보를 얻고자 서버에 요청하는 곳이 클라이언트. 요청에 응답하여 필요한 정보를 제공하는 컴퓨터가 서버가 된다.
웹서버를 실제로 만들 수도 있고 이것이 어렵기 때문에 이런 웹서버를 빌려주는 것을 호스팅이라고 한다. 호스팅을 이용하면 보다 쉽게 웹서버를 관리할 수 있다. 그렇게 자신이 만든 웹페이지를 전세계 사람들에게 보여줄 수 있다.
혹은 실제로 아파치 등을 이용해 자신이 웹서버를 만들어 운영할 수도 있다.
'서버 공부' 카테고리의 다른 글
| 자바 스프링으로 웹 게시판 만들기(2) (0) | 2021.05.04 |
|---|---|
| 자바 스프링으로 웹 게시판 만들기(1) (0) | 2021.05.03 |
| 장고 서버 외부 접속 허용하기 (포트 포워딩) (0) | 2021.05.02 |
| MySQL Database 와 Django(장고) 서버 연결 방법, 기본 MySQL 명령어 (0) | 2021.04.07 |
| Django 기본 개념 정리 (0) | 2021.04.07 |
댓글