WEB1 - HTML & Internet

WEB1 - HTML & Internet

본 포스팅은 생활코딩님의 Web1 강의를 바탕으로 정리한 내용입니다.

실습 준비

https://atom.io/ 에서 에디터 atom을 다운받는다.

실습을 진행할 폴더를 생성한다.

atom을 실행 후 새 프로젝트를 생성하고 프로젝트를 우클릭해 새 파일을 생성한다.

웹 브라우저에서 Ctrl + o를 눌러 생성한 html 파일을 선택해 열어본다.

기본 문법

텍스트 강조 : 과 으로 강조하고 싶은 구간 감싸기

텍스트 밑줄 : 와 로 감싸기

태그 - 은 열리는 태그, 은 닫히는 태그

What is tag

태그는 중첩해서 사용 가능

혁명적인 변화

앞의 내용들을 공부하고 나서 우리는 태그를 보면 '이게 뭐지?'에서 '이 태그는 어떤 기능을 할까?'를 생각하는 것으로 변화하였다.

즉, 우리가 모르는 것이 뭔지 아는 상태로 변화한 것이며 이는 검색이 가능한 상태를 말한다.

수많은 태그들을 검색해보고 그게 무슨 기능인지 스스로 알아내는 과정이 매우 중요하다.

예를들어 h1 태그는 무슨 역할을 할까?

html h1 tag를 검색하면 h1-h6 태그들은 제목을 나타내는 태그들임을 쉽게 알 수 있다.

통계에 기반한 학습

현재 태그는 150여종으로 매우 다양하지만, 주로 쓰이는 태그는 20여종 정도이다.가장 많이 쓰이고 있는 태그들에 대한 통계를 알려주는 사이트도 있다.

http://advancedwebranking.com/html/

줄바꿈

- br태그

닫는 태그가 없다는 것이 특징

무언가를 설명하는 태그가 아니기 때문이다. 이외에도 img, input, hr, meta 등은 닫는 태그가 없다.

- 단락을 표현하는 태그

태그는 하나의 단락을 그룹핑한다. 하지만 단락 간의 간격이 고정되어 있다는 단점을 가진다.

CSS를 이용해 간격을 세밀하게 조절이 가능하다. (아래 코드는 사용 예시)

HTML이 중요한 이유

의미에 맞게 태그를 이용할 줄 아는 것은 매우 중요하다.

웹은 소외되는 사람 없이 누구나 접근할 수 있는 접근성을 가져야 하기 때문에 태그를 의미에 맞게 이용해야 그 가치를 가질 수 있다.

최후의 문법 속성과 img

이미지를 넣는 태그 속성(attribute)을 넣어주지 않으면 동작하지 않는다.

부모 자식과 목록

- 부모 태그와 자식 태그

아래 코드로 살펴보면 child 태그는 parents태그에 대해 자식이며 parents태그는 child에 대해 부모 태그이다.

hello

- 부모 자식 관계가 고정된 태그

리스트를 표현하는 태그와 다른 목록과 구분할 수 있게 하는 태그는 서로가 있어야만 사용할 수 있고, 리스트 태그는 ul의 자식이어야만 한다.

추가로 태그도 마찬가지인데 이것은 과 달리 순서가 없는 리스트를 구분할 때 사용한다.

문서 구조와 슈퍼스타들

- 제목 지정하기

를 사용해 제목을 지정할 수 있다.

웹페이지를 검색엔진이 분석할 때 가장 중요하게 생각하는 태그이기 때문에 꼭 지정해주어야 한다.

- 문자 표현 및 해석 방식 일치시키기

아래 코드처럼 이 페이지는 utf-8로 저장되었으니까 이 방식으로 해석해야해! 라고 알려줘야 한다.

- 본문은 body태그, 본문을 설명하는 태그는 head태그로

- body태그와 head태그를 감싸는 html 태그

이는 html로 만들어졌음을 표현하는 것이다.

HTML 태그의 제왕

- 링크 걸기

target="_blank" 옵션은 링크 클릭시 새 창에서 페이지를 열도록 한다.

텍스트

웹사이트의 완성

웹사이트(Web site)는 링크를 통해서 서로 결합되어 있는 웹 페이지들의 그룹을 말한다.

인터넷을 여는 열쇠

인터넷이 동작하기 위해서는 최소 두 대의 컴퓨터가 필요하다.

하나는 웹 브라우저가 설치된 컴퓨터, 하나는 웹 서버가 저장된 컴퓨터이다.

웹 서버 컴퓨터에 주소를 부여하고 index.html을 저장한 후, 웹 브라우저 컴퓨터에서 해당 주소를 입력하면 어떤 일이 일어날까?

웹 브라우저 컴퓨터는 서버 컴퓨터에 전기적 신호를 보내고, 이 전기적 신호는 index.html 파일을 요청하는 내용을 담는다.

신호를 받은 웹 서버 컴퓨터는 디렉토리에서 index.html파일을 찾고 다시 전기적 신호를 전송한다.웹 브라우저 컴퓨터는 이 신호를 받아 다시 코드를 해석한 뒤 화면에 띄운다.

이 과정에서 요청하는 컴퓨터를 클라이언트 컴퓨터, 응답하는 컴퓨터를 서버 컴퓨터 라고 한다.

웹 호스팅

직접 웹 서버를 운영하는 것은 쉽지 않다. 웹 서버를 배워서 컴퓨터에 설치해야 하기 때문이다.

이러한 어려운 과정을 대신해주는 업체가 바로 웹 호스팅 업체이다. 깃 허브는 무료로 웹 호스팅을 제공한다.

- 깃허브에서 호스팅 기능 사용하기

1) repository 만들기 (readme 체크, public으로)

2) 파일 업로드

3) setting 클릭 - Pages - main branch 선택

4) save 후 생성된 주소를 클릭하면 만든 웹페이지를 볼 수 있음

HTML은 웹 브라우저가 해석하기 때문에 서버쪽에서 따로 할일은 없다. 이를 정적(static)이라고 하며 무료로 이용할 수 있다.

반면 python, php, ruby, java는 동적이며 대체로 유료 서비스를 이용해야 한다.

웹 서버 운영하기가 남았는데 이건 다음 시간에 해서 html 포스팅을 마무리 지을 것이다..!

from http://shotory.tistory.com/58 by ccl(A) rewrite - 2021-12-30 22:00:41