2021-12-12 13:58:42
WEB1-4강 코딩과 HTML
구현 : 원인인 코드를 통해 결과를 만든다. 코딩의 핵심
원인 Code=Source=Langage (사람이 하는 일)
>>부호, 신호라는 의미에서 코드, 원천이라는 뜻의 소스, 약속이라는 의미에서 언어
결과를 부르는 것 Application, App, Program, Webpage, Website (기계가 하는 일)
* 웹페이지를 만드는 코드 = HTML
HTML 장점 : 쉬우면서 중요하다.인류가 생산하는 모든 디지털 정보가 담기는 거대한 그릇.
PUBLIC DOMAIN 저작권이 없는 완전한 자유의 퍼블릭 도메인
빨리 가려면 혼자 가고 오래 가려면 같이 가라
웹은 특정 기업이 독점하는 기술만큼 빨리 발전하지 못했지만 독점이 없었기에
1990년 이후 아직까지도 살아남았고 앞으로도 살아 남을 가능성이 매우 큰 기술
WEB1-5강 HTML코딩과 실습환경 준비
준비물 : 웹브라우저, 코드를 작성하는 프로그램 (=에디터)
코드작성프로그램 = 편집하는 프로그램 = 에디터
윈도우서는 메모장,맥에서는 텍스트에디트,리눅스에서는 쥐에디트 등등
but, 사용방법이 다르고 기능이 코드 작성 기능이 아님
* 필요한 에디터를 찾는 방법
HTML Editor or best HTML Editor 2022 크롬에서 검색!
*디렉토리(directory) : 컴퓨팅에서 파일을 분류하기 위해 사용하는 이름공간
=폴더(folder)=카탈로그(catalog), 마이크로소프트 윈도우에서는 폴더와 디렉터리 번갈아가며 쓰임
하위 디렉토리는 서브 디렉토리 (sub directory)라고 하고 폴더도 하위폴더, 서브폴더라고 한다.
마이크로소프트 워드 확장자 .doc
한국 아래한글 확장자 .hwp
웹페이지 확장자 .html
*HTML 에디터 브라우저 창 켜기 : 파일열기 (엣지는 안됨)
단축키 : 윈도우 (Ctrl + O) , 맥(Command + O)
WEB1-6강. 기본문법 = 태그 TAG
저장 단축키 : 윈도우 ctrl + s / 맥 command +s 그리고 리로드
strong 진하게 <strong></strong>
underline 밑줄 <u></u>
<strong> creating web pages</strong>
앞에 있는 태그가 열리는 태그 뒤에 있는 태그가 닫히는 태그.
앞 뒤 구분을 위해서 닫히는 태그에 슬래시를 붙인다.
컴퓨터 용어가 어려울 때 사전을 찾아보면 비유 은유적인 표현이 많음
거대한 시라고 생각하면 됨
WEB1-7강. 혁명적인 변화
쉬운 것, 처음 배우는 것은 가장 자주 사용하고 가장 중요한 것이다. HTML이 그렇다.
W3C(웹을 만드는 곳 사이트) - 오른쪽 마우스 페이지 소스보기 하면 코드 볼 수 있음
*모르는 태그 검색 시 검색창에 'HTML h1 tag' 이런식으로 검색
예제를 먼저 보고, 카피해서 에디터로 가져온다. 붙여넣기 하고 리로드해서 먼저 추론하기.
그 다음 정의 보러가기. 혼자 먼저 스스로 파악해보는 것이 중요.
WEB1-8강. 통계에 기반한 학습
*웹페이지 태그 통계 볼 수 있는 곳
앞에 있는 것은 창조의 원천이다. 앞에서 배운 것들을 합성해서 뒤에 것이 만들어짐
앞에 있는 것들은 응용하면 수많은 것들을 만들 수 있음.
*통계를 기반으로 무엇을 공부할 것인지 생각해보기
WEB1-9강. 줄바꿈 br vs p
*검색창 html new line tag 검색해보기
새로운 줄, 줄 바꿈 <br> : 닫지 않는다!!! ex) 3줄 공간 = <br><br><br>
paragraph(단락) <p></p> : 단락을 표현, 열고 닫음! 여기부터 여기까지 단락이다
웹페이지를 정보로써 더 가치 있고 의미있게 표현해줄 수 있음.
<br> 줄바꿈 많이 하고 싶음 여러번 사용
<p></p> 정해진 여백만큼 벌어지게 돼 있기 때문에 시각적으로 자유도가 떨어짐!
but 우리에겐 css가 있음!!
ex) css 여백을 나타내는 태그 <p style="margin-top:40px;">
의미에 맞는 태그를 사용하는 것이 더 좋은 방법이다
WEB1-10강.html이 중요한 이유
1.일반인과 지식인의 차이
<span style = *font-size : 24px">coding</span> vs <h3>coding</h3>
일반인 심판(검색엔진) 지식인
(시각적으로만 제목인 사이트) 태그로 정리정돈 (제목이 코딩인 사이트)
검색엔진에 노출x = 현실적으로 존재하지 않는 것으로 보면 됨
웹이 갖고 있는 본래 의미 , 정보 탄탄, 이미지만 많으면 검색엔진에게는 존재하지x
*html을 의미에 맞게 정확하게 사용한다 >> 비즈니스 측면에서 생명줄과도 같음.
2. accessibility = 개방성/접근성
-웹 모든 운영체제에서 동작
-웹 페이지 소스코드 누구나 볼 수 있음
-웹은 저작권이 없는 순수한 공공재
WEB1-11강. 최후의 문법 속성 & img
<img>태그 이름만으로 문법 부족 --> <img soruce> --> <img src> --> <img src="이미지주소">
*unplash 닷컴 사이트_퀄 높은 저작권x 사진 사용가능
이미지 다운로드 프리 > web 디렉토리로 다운 > 이름 짧게 변경 rename
>"_____"에다가 사진 파일이름명 넣기, ex) "sky.jpg"
*이미지 태그로 속성 Attribute 알아보기
<img src ="coding.jpg" width="100%">
<img width="100%" src="coding.jpg">
위치는 상관 없음, 태그가 태그 이름만으로 부족할 때
어떤 이미지인지 알려줄 속성으로 더 많은 의미를 부과할 수 있다.
WEB1-12강.부모자식과 목록
<parent>
<child></child>
</parent>
부모태그와 자식태그
*목록 list = <li>
맥 command + 클릭 / 윈도우 ctrl + 클릭 : 여러개 선택시 적을 곳에 커서두고!
*<li>태그의 부모태그 = <ul>
<ul>부모태그
<li>1.~~~~~~~</li>자식태그
<li>2.~~~~~~~</li>자식태그
<li>3.~~~~~~~</li>자식태그
</ul>부모태그
***<li>태그는 반드시 부모태그를 가지고 있고
<ul>태그는 반드시 자식 태그를 가지고 있다.
<ol>=ordered list 앞에 자동으로 숫자가 넘버링 됨
<ul>=unordered list
*표 작성시 (표=table)
<table>의 경우에는 <li>와 다르게 3대가 같이 다님
WEB1-13강.문서의 구조와 슈퍼스타들
정보가 많아지면 많아질수록 정리와 체계가 필요하다 = 구조의 필요
제목을 <title></title>로 감싸면 페이지 제목을 명시적으로 알려줄 수 있고
검색 엔진과 같은 기계들은 바로 이 <title>이라는 것을 책표지와 같은 정보로 사용
웹페이지를 만들 때 <title>을 쓰지 않으면 엄청난 손해!!
컴퓨터는 모든 정보를 0 아니면1로 최종적으로 저장
0과1을 어떻게 저장할지 여러가지 약속이 있는데
그 약속 중의 하나가 utf-8
그렇다면 웹페이지가 열때도 utf-8로 읽어야 문제가 없어진다
그래서 컴퓨터한테 웹페이지를 열 때 이걸 utf-8로 열어라 라고 해야함
<meta charset="utf-8">
***charset = character문자 + set규칙
밑에 있는 코드는 본문
위에 있는 코드는 본문을 설명
즉,<title> 은 본문의 제목이 무엇인지 설명하고
<meta charset="utf-8"> 본문이 utf-8 로 저장되어 있다 설명
본문은 <body>라는 것으로 묶기로 약속.
<body>를 설명하는 태그를 <head>태그로 묶기로 약속.
html의 모든 태그는 <head><body>둘 중 하나의 아래에 놓이게 되어있고
상당한 고위직 태그이다. 이 고위직 태그를 감싸는 최고위층 태그가 <html>
그리고 < html>이라는 태그 위에 관용적으로
이 문서는 html이다 라는 뜻으로 <!doctype html> 이라고 써주기
큰그림, 어떤 웹페이지를 들어가도 이런 구조
<!doctype html>
< html>
<head>
<body>
WEB1-14강.HTML 태그의 제왕
태그가 웹의 왕국이라면 이 태그는 제왕
이 태그로 전세계에 최고의 검색 결과를 만들었음,
이 태그가 없으면 검색엔진이 존재하지 않음
도시의 길과 인체의 혈관과 같은 태그
이 태그가 없으면 전세계 모든 웹페이지의 고립되고 정보혁명도 없었을 것이다
일상에서 우리가 하루 100번도 넘게 사용하는 태그
HTML의 HyperText 가 이 태그를 의미
>>>anchor 배가 정박할 때 사용하는 닻을 의미
정보의 바다에 정박한다는 의미 = 링크 <a>
*사용설명서를 찾을 때 쓰는 검색어 html specification
specification 한국어로 명세, 설명서로 이해하면 됨.
html을 만드는 W3C 국제기구에서 만든 공식설명서.
W3C recommendation 권고안 (W3C는 직접 브라우저를 만들지 않음,
멤버들이 모여 미래의 웹은 어떠해야 하는가 의논하고 미래 웹 기술 결정하면
권고안을 발표하고 이 문서를 웹브라우저 제작업체들이 만들어가게 됨)
링크 태그 = <a>
링크 걸고 싶은 곳 감싸기 <a>_____</a> 정보부족 속성필요
<a href="링크주소">______</a>
a=link, h=hypertext, ref=refrence
클릭했을 때 새 탭이 열리게 하고 싶다.
<a href="링크주소" target="_blank">______</a>
또는 링크를 열기 전에 무엇인지 알려주고 싶다. 툴팁으로
a href="링크주소" target="_blank" title="html5 specification">______</a>
하고 마우스를 올리면 툴팁이 뜬다.
'02_STUDY > HTML' 카테고리의 다른 글
| 생활코딩 WEB1 - HTML & Internet 20강 정리 (0) | 2023.04.11 |
|---|---|
| 생활코딩 WEB1 - HTML & Internet 19강 정리 (0) | 2023.03.30 |
| 생활코딩 WEB1 - HTML & Internet 18강 정리 (0) | 2023.03.30 |
| 생활코딩 WEB1 - HTML & Internet 15강-17강 정리 (0) | 2023.03.30 |
| 유튜브 조코딩 HTML 강의 정리 (0) | 2023.03.28 |