HTML5-기본 & 중요 필수지식

web에 대한 기초적 이해

컴퓨터도 이해할 수 있고 사람도 이해할 수 있는 코딩 프로그램을 “에디터”라고 한다. 에디터로는 사실 윈도우의 경우에는 메모장이라는 것이 있음! 하지만 이건 전문적 코딩을 위한 에디터가 아님. 이제부터 쓸거는 atom

기초 태그들

• 글자 굵게하기

<strong></strong>

• 밑줄치기

<u></u>

• 제목

<h1></h1>

html은 tag로 이루어진 고급언어라고 생각해도 무방할 듯 중요한 것들 알아두는게 실력차이로 이어질 듯

• 줄바꿈 (이거 독립적으로 씀)

<br/>

• 단락나눔 -> 시각적으로 부족한 부분은 css로 보충

<p style="margin-top:40px;"></p> 

여기서 style 또한 속성이다. 웹을 짤 때 중요한 이슈 → 검색엔진에 잘 걸리도록 내용에 충실 ex) h1제목태그 이용하기 다 오픈되어있는 프로그램이기때문에 공공성, 비즈니스측면에서 중요함. 태그가 태그의 이름만으로는 정보가 부족할 때 속성(attribute)이라는 걸 사용하는데 이건

• img 태그만으로는 정보가 부족하므로

  <img src=”dd.jpg” width=”450px”>
  

  와 같이 속성을 부여해주는 거

태그와 속성

여러 tag들이 있듯이 속성에도 여러 종류가 있는데 위에 보았던 style이라는 속성의 속성값은 반드시 css로 와야한다. 뒤에 나올 onclick이라는 속성은 속성값으로 뒤에 반드시 javascript로 와야한다. 이러한 규칙들이 존재

부모자식 태그

• 목차를 만들 때 쓰는 코드

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

이런 식으로 ul과 li는 부모, 자식 태그임. 서로가 서로를 필수로 하는 태그이다. 위의 방식에서 li 태그 안에 있는 내용에 번호를 붙여 순서화하고 싶을 때에는 ul → ol (자동으로 순서 넘버링)

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

이런 식으로 ol → ordered list ul → unordered list

슈퍼스타 태그들

<table></table>

→ 웹페이지의 제목을 설정해 주는 태그 - 검색엔진 등 매우 중요

<meta charset="utf-8">

→ 웹페이지야 이 코드를 브라우저에서 열 때 utf-8로 열어줘 위의 두 개는 head태그로 감싸져야하는 부분이고 나머지 li h1 ol 같은 본문 내용들은 body태그로 감싸져야 하는 부분이다. 모든 태그들은 head나 body태그 안에 존재하여야한다. (고위직 태그) html태그는 최고위직 태그로 head와 body를 전부 감싸는 최종보스 태그

태그의 제왕

<a></a> 

→ 태그 왕국의 황제역할, 링크를 도와줌, anchor의 닻이라는 단어에서 유래 가고싶은 링크에 닻을 내려주는 의미.

• 근데 a 하나로는 정보가 부족하므로 속성인 href를 사용

<li><a href="rv_아이린.html">아이린</a></li>

근데 이렇게 실행하면 보던 페이지가 링크페이지로 바뀌므로 새로운 창에다가 링크페이지를 띄우려면

• target=”_blank” 를 사용하면됨.

거기에 마우스를 갖다 대었을 때 이 페이지가 어떤 제목을 갖고 있는지 알려주고 싶으면

• 속성 title을 사용한다. title=”아이린정보”

  동영상넣기

• iframe태그 사용하기

    <iframe width="450" height="315" src="https://www.youtube.com/embed/JUJ3Pq74H4c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  

인터넷 : 서버와 클라이언트

서버 : 웹사이트의 코딩내용 정보를 제공하는 애 클라이언트 : 고객이라는 뜻으로 웹사이트의 코딩내용 정보를 원하고 받고자하는 애, 정보요청하는 애

우리가 자주 사용하는 건 웹브라우저(인터넷, 크롬, 웨일 등등 친숙함) 이제 우리의 관심사는 웹서버가 되어야함. 우리 컴퓨터에 있는 문서를 전세계에 있는 인터넷이 연결되어있는 웹브라우저에 깔면 가져다가 볼 수 있는 일을 해야함(2가지 방법)

1. 자신의 컴퓨터에 웹서버를 직접 깔아서 하는 것 (웹서버 구축)
2. 이 일을 업체에게 대행 (웹서버 호스팅)

2번은 굉장히 쉽지만 인터넷 동작원리 서버 동작원리에 대한 개념을 모르게되며 돈이 듬 but 1번은 공부해야할 게 많지만 돈이 안듬

웹호스팅

github을 이용한 웹호스팅이 가능하다.

다른 웹호스팅을 쓰고 싶을 때 free static web hosting을 검색해서 쓰기.

웹서버 운영하기

how to install apache http server window → 이거 검색해서 서버깔아보기 apache로 서버 깔거임.

이런 식으로 한 대의 컴퓨터에 브라우저와 서버가 동시에 존재하면 북치고 장구치고 다 함.

내 컴퓨터에 서버가 있으면 통신이 가능해짐 → 127.0.0.1 여기서 127.0.0.1은 모든 전세계의 컴퓨터가 자기자신을 127.0.0.1을 지칭하기로 약속한거 그러나 서버없이 그저 컴퓨터에 있는 파일을 여는건 통신이 안됨. 오직 파일 열기수준

이런식으로 웹브라우저가 웹서버에 요청을 할때는 웹서버의 주소 즉 IP주소가 필요함. 그럼 그 IP주소를 알게되면 웹브라우저가 서버에게 요청할 수가 있게됨. 암튼 127.0.0.1이든 192.168.219.105든 아파치서버가 running해야만 웹이 열림.