생활코딩
WEB1 - 11. 최후의 문법과 속성 img

태그의 신화된 문법인 ATTRIBUTE(속성)

img TAG

img는 image의 줄임말

img만 사용하게 될 경우 정보가 부족하기 때문에 아무런 동작을 하지 않습니다.

img TAG에 source의 줄임말인 src를 붙여 사용할 수 있습니다.

내 컴퓨터에 있는 이미지를 사용 할 경우 html과 같은 폴더에 위치시켜야 합니다.

(처음에 다른 위치에 넣어 고생했네요 ㅎㅎ)

이미지의 크기가 원하는 것과 다르다면 html img size attribute로 검색해서 알아내면 된다고 합니다. ㅎㅎ

with라는 속성으로 숫자나 %를 사용하면 원하는 크기로 조정을 할 수 있다고 합니다.

동영상을 보면서 꼭 실습하기를 권해드려요^^



생활코딩 야학
WEB1 - 10. HTML이 중요한 이유

새로운 사실.. 강의의 제목만 보고 생각했던 내용이 아니였네요

검색엔진에 상위로 노출 되는 방법

'h1' headings TAG를 썼을때 검색엔진에서 앞페이지에 나올 수 있다는 점입니다.

검색엔진은 전세계의 모든 페이지를 다운받아서 HTML 코드를 분석한다고 합니다.
하여 TAG를 근거로 해서 정리정돈 한다고 합니다. 유저가 '코딩'을 검색했을 때 h TAG로 제목이 코딩인 사이트와 그냥 시각적으로 제목이 보이는 사이트 중 제목이 코딩인 사이트를 먼저 보여준다고 합니다.

이 사실은 비지니스 측면에서도 정말 중요한 사실이네요.

오늘부터는 티스토리도 html coding으로 작성 해봅니다^^

접근성 accessibility

웹은 모든 운영체제에서 동작하고, 웹페이지의 소스코드는 누구나 볼 수 있고, 웹은 저작권이 없는 순수한 공공재

생소해서 어렵기만 하지만 저같은 초보에게는 정말 좋은 강의네요^^

WEB-9.줄바꿈 TAG : br vs p

br : 단순 줄바꿈 tag

 - br 태그는 닫지 않는다. 무엇인가를 설명하지 않는 태그들은 감싸야하는 컨텐츠가 없기 때문에 태그를 닫지 않는다는 규칙

 - 원하는 만큼 간격을 줄 수 있음

p : 하나의 단락을 그룹핑 하는 태그

 - 열고, 닫는 태그 존재

 - 단락과 단락의 간격이 고정 되어 있기 때문에 시각적으로 자유도가 떨어짐.

  ㄴ css를 이용하여 p태그한계를 극복할 수 있음

    ( css는 html과 완전히 다른 문법을 가진 언어로 html이 정보를 표현한다면, css는 정보를 꾸며줍니다.)

 줄바꿈 태그 사용방법

 - 단락을 표현할때는 p 태그

  ㄴ 웹페이지를 정보로서 보다 가치이께 해줌

  ㄴ br태그는 줄바꿈만을 의미



WEB1 - 8.통계에 기반한 학습

이번 수업은 tag에 대한 통계를 보여주며 통계를 기반으로하여 무엇을 보여주면 좋을 것인가를 생각하자는 동기부여를 해주고 있다.

www.advancedwebranking.com

구글에서는 전 세계에 있는 수많은 웹페이지를 분석합니다.
그 분석 결과를 공개했었는데 그 결과를 보기 좋게 잘 정리 정돈한 사이트.





우리가 어떤 시대를 살아가고 있고 어떤 시대라는 것을 재미있게 알려준 수업

혁명적인 출발~ 고고~

https://www.w3.org/ : W3C(The World Wide Web Consortium)라는 국제민간표준화기구의 홈페이지

웹은 한 기업에 의해서 만들어지는 것이 아니고
W3C에 소속된 여러 기업과 기관들의
논의를 통해서 만들어지고 있습니다.
미래에는 어떤 기능이 필요하고,
그 기능은 어떤 태그로 표현할 것인가를 의논하는 것이죠.
W3C에서 웹의 미래가 결정되면
각각의 브라우저 업체들이 같은 태그를
보다 잘 구현하기 위해서 치열하게 경쟁하고 있습니다.
웹이 다른 기술들과 구분되는
공공재적인 면모라고 할 수 있습니다.

WEB1 - 6.기본 문법 - 태그

이제부터 진짜 코딩~

어떤모양의 웹페이지를 만들 것인지 기획했다면, 조각조각 구현해보자~

오늘의 TAG

<strong>과 </strong> : 진하게 표시하고 싶은 구간을 감싸준다.

<u>와 </u> : 민줄치기(underline의 첫글자)

strong이라는 것을 HTML에서는 문법적으로 태그라고 부릅니다

앞에 있는 태그를 열리는 태그, 뒤에 있는 태그를 닫히는 태그라고 구분해서 부르기도 합니다. 닫히는 태그는 태그명 앞에 /를 붙입니다.

HTML과 같은 언어를 만든 사람들은 이 언어를 만들 때 자신들이 만든 문법을 사람들이 쉽게 이해하기를 원했습니다.
그래서 일상에서 자주 쓰는 말 중에 이 문법과 비슷한 말을 찾았겠죠. 그래서 찾은 비유, 은유가 바로 태그입니다.



WEB1. HTML 코딩 실습환경 준비

코딩을 하기 위한 에디터(Editor) 프로그램 : Atom

 - 웹브라우저에서 볼수 있는 웹페이지는 확장자가 html.

 - 웹브라우저에서 단축기를 이용해 만든 웹페이지 열어보기

   ㄴ 단축키 : Ctrl + O



WEB1 - 4.코딩과 HTML

본격적인 수업~ 여기서부터는 흘려들으면 아니되는 것 같아요

HTML(HyperText:Markup Language) - 웹페이지를 만드는 코드

* 원인을 부르는 표현

 - 코드(code) : 부호 또는 신호라는 의미

 - 소스(source) : 원천이라는 뜻

 - 컴퓨터 언어(Language) : 약속이라는 의미에서 언어

* 기계가 하는 일, 결과를 부르는 여러 표현

 - 애플리케이션

 - 앱

 - 응용 프로그램

 - 프로그램

* 웹 페이지 : 웹에서의 결과

* 웹 사이트 : 웹 페이지가 모여있는 것

* 웹애플리케이션 : 기능이 많으면 웹애플리케이션. 줄여서 웹앱

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

WEB1 - 3.기획

이전에 기획팀에 있어 해본 경험이 있어 호기심 있었지만 강의는 너무 짧고 간단. ㅎㅎ

기획 - 무엇을 만들 것인가를 설계하는 그려보는 과정

WEB1 - 2. 프로젝트의 동기

만든이의 프로젝트 동기

요약하자면 컴퓨터 프로그래머로 일하던 만든이가 SQL이라는 언어를 동료들에게 알려주며 반응이 좋자 판이 커져서 여기까지 오게 되었다~ 임돠 ㅎㅎ