무엇인가를 만들기 전에 무엇을 만들것인가를 미리 상상하고, 계획해보는 과정이 필요하다 (기획)
집중해서 봐야할 부분은 어떤쪽이 사람이 하는일이고, 어떤쪽이 기계가 하는일인가를 분리해서 생각해 보는 것이다.
(어떤 것이 결과인지 추론해보기)
코딩/언어작성 : 사람이 하는일, 원인
- 부호 또는 신호라는 의미의 코드 / code
- 원천이라는 뜻의 소스 / source
- 약속이라는 의미에서 언어 / 컴퓨터 언어
표출/화면 : 기계가하는일, 결과
- 웹에서는 결과를 웹페이지라고 한다.
- 웹페이지가 모여있으면 웹사이트 ==> 기능이 좀 많으면 웹어플리케이션
즉, 원인인 코드를 통해서 결과를 만든다는 것이 코딩을 이해하는 핵심이다.
웹페이지를 만드는 코드 => HTML : HyperText Markup Language
* HTML은 쉬우면서 중요하다
* 퍼블릭 도메인 : 저작권이 없는 도메인
태그 : 옷을 살 때 붙어있는 것 => 역할, 옷을 설명 / (비유, 은유)
HTML => 사람들이 이해하기 쉽게 만듬
-- 한글이 깨졌을땐 <meta charset = "utf-8">을 추가
=> 웹브라우저에게 UTF-8로 페이지를 열라고 알려줘야하는데 그걸 브라우저에게 알려주는 코드가 바로
위 코드이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>생활코딩 WEB - HTML</title>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>HTML</h2>
<p>HyperText Markup Language<u><strong>(css)</strong></u></p>
</body>
</html>
|
<strong></strong> : 강조표시, 진하게 표시
<u></u> : 밑줄(underLine)
혁명적인 변화
* 처음 배우는 것은 쉽지만 중요하다.
*가장 자주 사용되는 부품이면서, 그 부품을 결합해서 새로운 완제품을 만들어 내는 결합방법이기 때문이다.
* 오늘날은 기초만으로 많은 것을 할 수 있는 세대가 되고있다.
기초만 알아도 모르는것을 기계가 알려주고, 모사하는 것은 기계가 해준다.
앞에서 우리가 살펴본 혁명적인 변화로 인해서 태그가 무엇인지 알고 있다면 모든 태그를 알고 있는 것과 다름없다.
1분이면 찾을 수 있다.
★ 어떤 방한으로 공부하면 좋을지 스스로 결정하게끔 도움
밑천으로 알고있으면 편리한 태그가 무엇인지를 스스로 판단할 수 있도록 해줄 것
★ 공부할 때 통계를 기반으로 공부방향을 스스로 설정하는 것도 좋음.
-- 가장 많이 사용하는 태그
1등 : <head>
<br> 태그 => 줄바꿈
-- 무엇인가를 설명하지 않는 태그들은 감싸야하는 컨텐츠가 없기 때문에 태그를 닫지 않는다는 규칙이 있다.
-- Img, input, br, hr, meta 등이 닫지 않는 태그의 사례이다.
-- 줄바꿈은 단락을 표시하기 위함
-- 단락 관련 태그 ==> <p>, <br>, <hr>
-- <hr> : 수평선 태그
-- <blockquote> : 인용태그
<p> 태그 : 단락 표시
-- 단락을 표현할 때는 줄바꿈 태그보다 단락을 표현하는 태그인 P 태그가 더 좋은 선택이다.
단락에 단락태그를 사용하는 것이 웹페이즐 정보로서 보다 가치있게 해주기 때문이다.
<br> 태그는 줄바꿈을 의미할뿐.......
<P> 태그의 단점
-- 단락과 단락의 간격이 고정되어 있기 때문에 시각적으로 자유도가 떨어진다.
-- 반면 <br> 태그는 쓰는 만큼 줄바꿈이 되기 때문에 원하는 만큼 간격을 줄 수 있는 장점이 있다.
-- 그래서 많은 사람들이 <br> 태그를 선호한다.
==> CSS 기술을 사용해서 <p>의 한계를 극복하면 된다.
공부를 하면 보이지 않던 것이 보이기 시작
들리지 않던 것이 들리기 시작한다.
오늘날 정보의 세계에서 검색엔진의 검색결과에서 노출되느냐는 실제로 존재하느냐, 존재하지 않느냐의 문제라고 할 수 있다.
의미에 맞는 태그로 웹페이지를 만든 지식인과 그렇지 않은 일반인은 10년 뒤에 인생이 달라져 있을 것이다.
* 코드가 다른 것이 중요한 이유
1) <h3> coding </h3>
2) <strong><span style="font-size:22px;">coding</span></strong>
두 코드는 눈으로 보기에는 같지만 똑같은 모양의 두 제목은 코드가 완전히 다르다.
검색엔진에서 coding 이라는 정보를 검색했다면 검색엔진은 <h3>로 감싸진 페이지와 <strong><span style="font-size:22px;">coding</span></strong>로 감싸진 페이지 중에 <h3>으로 감싸진 페이지를 먼저 보여줄 것이다.
<h3>은 제목을 의미하지만 <strong><span style="font-size:22px;">coding</span></strong>은 시각적인 장식(UI)이기 때문이다.
* 속성 (Attribute) -- 태그의 심화된 문법
src = Source의 줄임말
속성은 태그의 이름만으로는 정보가 부족할 때 사용된다.
속성이라는 문법이 추가되면서 태그는 보다 풍부한 표현력을 갖게 됨
* 태그 간의 관계를 나타내는 표현인 부모(parent), 자식(child)
-- 직장의 상화관계처럼 필요에 따라서 관계가 달라질 수 있다.
-- 몇몇 태그들은 부모 자식 관계처럼 고정된 관계인 태그들이 있다.
목차 = list = <li>
-- 다른 항목과 구분할 수 있도록 경계가 필요하다. 이 때 사용하는 태그가 <UI>태그 이다.
<li> 태그는 <ul>태그를 꼭 필요로 한다.
<ul> 태그 역시 <li> 태그가 없다면 존재 가치가 없다.
코딩 공부를 할 때는 항상 극단적으로 생각해야 한다.
극단적이지 않은 경우에는 코딩을 할 필요가 없기 때문이다.
<ul> : unodered list의 약자 ==> o o o
<ol> : ordered list의 약자 ==> 1, 2, 3
＊ 문서의 구조와 슈퍼스타들
문장이 모이면 페이지가 되고 페이지가 모이면 책이된다.
정보가 많아짐에 따라서 정보를 잘 정리정돈하기 위한 체계. (구조)가 필요!!
<title> 태그는 검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그이기 때문에 title 태그를 쓰지 않으면
큰 손해이다.
영어가 아닌 문자가 깨지는 이유는 웹페이지가 저장된 문자표현 방식과 웹브라우저가 웹페이지를 해석하는 방식이 일치하지 않았을 때 깨진다.
<title> / <meta charset = "utf-8"> ==> 본문을 설명하는 태그
HTML을 만든 사람들은 본문과 본문을 설명하는 정보를 각기 다른 태그로 분리해서 정리 정돈하기로 함
본문은 <body>
본문을 설명하는 태그는 <head> 태그를 사용
<body>와 <head>태그를 감사는 하나의 태그를 두기로 약속 ==> HTML 이다.
<!Document html><html> </html>
태그가 웹의 왕국이라면 <a> 태그는 이 왕국의 제왕이다.
HyperText Markup Language (HTML)
<a> : anchor의 첫글자 / 웹을 웹답게 하는 가장 중요한 기능
앵커는 배가 정박할 때 사용하는 닻을 의미한다.
정보의 바다에 정박한다는 의미의 시적인 표현인 a태그
href는 HyperText Reference의 약자
<a href = "http://www.naver.com" target="_blank">
target = "_blank"는 링크를 클릭했을 때 새창에서 페이지가 열리게 끔 하는 속성.
title은 이 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여주는 기능이다.
링크를 통해서 서로 결합되어 있는 웹페이지들의 그룹을 웹에서는 책이라고 하지 않고 웹 사이트(web site)라고 한다.
* 서버와 클라이언트
- 웹브라우저는 클라이언트 컴퓨터에서 작동 하기에 웹브라우저를 '웹 클라이언트'라고 한다.
* 웹 호스팅
'생활코딩 > WEB' 카테고리의 다른 글
| 4) WEB - Ajax(2) : 페이지 구현 (0) | 2020.07.05 |
|---|---|
| 4) WEB - Ajax(1) (0) | 2020.07.01 |
| 3) WEB - Javascript (0) | 2020.06.22 |
| 2) WEB - CSS (0) | 2020.06.16 |
