5/4~5 생활코딩 < HTML 完 >

오늘의 진도:

 WEB1 - HTML & Internet

  HTML이 중요한 이유~웹호스팅

 

*  HTML이 중요한 이유

 (1) 비즈니스적인 측면

  ① 일반인이 제목을 쓸 때: strong & 글씨 크기 크게

  ② 지식인이 제목을 쓸 때: h3 태그

   → 차이는? 검색엔진에 해당 단어로 검색했을 때,

    검색엔진은 ②을 더 먼저 보여줄 것이다.

    ∵ 'h3'는 제목을 의미하지만,

       'strong & 글씨 크기 크게'는 시각적인 장식이기 때문

 

 (2) 휴머니즘적인 측면

   웹페이지를 예쁘기 하기 위해서

   HTML을 사용하지 않고 웹페이지 전체를 이미지로 만든다면

   시각 장애인이 스크린리더로 읽기 힘들다.

 

img 이미지 넣기

 

< 속성: 태그의 심화된 문법 >

 * 이미지 태그에 속성을 적용해보자

  (1) 이미지의 source(줄여서 src) 지정해주기

    img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png"

 

   cf) 내 컴퓨터에 있는 이미지를 표시하려면?

      웹페이지 파일(1.html)과 같은 위치에 있는 이미지파일이라면 파일 이름만

      ex) img src="coding.jpg"

 

      * 저작권 없는 이지미 찾기: public domain image로 검색

       → unsplash.com 등

 

  (2) 이미지 크기 조정하기

    width라는 속성을 이용해서 숫자나 %를 지정해준다.

    img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png" width="100%"    

 

< 부모 태그와 자식 태그 >

 parent

    child /child

 /parent

 

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

li (list) 목차. 앞에 까만 동그라미가 붙는다.

 - li라는 부모 태그의 자식 태그들 (ul, ol)

   둘 다 목차와 목차를 구분하는 경계를 만들어준다.

   → 이전 및 다음 글과 한줄 띄어쓰기가 되고,

       앞에도 몇 칸씩 띄어쓰기가 된다.

 

 (1) ul (unordered list) 까만 동그라미는 살아있고, 두 가지 띄어쓰기만 적용된다.

 (2) ol (ordered list) 까만 동그라미는 없어지고

   앞에 1. 2. 3. 을 자동으로 붙여준다.

   중간에 하나가 빠져도 자동으로 숫자가 변경된다.

 

① title 웹페이지의 제목 지정(크롬 탭에 나오는 이름)
② meta charset="utf-8" 한글이 깨지지 않도록 하기 위해서 입력
이 두 가지는 본문에는 표시되지 않는, 본문을 설명하는 태그다.
→ head 태그로 감싼다.

나머지 본문은 body 태그로 감싼다.

그리고 head와 body를 html 태그로 감싼다.

또한 이 웹페이지가 html로 만들어졌다는 것을 표현하기 위해서 문서의 시작에 !doctype html 코드를 추가한다.

 

a (anchor, hypertext) 링크

 ex) a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification"

  href (HyperText Reference)

  target="_blank" 새창에서 열리도록 한다

  title="html5 specification" 툴팁(클릭하지 않고 가리키기)했을 때 나오는 말

 

< 웹사이트 만들기 >

* 웹사이트: 링크를 통해서 서로 결합되어 있는 웹페이지들의 그룹

1. body 밑에 웹사이트 전체를 대표하는 큰 제목을 만들고 h1로 감싼다.

 - 생활코딩 WEB1

 

2. 그 밑에 각 페이지와 연결시킬 소제목을 만들고 li + ol로 감싼다.

 - 1. 들어가기

 - 2. 태그

 - 3. 속성

 - 4. 웹페이지 만들기

 

3. 1와 2에 각각 링크를 건다.

  이 때, Ctrl을 누르고 커서를 여기저기 누른 후 입력하면 동시에 입력이 된다.

  a href="1.html" /a

  추천 파일명은 index.html, 1.html, 2.html,..이다.

 

4. 본문을 다 써놓은 html 파일을 복제해서

  index.html, 1.html, 2.html,..을 만든다.

 

5. 1.html, 2.html,..은

 (1) h2로 제목을 써준다. ex) 1. 들어가기

 (2) 본문에 쓰고 싶은 내용을 쓰거나 원하는 내용만 남긴다.

 (3) title도 바꿔준다. ex) WEB1 - 1. 들어가기

 

6. index.html은

 (1) title을 바꿔준다. ex) WEB1 - Welcome

 (2) 본문에 원하는 내용을 쓴다. ex) 생활코딩 WEB1 - HTML & Internet

 

 

 

 

 

 

 

5/5

오늘의 진도:
 WEB1 - HTML & Internet
  웹서버 운영하기~수업을 마치며
  * 부록은 수강하지 않았음