1. 첫 걸음
브라우저에서 단축키 ctrl o = 파일열기
단축키 ctrl s = 저장, 꼭 해주어야 함!!! 습관들일 것!!!
아톰 프로그램 오른쪽에서 쓰는 건 html이라는 언어의 문법에 맞게 작성된 소스나 코드라고 함
그럼 그 결과인 웹페이지가 나타남
웹페이지를 만드려면 꼭 .html 붙이기
2. 기초 문법
웹을 지배하는 가장 중요한 문법 = 태그, 앞에 있는 태그는 열리는 태그 <>, 뒤는 닫히는 태그 </>, 앞뒤 구분 위하여 닫히는 태그에는 / 붙임
진하게 강조 = <strong>블라블라</strong>
밑줄(underline) = <u>블라블라</u>
3. 줄바꿈
줄바꿈 = <br> 한번 쓸때마다 다음 줄로, 닫히는 태그 없음
BUT, html이 지정 해놓은 단락 나누기 태그 = <p>블라블라</p>
p는 정보로서 좀 더 가치있는 태그이기 때문에 좋음
br은 자유롭게 줄바꿈 양을 조절할 수 있지만 p는 정해진 양이 있어 자유도 떨어짐
*여기서 css를 사용하면 원하는 픽셀만큼 단락을 떨어뜨릴 수 있음
*의미에 맞는 태그를 사용하는 것이 더 좋은 방법
4. 중요 팁!
블로그나 카페에 글을 쓸 때 일반인은 따로 굵기, 밑줄 등 따로 기능을 쓰지만 전문인은 타이틀, 즉 제목으로 된 기능을 씀 그래서 검색엔진에서 어떤 정보를 찾을 때 그 정보가 제목으로 된 글이 가장 먼저 오고 일반인이 쓴 글은 몇 페이지 뒤에 있어 실질적으로는 존재하지 않는 글이 됨 따라서 태그를 정확히 알고 의미에 맞게 사용하는 게 중요!
5. 사진 넣기
속성 attribute = 태그의 심화된 문법으로 위치는 상관 없음 태그의 이름만으로 정보가 부족할 때 속성을 통해 더 많은 의미를 부과할 수 있음
사진 넣는 태그 = <img>
소스 source-src
unsplash 무료 이미지 사이트
크기 = width
예: <img src="coding.jpg" width="100%">
6. 부모자식 태그
태그가 포함관계로 연관되어 있을 때 포함하고 있는 태그를 부모태그, 포함된 태그를 자식태그라고 함
목차, 목록 list = <li>블라블라</li>
TIP! 컨트롤키 누르고 원하는 곳에 커서를 놓고 클릭하고 입력하면 똑같이 입력됨
li 태그의 부모는 ul
탭키 = 들여쓰기
li 같은 항목들은 어디서 어디까지가 서로 연관된 항목인지를 경계, 그룹핑을 하기 위한 부모 태그, 즉 ul 태그가 있음
많은 양의 정보를 넘버링 하고 있는데 하나를 지우고 싶다면 ul(unordered list)이라는 부모태그를 ol(ordered list)이라는 태그로 수정하면 자동으로 넘버링됨
번외로 더 복잡한 표 = table 은 삼대가 같이 다님
예: ul은 목록 앞에 ●삽입, ol은 1, 2, 3, 4··· 삽입
<ul>
<li>아메리카노</li>
<li>카페라떼</li>
<li>핫초코</li>
<li>차</li>
</ul>
7. 대빵 태그
문법을 완성했다=문장을 완성했다, 하지만 문장이 모이면 페이지, 페이지가 모이면 책이 됨, 정보가 많아짐에 따라 잘 정리 정돈하기 위한 체계나 구조가 필요함
웹페이지의 제목, 책 표지 = <title>블라블라</title> 검색엔진같은 기계들은 title 이라는 태그를 책 표지와 같은 정보로 사용, 따라서 안 쓰면 굉장한 손해가 됨
컴퓨터는 모든 정보를 0 아니면 1로 최종적으로 저장함 근데 그 0과 1을 어떻게 저장할 것인지에 대한 여러가지 약속들이 존재하는데 그 약속 중 하나가 아톰으로 작성한 파일 하단의 utf-8이라는 방식으로 저장된 상태, 따라서 웹브라우저에서도 utf-8로 열려야 함
<meta charset="utf-8"> 여기서 char는 캐릭터 set은 규칙이라는 뜻, 브라우저에게 utf-8로 문서를 읽어라 라고 얘기해준 것
하지만 html을 만들 때 본문은 body라는 태그로 묶기로 약속함 또 본문 body를 설명하는 태그는 head 태그로 묶기로 약속함
즉 html의 모든 태그는 head 태그, body 태그 둘 중 하나 아래에 놓이게 됨 따라서 고위직 태그라고 할 수 있는데 이 태그들을 감싸는 단 하나의 최고위층 태그가 있는데 그것이 html 태그 그리고 관용적으로 이 문서는 html 이다 라는 뜻에서 !doctype html 이라고 써주면 됨
예:
<!doctype html>
<html>
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
</head>
<body>블라블라
블라블라
</body>
</html>
8. link 걸기
<a> = anchor 의 약자, 링크 걸기
링크의 속성을 걸어야 할 때, h는 hypertext 참조는 reference 따라서 href <a href="링크 주소">
링크를 새탭에 열도록 하고 싶을 땐, 주소 뒤에 target="_blank"
링크를 열기 전 커서를 링크 위에 대면 해당 정보가 뜨게 하고 싶을 땐 (tool tip), title="html5 speicfication"' (speicfication, 설명서 사양)
예:
<a href="https://www.w3.org/TR/html4/" target="_blank" title="html5 speicfication">Hypertect Markup Language (HTML)</a>
9. 세부 정보 연결
웹페이지에 어떤 정보를 클릭하면 그에 관한 세부 정보가 나오도록 하는 방법
duplicate = 복제
단어에 링크를 건 후 만들었던 웹사이트를 복제해 제목 수정, 복제한 각각의 파일에 맞는 내용도 수정하면 세부정보가 나오도록 할 수 있음
예: html 을 클릭하면 1.html 사이트로 이동, html에 관한 정보를 나열해줌 이하동문
<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>
10. 웹서버
웹 (브라우저)클라이언트 즉, 고객이 어떠한 정보를 request 요청하면 웹 서버 즉, 서비스를 제공하는 자는 response 응답함 이것을 게임에 대입하면 게임 사용자를 게임 클라이언트, 게임을 만든 사람은 게임 서버라고도 할 수 있음
이 일을 하는 데는 두가지 방법이 있음 한가지는 자신의 컴퓨터에 직접 깔아서 하는 방법(웹서버), 한가지는 대행 업체에게 맡기는 방법(웹호스팅)
자신의 컴퓨터에 직접 깔아서 하는 방법은 어렵지만 그 과정에서 여러가지 개념을 배울 수 있고 업체에게 맡기는 방법은 쉽지만 배울 것은 적음 따라서 웹호스팅으로 쉽게 입문하고 웹서버를 통해 원리 파악 추천
11. 웹서버2
웹서버를 만들기 위해선 많은 어려움이 따름 그래서 대행해주는 업체가 있는데 여기서 인터넷에 연결된 여러 컴퓨터들을 호스트라고 하고 이런 컴퓨터를 빌려주는 사업을 호스팅(클라우드)이라고 함
호스팅 중에서 컴퓨터에 웹서버와 같이 웹을 동작하기 위해서 필요한 소프트웨어까지 설치해서 빌려주는 비즈니스를 웹호스팅이라고 부름 그 중 가장 유명한 것은 Github
12. 웹서버 만들기 : 어렵지만 인터넷이 작동하는 원리를 알 수 있음
웹브라우저와 웹서버는 둘 다 제품군에 해당
웹호스팅 프로그램에는 apache, iis, nginx 등이 있는데 가장 쉬운 크롬의 확장기능인 'web server for chrome' 사용
요청이 들어왔을 때 어느 디렉토리(폴더)에서 찾을 것인가를 웹서버에게 알려줘야 함
http://127.0.0.1:8887/index.html
http = hyper text transfer protocol의 약자로 hyper text = 웹페이지, transfer = 전송한다, protocol = 통신규칙이라는 뜻임 따라서 웹페이지를 전송하기 위해 고안된 통신규칙이라는 뜻
127.0.0.1 = internet protocol address 소위 ip adress(ip주소) 라고 불림 컴퓨터와 컴퓨터가 서로 통신을 할때 사용하는 주소체계임 저 숫자의 뜻은 같은 컴퓨터 자신을 가리킴 따라서 웹브라우저는 같은 컴퓨터에 접속하고 있는 것
8887은 port
13. Bitnami Window WAMP
설치할 때 비밀번호는 isql 이라는 데이터베이스를 깔 때 필요한 것으로 꼭 기억해두기!
비트나미 꺼졌을 때 다시 키는 방법은 C:\Bitnami\wampstack-8.1.5-0 들어가서 'manager-windows' 파일 실행
이 프로그램 이용하면 웹서버를 켜고 끄고 할 수 있음
'go to application' 하면 웹페이지가 하나 뜨는데 프로그램의 manage servers에 들어가서 'apache web server'에 초록색이면 아파치(웹페이지)가 켜져있다는 뜻, stop 누르면 꺼짐(웹페이지가 뜨지 않음)
14. http://127.0.0.1/index.html
이 주소는 첫 비트나미 실행 첫 웹페이지인 localhost 와 동일
127.0.0.1 = ip주소로 웹브라우저가 설치되어 있는 컴퓨터를 가르키는 아주 특수한 주소, 즉 컴퓨터 본인의 주소로 약속되어 있는 주소임 전세계의 모든 컴퓨터가 웹브라우저에 저 숫자를 치는 것은 웹브라우저가 설치되어 있는 각자의 컴퓨터의 웹서버를 가르킴
index.html = 웹브라우저가 자신의 컴퓨터에 설치되어 있는 웹서버에 접속해서 index.html 파일을 원한다고 얘기를 하는 것으로 웹서버는 htdocs 라는 디렉토리에서 파일을 찾도록 설정이 기본적으로 되어 있음(설정은 바꿀 수 있음) 웹서버는 설정이 되어 있는대로 htdocs 라는 디렉토리에서 index.html 이라는 파일을 읽어서 그 파일을 웹브라우저에게 전송해주면 웹브라우저는 그것을 해석해서 화면을 표시해주게 됨
웹페이지를 C:\Bitnami\wampstack-8.1.5-0\apache2\htdocs 이 파일 경로를 통해 연 것과 프로그램을 통해 연 것은 차이가 있음 http:// 로 시작하는 것은 웹서버와 웹브라우저가 서로 통신할 때 사용하는 통신규약인 hyper text transfer protocol 을 이용해서 데이터를 가져오는 것이고 file:// 은 웹서버를 통하지 않고 컴퓨터에 있는 파일을 웹브라우저에 띄워 주는 것임 따라서 서로 다른 컴퓨터가 통신할 때는 http를 꼭 이용해야함
15. 자신의 IP주소 알아보기
본인이 사용하는 컴퓨터의 ip주소를 알고 싶으면 하단의 와이파이나 네트워크 아이콘을 오른쪽 클릭해 설정 열기로 들어간 후 해당 네트워크나 와이파이 속성에 들어가 ipv4를 보면 됨
컴퓨터와 서버 컴퓨터를 연결하기 위해서는 같은 네트워크에 접속해야함 근데 난 왜 안되는거지..?
16. 오류 체크
<input type="checkbox"> 라는 체크박스를 만들었을 때 테스트 해야 하는 횟수는 두번=체크한 것과 안한 것, 두개 만들었을 때는 6번, 세개 만들었을 때는 8번임 그럼 50개 만들었을 때는 수학적으로는 2의 50승을 하면 답이 나옴 총 1000조 개의 경우의 수가 있음
하지만 세상엔 더 많은 복잡하고 많은 체크 박스가 있음 따라서 작은 거 하나도 오류가 생길 수 있음 따라서 실습 중요 이제부터 실습 궈궈~!~!~!
'공부 기록' 카테고리의 다른 글
| [코딩앙마] React JS 필기 (0) | 2022.06.22 |
|---|---|
| [Do it! HTML5+CSS3 웹 표준의 정석] 연습문제 풀어보기 (0) | 2022.05.07 |