생활코딩으로 HTML과 CSS 유튜브 강의를 들었다.
지금껏 자바스크립트만 열심히 팠기에(그래봐야 3주도 안되지만 ㅋㅋㅋㅋㅋㅋ) HTML과 CSS로 웹페이지를 만들고 싶다는 갈증이 있었고, 생활코딩을 추천 받아 듣게되었다.
후기는 대만족!! 나 같은 왕초보가 수강해도 무리 없을 정도로 아주 쉽게 가르쳐주셔서 별 어려움 없이 따라갔다. 말을 엄청 천천히 하셔서 2배속으로 들어도 될 정도다. ㅎㅎㅎ 이해 안될 때만 멈추거나 잠시 속도를 낮추면 된다. 여튼 생활코딩 강추!! 선생님 감사합니다.😇
HTML? 웹페이지를 만드는 코드
웹을 만든 팀 버너스리는 웹을 어떠한 저작권도 존재하지 않는 완전한 자유를 의미하는 퍼블릭 도메인으로 선언함. 그렇기 때문에 마이크로소프트, 애플, 모질라, 네이버와 같은 회사들이 각자 브라우저를 만들 수 있는 것임. -> 우리가 만든 웹페이지를 여러 브라우저에서 똑같이 볼 수 있게 됨.
<실습환경 준비>
아톰 설치.
<디렉토리와 파일 생성>
web이라는 폴더와 1.html이라는 파일을 생성.
웹페이지의 확장자는 .html이라고 생각하자!
1.html이라는 파일을 만든다는 것은 1이라는 파일을 만드는 것이다.
맥 기준
command + o를 누르고-> 방금 만든 1을 클릭하면 웹 페이지가 생성된다!!
html 파일에 hello web이라고 적고
내가 만든 웹 페이지에서 새로고침(command + r)을 누르면 화면에도 hello world라는 글자가 뜬다 !!
<문법>
문법을 배우기 위해 hello world라는 단어를 지우고
Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.
라는 문장을 다시 적었다.
여기서 creating web pages라는 부분만 진하게 표시하고 싶다면?
태그!
creating web pages
라고 표시한다.
여기서 web이라는 단어에 밑줄도 치고 싶다면?
web
앞에 있는 태그 : 열리는 태그
뒤에 있는 태그 : 닫히는 태그
라고 한다.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
를 입력하면 제목을 입력할 수 있다.h1~h6까지 있으며, 숫자가 커질수록 제목 글자크기가 작아진다.
앞에서 적은 html에 관한 설명 문장에 제목을 붙여주었다.
HTML
<통계에 기반한 학습>
HTML 태그는 약 150개가 존재한다.
https://www.advancedwebranking.com/seo/html-study/
사이트에 들어가보면 25~26개의 태그를 가지고 있는 웹페이지가 가장 많다는 것을 알 수 있다.
<줄바꿈 : br vs p>
Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
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. 라는 긴 내용을 추가하고 싶은데 지저분해보여서 중간에 줄바꿈을 하고 싶다면?
태그 <br> 1번 : 줄바꿈
태그 <br> 2번 : 줄 바꾸고 한 줄 더 띄우기
태그 <br> 3번 : 여백이 강조된 단락 표현
혹은 매 단락에서
열리는 태그로 < p >
닫히는 태그로 < /p >를 사용해도 결과는 같다.
내가 선택한 구간이 단락이다 !!라는 것을 의미론적으로 표현해줄 수 있으려면 <p>태그가 나은 선택임.
만약 줄바꿈을 많이 하고 싶다면? <br>태그 여러번 쓰면 된다.
다만 <p> 태그 사용하더라도 CSS 사용하면 줄 간격의 크기를 원하는 만큼 정교하게 조정 가능. CSS는 HTML 끝나고 배울 것!
<html이 중요한 이유>
1. 비즈니스적 측면 : 검색엔진이 먼저 보여주는 웹
검색엔진 앞 쪽에 뜨려면 검색엔진이 선택하기 좋게 웹페이지를 만들어야 함.
ex. coding이라는 단어를 제목으로 설정하려면?
일반인이 설정한 제목
<span style="font-size:24px">
coding
</span>지식인이 설정한 제목
<h3>coding</h3>검색엔진은 태그를 근거로 정리정돈하기 때문에, coding이라는 단어를 검색한다면 후자를 선택하여 먼저 보여줄 가능성이 높다.
이미지로 글을 쓴다? 검색엔진에게는 존재하지 않는 페이지가 된다.
비즈니스를 한다면 이런 것들이 치명적인 정보가 되겠군!
2.휴머니즘적 측면 : 접근성(accessibility)
시각장애인은 시각적 정보를 청각화하여 얻게되는데,
이미지 따위로 웹을 구성하면 청각화 자료로의 변환이 어려움.
<최후의 문법 속성 & img>
사진 넣는 법을 배워보자. 사진 넣는 태그는 <img>
<img src="coding.jpg" width = "50%">
- ""안에 이미지의 주소를 적는다.
- width로 사진크기를 마음대로 조정한다.
여기서 src="coding.jpg"나 width = "50%"와 같은 것들을
속성(attribute)라고 부른다.
순서는 상관 없음.
<부모 자식과 목록>
태그가 서로 포함관계로 연결되어 있을 때 포함하는 태그를 부모태그, 포함된 태그를 자식태그라고 부른다.
물론 목차를 표시할 때 <br>태그 사용하면 줄 바꿈 가능하긴하지만,
목차라는 의미에 맞게 태그를 사용하자. 바로 <li></li>를 사용하면 된다!
⚡️단축키 팁! <br>태그를 한번에 지우고 싶다? 맥 기준 cmd 키 누르면서 여러 커서를 동시에 선택 가능!
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li><ul></ul> 태그는 왜 사용하는가? 그루핑(grouping)을 위한 부모 태그. <li> 태그는 반드시 부모태그를 갖고 있다 ! 그리고 <ul>태그는 반드시 자식태그를 가지고 있다.
<ul>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. Javascript</li>
</ul>⚡️단축키 팁! 여러줄을 한번에 들여쓰기하고 싶다? 여러줄 선택후 탭 키 누르면 된다.
그런데 만약 자동으로 넘버링해주는 부모태그를 사용하고 싶다?
<ul> 대신 <ol>을 사용하면 된다.
-ol : ordered list의 약자
-ul : Unordered list의 약자
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>자 여기까지 결과를 사진으로 보이자면
<문서의 구조와 슈퍼스타들>
WEB - html이라는 좀 더 있어보이는 웹페이지 제목으로 바꾸고 싶다면?
<title>WEB - html</title>
검색엔진은 title이라는 태그를 책으로 치면 책 표지와 같은 정보로 사용함.
한글을 넣고 싶다면? <h1>HTML이란 무엇인가?</h1> 요렇게 쓰면 될까? No.
컴퓨터는 모든 정보를 0 아니면 1로 저장하는데, 그 0과 1을 어떻게 저장할 것인지에 대한 여러가지 약속이 존재함. '이란 무엇일까' 부분은 utf-8이라는 방식으로 저장됨.
그럼 웹페이지를 열 때도 utf-8로 열라고 명령해야 함. 어떻게?
<meta charset="utf-8">
char : character를 의미
set : 규칙을 의미
"utf-8"로 문서를 읽거라 !!
여기까지 잠시만 !
<title>태그와 <meta>태그는 <head></head>로 묶어주고
나머지는 <body></body>태그로 묶어준다.
그리고 첫줄에
<!doctype html>
이라고 쓰자.
자 이제 큰 틀에서의 구조 파악은 완료!
<단어에 링크 걸기>
Hypertext Markup Language (HTML) 이라는 곳에 <a>를 이용하여 링크를 걸어보자.
<a href="https://www.w3.org/TR/2011/WD-html5-20110405/">Hypertext Markup Language (HTML)</a>
클릭했을 때 새 탭이 열리게 하고 싶다면? 주소 뒤에 target=_blank""를 넣어주면 된다.
<a href="https://www.w3.org/TR/2011/WD-html5-20110405/">Hypertext Markup
Language (HTML)</a> 툴팁(링크에 마우스를 갖다 대었을 때 원하는 단어가 밑에 스리슬쩍 뜨도록)을 띄우고 싶다면? title을 넣어주면된다.
<a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank"
title="html5 specification">Hypertext Markup
Language (HTML)</a><웹사이트 완성>
목차에서 각각의 항목을 클릭했을 때 해당 페이지가 나오도록 하려면?
html 파일 3개를 duplicate하여 아래와 같이 입력하면 된다.
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">Javascript</a></li>
WEB, 1.HTML, 2.CSS, 3.Javascript
각각 클릭 시 열릴 html파일들을 목차 제목에 맞게 수정해주면 된다.
완성 !!!👍
실습용 웹페이지 링크
file:///Users/minsun/Desktop/web/index.html
인생 첫 웹페이지 !!! 감격의 박수 !!!!
👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻
지금까지의 코드를 점검해보자.
웹페이지를 만들고 클라이언트와 서버와의 관계도 알아보았다.
