1주차 정리

#생활코딩 HTML & Internet – 1. 수업소개 ~ 11. 최후의 문법 속성 & img

 

왼쪽 : 원인에 대한 결과, 기계가 하는 일 = Application, App, Program, Webpage, Website

오른쪽 : 원인, 사람이 하는 일 = Code, Source, Language

=> 원인인 코드를 통해서 결과를 만든다는 것이 코딩을 이해하는 핵심임

 

*웹페이지를 만드는 코드 = HTML(HyperText Markup Language)

-HTML 언어의 특징(장점)

  1. 쉬움

  2. 중요함 (자주 사용되기 때문)

  3. PUBLIC DOMAIN임 (저작권이 없다는 의미)

 

-HTML이라는 언어를 이용해서 코딩을 하기 위한 준비물

  1) 웹 브라우저

  2) HTML 코드를 작성하는 프로그램

     ex) 메모장(윈도우), Textedit(맥), 리눅스(gedit), 아톰(ATOM)

 

-웹 페이지를 연다 = 주소창에 주소 입력

=> 주소에 해당되는 (다른 컴퓨터에 저장되어 있는) 웹 페이지를 읽고 싶을 때 : 주소를 입력

 

*웹 브라우저와 같은 컴퓨터에 있는 파일인 1.html을 읽는 방법 => 파일 열기 기능 사용(Ctrl+O)

 

*웹에서 가장 중요한 문법 : 태그(TAG)

creating web pages

-앞에 있는 태그 : 열리는 태그

-뒤에 있는 태그 : 닫히는 태그 (앞에 붙이는 태그와 구분하기 위해 슬래시를 붙임)

1) <strong> : 진하게 표시

2) <u> : 밑줄 (underline)

3) <h1> : 제목(headings) -> 일반적인 텍스트보다 글씨가 두꺼움, h 뒤에 있는 숫자가 작을수록 숫자 크기가 커짐, 줄바꿈이 됨.

 

9. 줄바꿈 : br vs p (경쟁관계에 있는 태그)

코드에서 줄바꿈을 했음에도 불구하고 웹페이지에서는 그것이 반영되고 있지 않다.

-> 줄바꿈하는 태그 필요

-> html new line tag

-> <br> 태그

이렇게 <br>을 세 번 사용하면 단락이 나누어진 걸 한눈에 알아볼 수 있다.

<br> 태그는 줄바꿈이라고 하는 시각적인 의미만을 가지고 있기 때문에 무언가를 감쌀 필요가 없다.

 

-> 단락을 표현할 때 쓰는 특정한 태그

-> html paragraph tag

-> <p> 태그

: 어디서부터 어디까지가 한 단락인지를 표현함. 따라서 열린태그(<p>), 닫힌태그(</p>)가 존재함

 

*다만, <p> 태그는 줄바꿈의 크기가 정해져 있다는 단점이 있고, 그 단점을 보완하기 위해 css 기법을

사용하면 시각적으로 더 극적인 줄바꿈 효과를 볼 수 있다.

 

 

10. html이 중요한 이유

html이 중요한 이유는 검색엔진의 검색에서 우선순위를 가지기 때문에, 실질적으로 존재하는 데이터 즉, 정보를 탄탄히 하게 되기 때문에 중요하다. 또한 시각장애인들이 사용하는 글을 읽는 프로그램이(스크린 리더) 접근성(accessibility)을 갖게 하기 위해서도 중요하다. 즉, html은 비즈니스 측면 뿐만 아니라 휴머니즘적인 측면에서도 매우 중요한 기술이다.

 

11. 최후의 문법 속성 & img

-이미지를 웹페이지에 포함시킬 때 사용하는 태그의 이름 : <img>

-태그의 이름만으로는 정보가 부족할 때 있음 -> 새로운 문법 출현시킴 -> 어떤 이미지인지를 알려주는 속성 : src