HTML
JSP/Servlet으로 넘어가기전 기본만 알기 위해 생활코딩 유투브로 진행하였다.
1. html만들기
new file 웹페이지의 확장자 html
1.html 1이라는 윂페이지 만듬
웹페이지를 연다.
웹브라우저로 컨트롤 + o 눌러서 내파일을 찾으면 내가만든 웹파일이 열린다.
창에 hello web입력하면 웹에도뜸
목표
텍스트를 적으면 그대로 들어감
2. 태그
웹을 지배하는 문법
=태그이다. TAG
<strong> 강조할것 </strong>이러면 강조됨
underline <u>밑줄할거</u> 밑줄걸림
열리는태그<> - 닫히는태그</> /로 비교함
공부할때 어려운 용어가 나오면 우리 일상과 관계있는 용어일 가능성이 높다. 논리적인 것을 기반으로해서 컴퓨터로 만드는것을 설명해주려면 쉽게해줘야되서 은유했을뿐이다. 중요한것은 어렵고 쉬운것은 사소하다
시험의 목적은 누가얼마나 열심히 공부했나임. 꼭 그런것은 아니다.
프로그래밍에선 처음 배우는 것은 너무나 쉽지만 제일 중요하다.
태그는 매우 많은 것을 배운것이다.
w3.org 홈페이지의 페이지소스를 보자 w3c는 웹을 만드는 국제 기구이다.
<h1>WC3</h1> 사이트이름을 가지고있는 h1기능이 뭔지모르지만
태그라는 것은 아는 상태임.
배우기전엔 무엇을 모르는지 몰랐지만 이젠 무엇을 모르는지 아는 상태가 되었다.
검색 질문 가능하다. 태그에 대해 공부할 수 있게 되었다.
스스로 무엇인지를 고민해보자
정의를 읽는 것 보다 검색해서 예제를 가져와서 무엇인지 추론을 할 수 있다.
이후에 정의 읽기
The <h1> to <h6> tags are used to define HTML headings.
제목이다라는 것을 알수잇다.
과거에는 배우려면 많은 것을 해야했는데 오늘날은 검색이 가능해서 기초적인 모습만알면 검색가능하다.
3. 통계에 기반한 학습
html은 150개이상의 태그가 존재하는데 모든 것을 외우고 있을 필요는 없다.
그러나 기본적인 밑천이 필요하다.
www.advancedwebranking.com/html
전세계 태그 통계인데 지금은 돈내야함.
frequency of
꼭 뒤에있는 것이 중요한것은 아니다. 앞에있는 것이 창조성의 원천이다.
통계기반으로 해서 공부하는 것이 좋다.
4.인기있는 태그
코드에서 줄바꿈을 하더라도 웹페이지에서는 반영되지 않는다.
html new line tag 새로운 라인태그 줄바꿈태그
<br> 하나쓰면 한칸뛰고 여러개 넣으면 여러 칸띄어서 단락임을 구분할 수 있지만
완벽한 단락은 아니다.
그럼 단락은? 뭘가 html paragraph tag
<p> </p>닫기필요
<br>은 줄바꿈일뿐이고 <p>가 의미적으로 단락임을 알려줄수 있기때문에 정보로써 더 가치가 있다.
<p>은 원하는 만큼 띄어쓰기가 불가능해서 시각적 자유도가 낮아진다.
하지만 여기서 css를 사용하면 된다. <p style="margin-top:40px">여백과 여백에 40픽셀이 떨어짐
html태그에 css를 통해서 더 정교하게 제어할 수 있다.
5.html이 중요한 이유
글을쓰는것은 내부적으로 html을 만들어내는 행위를 하고 있는 것이다. 우리는 모르는새에 html을 만들고있었다.
일반인 <span style="font-size:24px"> coding </span>
지식인 <h3>coding</h3>
검색엔진은 어떤 내용을 가지고 있는지 이 태그를 근거로해서 검색이 된다.
제목이 코딩인 사이트와 시각적으로만 제목이 코딩인 사이트를 검색하면 제목이 코딩인 사이트가 더 잘나오게 된다.
정보를 탄탄히하는 것이 중요하다.
이미지로 작성하면 이것은 검색엔진에겐 존재하지 않는 것이된다.
따라서 비지니스적인 측면에서 중요한 것이다.
웹은 모든 운영체제에서 적용된다. 이런 개방성 접근성 accessibility
6.속성
속성은 태그의 심화된 문법이다.
<img>이미지 태그썻는데 이미지 안넣으면 안보임 태그의 이름만으로는 정보가 부족하다.
어떤이미지인지를 넣으려면 <img src="링크"> 소스에 링크를 넣으면된다.
<img src="coding.jpg" width=50%>
attribute 속성 위치 상관없음. 태그가 태그의 이름만으론 정보가 부족할때 사용하는 것이다.
사진의 위치와 사진의 크기를 넣은 것이다.
7.부모자식과 목록
<parent>
<child></child>
</parent>
태그들이 부모자식관계가 항상 바뀌지만 그냥 고정되어있는 것도 있다.
목차 넣기 목록 list <li> 목록태그 <ul>어디까지가 목록인지 그루핑을 하기 위한 부모태그이다.
얘들은 항상 붙어있다.
만약 이 목록이 1억개면 중간에 하나를 바꾸면 1. 2. 3.을 다시 붙여줘야한다 이것은 거의 불가능하다.
<ol>을 부모 태그로 넣으면 알아서 목차가 부여가된다.
얘들은 ordered list / unorderd list이다.
8. 문서의 구조와 슈퍼스타들
문장을 만드는 방법을 배웟다. 이번엔 그 구조를 만드는 방법을 배우자.
내용을 잘표현하는게 제목인데 우리는 파일명이 제목이다. 이것을 해결하는 방법?
<title>WEB1 - html<title>
웹페이지 이름이 바뀌고 책 표지로써 사용해서 검색할 수 있게 됨
<h1>HTML이란 무엇인가?</h1> 글씨깨짐
정보를 글씨로 작성한다고 그대로 작성되는게 아니라 0,1로 바뀌어서 저장된다.
파일을 UTF-8로 저장했는데 웹브라우저도 이것을 UTF-8로 열어라 할때
<meta charset="utf-8">
이 코드들은 본문을 설명하는 코드이다. 타이틀=본문의 제목 meta 본문이 utf-8로 저장되어있다.
이 제목부분을 <head></head> 본문을 <body></body>에 넣기로 약속되어있다.
그리고 이것들을 모두 <html></html>으로 담아야하고 <!doctype html>로 html로 작성했다는 것을 알려준다.
자주사용하는 태그 슈퍼스타들로 전세계 웹페이지의 구조를 알게 된 것이다.
9. 태그의 제왕
태그를 결합하는 방법을 배웠고 빈도수가 절대적으로 높은 태그를 배웠다.
태그가 웹의 왕국이라면 150여개의 태그라면 이태그의 제왕이 무엇인가? 이태그 아래에 모든게 있다.
이태그 덕분에 우리가 검색을 할 수 있다. 이 태그는 무엇인가? 이 태그는 도시의 길과 혈관같은 것이다.
매일 100번도 넘게 사용하는 태그이다.
html의 약자 HyperText Markup Language의 HyperText이다.
정답은 <a> 바로 이것은 '링크'이다.
https://www.w3.org/TR/2011/WD-html5-20110405/ -> html사용법
w3c는 미래의 웹브라우저를 의논하고 웹브라우저제작업체들이 recommendation을보고 참고하도록한다.
<a href = "https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html5 specification">
주소, 누르면 새탭이 나오게, 마우스를 갓다대면 툴팁이 나오게 만들 수 있다.
10.웹사이트 완성
웹페이지를 링크라는 길로 연결하는 방법을 배웠다. 링크는 본드 또는 실이다. 서로 연관된 페이지들을 엮는 것이다.
이것이 웹사이트이다. 웹들을 엮은 것이다.
내가만든 웹페이지들을 엮어서 웹사이트를 만들어보자.
파일들을 만들어서 각각 링크를 넣어준다.
윂페이지들을 모아서 만드것이 바로 '웹사이트'이다
11.원시웹
이 수업은 2개의 산
1.웹페이지를 만들기
2.내가만든웹페이지를 누구나 가져갈 수 있게 하기
웹의 역사
Internet vs WEB 다른가? 다르다.
인터넷=도시 웹 = 건물하나 인터넷=운영체재라면 웹은 응용프로그램하나이다.
사진참조
1960 인터넷등장
당시 통신시스템 중앙집중적이엇는데 핵맞으면 통신시스템이 죽음 이 것을 위해 인터넷이 만들어짐
인터넷은 중앙이없고 각 통신장치들이 분산해서 전화국과 같은 역할이라 하나가 없어져도 나머지들이 통신시스템 역할을 할 수 있다.
이 인터넷은 점점 발전했지만 거대한 기관에서만 사용할 수 있었다. 웹이 등장하며 새로운길을 걷게된다.
1990 웹등장
웹은 스위스에서 시작되었다. 스위스에는 CERN이라는 유럽입자물리연구사라는 물리학 연구소가 있다.
이 물리학연구소에는 강입자 가속기라는 장치가 있다. 여기에 매우 많은 엔지니어들이 몰려있다.
1980년 팀 버너스 비정규직 프로그래머 입자물리연구소에서 Enquire라는 프로그램을 만듬 백과사전같은 프로그램
10년동안 웹의 전신이 되는 것을 만듬 1990년에 연구소에 인터넷이 들어오면서 여기에 결합하게됨
1990 10 윂이지 1990 11 최초의 웹브라우저 www이 만들어짐 1990.12 웹서버 info.cern.ch가 만들어짐
사진참조
이때부터 대중화의 길을 걷게됨 인터넷을 잘 사용할 수 있는 프로그램인 웹이 생기게 된것이다.
이제 나는 웹브라우저에서 보여주는 전자문서를 만들 수 있게 되었다. 마지 자신의 컴퓨터에 파일처럼 볼 수 있게 만들어줘야한다.
그러기 위해선 인터넷이 무엇인지 알아야한다.
12.인터넷을 여는 열쇠 : 서버와 클라이언트
인터넷동작을 위해서는 최소 2대가 필요하다. 서로 정보를 주고받는 순간 인터넷이 된다
팀버너스는 컴퓨터 2대를 준비했다.
1.웹브라우저 --인터넷-- 2.웹서버 info.cern.ch index.html이라는 파일이 저장되어있다.
웹브라우저에서 info.cern.ch/index.html를 입력하면 인터넷을 통해서 웹서버에 신호를 보낸다.
웹서버에서 하드디스크에서 index.html를 꺼내서 신호로 보내준다.
웹브라우저를 가진 컴퓨터에서 index.html파일이 도착해서 이정보를 해석하고 화면에 표시하면 웹사이트, 웹이 동작하게 되는 것이다.
웹브라우저 request -> webserver
client <- response server
라고 부르기로 정했다.
웹브라우저는 물질이아닌 논리적인 시스템임 추상적인 대상인데 매일 같이 사용한다. 마치 물질인것처럼 느끼게된다
웹서버도 프로그램인데 낯설기 때문에 잘 이해되지 않는 것일뿐이다. 이해보다는 계속 생각하다보면 웹서버에 익숙해질 수 있다.
웹서버를 알게된다는 것은 내컴퓨터의 것을 전세계에서 볼 수 있게 된다.
1.내컴퓨터에 웹서버를 만들기 2.대행하는 업체에 맡기기
직접설치는 어렵지만 많은 것을 배울 수있다.
웹호스팅 대행에 맡기면 인터넷이라는 동작을 배우기 힘들다.
그럼 어떻게 하는지 좋은지? 웹호스팅으로 해보고 웹서버로 원리를 파악하는게 좋다.
13.웹 호스팅 github page
직접 웹서버를 하는 것은 컴퓨터를 평생켜놔야한다. 인터넷을 통해서 전달할 수 있도록 만들어야한다.
무료인 github를 사용할것인데 알고있다가 다른데서 비슷한 서비스를 이용할 수 있다.
create repository
uploading an existing file
파일내용볼수있고 소스코드를 다른사람과 토론할수 있다.
설정 -pages
Source Branch - main
액션 -bulid를 보면 뭐가 일어나고있느지 알수있음. -deploy
https://chunpinge.github.io/my-first-web-site/
내가만든 사이트를 들어갈 수 있게 되었음.
저장소 홈 - 애드파일 upload files
새로올리면 다음 버전이 갱신이됨
내컴퓨터에 웹파일이 잇음
방문객들(웹브라우저) 방문하고싶음
호스팅업체(웹서버에 내 파일을 활성화해줌) 도메인을 주면 내 파일을 클라이언트들이 볼수 있게됨
원리가 궁금하다면? 웹서버를 직접 운용하는 것을 배워야함.
14. 웹서버 운영하기
인터넷동작하는 방식을 알수있지만 어려움 잘안될 가능성이 높다.
웹브라우저는 제품군인데 웹서버도 제품군이다.
WEB SERVER FOR CROME 크롬의 확장프로그램이다.
매우매우 간단한 웹서버
열 파일폴더 주소를 만들어주면
IP주소:포트번호의 간단한 웹서버가 만들어진다.
Accessible on local network키면 내 인터넷끼리 볼수있게 만들 수 있다.
15. 수업을 마치며
<input type="checkbox">
체크박스 생김 이것으로 어떠한 앱을 만들엇을때 테스트 체크를 안한상태 체크 한상태에서 테스트 총2번
두개면 4번 3개면 총 8번
만약 50개라면 2^50번이다. 경우의수가 천조
만약 눈에보이지 않는 천조가지 경우의수가 잇을때? 작은 기능을 추가할때 슬럼프에 빠지게됨. 원인이 보이지 않기때문에
자연스럽게 복잡해지는데 안된다고 포기하지 말자.
문법이 조금만 복잡해져도 많은 의미를 쏟아낼수있다. 더 복잡함 문법들을 배우다보면 복잡해짐
덜편리 덜생산적이 일뿐 그런데 여기서 진도를 멈추고 배운것을 이용해서 만든것을 만들어보면? 중요하다면 불만족이 생김
더 생상적으로 만들고 싶어짐.
지금가지 web1배움
이제 web2
웹사이트 아름답게 CSS만들어야함. -웹디자이너
상호작용하는 웹페이지 Javascript공부-프론트
1개를 바꾸면 전체가 다바뀜 jsp php node.js등 -백엔드
16. 실제 사이트
https://chunpinge.github.io/my-first-web-site/
깃헙을 이용해서 배포를 했다. 사실 뭐 있지도 않지만 뭔가 생겼으니 멋있다.
<!doctype html>
<html>
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
</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><a href = "https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html5 specification">
Hyper Text Markup Language (HTML)</a> is the standard markup
language for <strong>creating <u>web</u> pages</strong> and web applications.
Web browsers receive HTML documents from a web server or from local storage and
render them into multimedia web pages.
HTML decribes the structure of a Web
page semantically and origiinally
included cues for the appearance of
document.</p>
<img src="coding.jpg" width=50%>
<p style="margin-top:40px">HTML elements are the building blocks of
HTML pages. With HTML constructs, images
and other objects, such as interactive
forms, may be embedded into the rendered
page. It provides a means to create
structured documents by denoting
structural semantics for text such as
headings, paragraphs, lists, links,
quotes and other items, HTML elements
are delineated by tags, written using
angle brackets.</p>
</body>
</html>2022.12.16 후기
JSP와 Servlet으로 넘어가기 위해서 기본적인 html과 css를 생활코딩으로 찍먹하기로 했다.
말이 많은 생활코딩을 드디어 들어봤다.
이해가 매우 쉽고 잘 설명을 해주셔서 이해는 쉽다.
하지만 매우 간단하고 개념적인 부분만 배우기때문에 그런 점도 있다.
그래도 눈으로 보이는 웹 구현이니 뭔가 트이는 느낌이다.
더욱 더 발전하고 싶다.
중요한 것은 꺾이지 않는 마음.
'기초단계 > HTML&CSS' 카테고리의 다른 글
| 2023.01.30 CSS (1) | 2023.01.30 |
|---|---|
| 2023.01.29-2 CSS (1) | 2023.01.29 |
| 2023.01.29-1 HTML (0) | 2023.01.29 |
| 2023.01.28 HTML (1) | 2023.01.28 |
| 2022.12.27 CSS 기본 (0) | 2022.12.27 |