2023.01.26-2 1일차 HTML

HTML

1. html 기본

https://www.w3schools.com/ 프론트배우면서 자주 들어와서볼것임.
최신내용 반영 잘안하는데 초보자가 보기에는 좋음.
HTML Headings
이런거보면 어떤 내용이고 어떻게 사용하고 어떻게 하는지
각제목의 설명실습 소제목 설명실습 패턴임. try it yourself 해서 실습도 해볼 수잇음.
좌 코드 우 어떻게 작동하는지 보여줌.
프로그래밍언어 배울때 가장 큰 게 영어임 질좋은게 영어 참고자료임. 영어공부 병행하면좋다.
HTML이 무엇인가?
1.Hyper Text Markup Language
2.웹페이지를 만드는데 사용하는표준 마크업 언어이다.
3.웹페이지 구조를 설명한다.
4.elements로 구성되어잇다.
5.elements는 브라우저에 컨텐츠를 어떻게 표시하는지를 알려준다.
6.label은 어떤 내용인지에 대한 조각이다.

브라우저마다 html을 보여주는게 조금씩 다르다.
코드는 텍스트의 나열임. 텍스트 편집기가 잇으면된다.

    <h1>hello world</h1>

첫번째 만든 html코드임.

win + e 탐색기나옴.
<a href ="#">go to </a> 하이퍼링크태그
잘작성해야 브라우저가 우리의 의도를 알고 보여준다. 작성한 코드기 3줄밖에 안되지만 앞으로 매우 많은 줄수가 잇을것임.
페이지 소스보기하면 어떤 소스가 작성되엇는지 볼 수잇다.
w3schools 간단한 사이트이지만 1500줄이넘음 몇백줄이넘음 그런데 실수를 중간에 할수가잇음. 사소한실수로 코드가 제대로 작성되지않을수잇음
| 1 I 등구분못하면. 프로그램은 오타에 민감하다. 프로그래밍용 폰트가 필요하다?? d2coding코딩 폰트 사용하자.
오타낼 확률을 줄여준다는데 사실 오타는 구분 못해서 내는게 아니라 걍 내는거임. 코드작성할때 주의좀 하자.

메모장으로만 작성을 할수는잇지만 매우 귀찮다. vscode로 작성해보자.

file - preference - setting
font familily에 폰트크기 설정
font size설정
html작성할때 <>가 자주 사용된다.
h2이런식으로 태그작성하고 탭키를 누르면 알아서 꺽쇠가 붙어진다.
끌어다 놓거나 파일가서 더블클릭으로 보면된다.

<h1>hello world</h1>
<h2>hello html</h2>
<a href="#">go to</a>
<h3>vscode에서 작성한 파일</h3>
<h4></h4>
<p>동해물과 백두산이 마르고 닳도록</p>

<h1> 이런애들 뭐하는 애들인가? elements이다. 얘들이 모여서 html코드가 된다.
HTML Elements란
<tagname>Content goes here...</tagname> 3부분이 모여서 elements이다.
가운데 내용만 출력이된다. 이것이 element content 임. 앞뒤가 start tag / end tag임

시작태그 종결태그없어도 그대로 보여주긴함.
그래도 제목이다 문장이다 라는 것을 라벨하는 것이다.이 라벨링이 마크업이다.
= 표준 마크업 언어
w3schools은 각 태그에 대한 설명을 하고 있는 것이다. 어떤 elements가 잇는지 소개해준다.
주의할점은 시작태그와 종결태그로 이루어진다. 통채로 태그라고 하는 경우도잇다. html을 배우는것은 어떤 element가잇는지 배우는 과정이다.

2. HTML Headings 제목 태그

제목은 총6개

<h1>가장 큰 제목</h1>
<h2>두번째 큰 제목</h2>
<h3>세번째 큰 제목</h3>
<h4>네번째 큰 제목</h4>
<h5>다섯번째</h5>
<h6>가장 작은 제목</h6>

3. HTML Paragraphs

<p>동해물과 백두산이</p>
<p>오늘은 눈이 와요</p>

VSCode팁
필요없는 글씨를 쓰는 일이 종종 있다. 강의의 핵심이 아닌 경우 쓸데없는 텍스트
Lorem(단어수) Lorem5
탭키 하면자동으로 쓸데없는 문장 알아서 만들어줌. 몇개 단어로 만들어진 것을 임의로 만들어줌.
p>lorem3하면 앞뒤 태그에 내용까지 하나로 만들어줌.
p*숫자 하면 여러개 태그 한번에 만들어줌.

<p></p>
<p></p>
<p></p>

p*숫자>Lorem하면 문장알아서 만들어줌.

4. comment

코드를 지우긴 애매하고 화면엔 안보여주고 싶다면 ctrl + / 주석달기

주석으로 처리된것은 브라우저가 해석하지 않아서 보여주지는 않지만 코드는 보인다.
그래서 민감한 정보는 작성하면 안됨.
1.코드 실행 안되게 하는 효과 2.코드가 길어지면 구분하기힘드니 설명하는 부분 누군가에게 흔적남기기

5. HTML Text

<p>Lorem    ipsum dolor sit a
    met consectetur adipisicing elit. 
    Dolore soluta nemo expedita eum dolorem accusantium quam 
    iusto suscipit fuga dolorum accusamus dolor corrupti, odit 
    mollitia sed similique maiores, iste repellat?</p>
<p>Rerum itaque molestias illo unde minus, fugiat incidunt similique repudiandae consectetur omnis? Esse dolorum animi magnam quasi, veniam eveniet non facilis. Dicta, eius! Eligendi voluptatem ex earum aspernatur est laborum.</p>

1.엔터를 입력하더라도 html에서는 엔터를 표시하지 않는다.
2.html에서는 여러 스페이스는 하나로 출력한다.

새로운 줄 출력하는 방법?
이라는 태그가 잇다.
br : 새로운 줄
빈 태그 임.(빈 element요소)이다. empty element 시작태그만 있는 요소
content와 종료태그가 없음.
빈태그도 많은 종류가 있다.

<!-- p>lorem -->
<p>Lorem ipsum <br> 
    dolor sit amet consectetur adipisicing elit.<br>
    Quia repudiandae accusantium dolore nemo obcaecati,<br>
     inventore quos iste asperiores ullam qui, <br>
    quaerat facere alias tempora labore deleniti esse suscipit corporis velit?</p>

pre : 콘텐트가 작성한대로 출력됨

<pre>
Lorem, ipsum dolor.
Lorem, ipsum.
Lorem ipsum dolor sit amet.
</pre>

띄어쓰기 스페이스 엔터 등 모든게 인식됨. 자바 """~""" 같은느낌
작성한게 그대로 출력되고 싶다면 pre태그를 사용해도된다.

html entity: 특수기호
&nbsp; : 스페이스
&amp; : &
<p>Lorem, ipsum dolor.</p>
Lorem, ipsum dolor.띄어쓰기 표시됨.
이런거 외우지말고. 알아만 두자.
특수기호가 종종필요할때가 잇다.
http://www.tcpschool.com/html/html_text_entities 외우지말고 검색해서 사용하자.
http://kor.pe.kr/util/4/charmap2.htm 숫자표현도있고 문자표현도 있다.

<br>을 표시하고싶다면 &lt;br&gt;이런식으로 사용하는 것이다.

6. vs팁

여러 element가 공통된 내용을 사용할때 vscode에서 여러커서로 작업하기
alt와 마우스 왼쪽 버튼 클릭으로 여러 커서 만들기
여러 내용인데 같은 내용을 넣을때 유용하다. 잘못누른거 한번더 클릭하면 없어짐.
규칙적으로 만들어지기
h$*6 하면 h1~h6까지 순서대로 만들어짐.

7. element 요소

element(요소) : 시작태그, 콘텐트, 종료태그로 구성됨
empty element(빈 요소) : 시작 태그만 있음
종료태그를 생략해도 브라우저가 의도대로 출력할 수도 있다.
의도한대로 출력되지 않을수 잇으니 꼭 종료태그를 작성하자

요소의 내용물은 다른 요소가 될 수 있다.
<h2>Lorem, <i>ipsum</i> dolor.</h2> 요소안에 요소가 들어갈 수 있다. <i>는기울임태그임.
감싸고 있는 요소가 부모 요소, 안에 있는 요소를 자식 요소라고 한다.
h2는 i의 부모 요소인것이고 i는 h2의 자식요소 인것임.

<html>
    <head></head>
    <body>
        <h1>제목</h1>
    </body>
</html>

html이 부모 자식이 head body임 서로 형제 관계인것이고 h1은 손자 임.

8. html, head, body 필수요소

head 요소 : html문서의 부가 정보를 작성하는 요소
body 요소 : html문서에서 브라우저에 출력되는 정보를 작성하는 요소

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h1>Lorem, ipsum dolor.</h1>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
        <a href="#">Lorem, ipsum dolor.</a>
    </body>
</html>

<!DOCTYPE html>은 페이지 맨위에 무조건 작성해줘야한다. 왜? html이버전이 여러개잇엇음. xhtml html4 html5등등잇엇음.
각버전마다 사용할 수있는 태그들의 목록이 있음. 브라우저는 이것을 읽고나서 작성된 태그들이 어느 버전인지 참고해서 해석을 하는 것이다.
그래서 꼭 작성해줘야한다. 현재버전이 html5인데 다른버전은 버전을 표시해줘야하지만 현재는 그냥 html만 적으면된다.

html의 태그는 대소문자를 구분하지 않는다. 하지만 소문자로 작성할것을 권장한다.

앞으로 어떤 태그 어떤 element가 있는지 배운다. 하지만 모든 것을 배울 필요가 없다. 자주쓰는 거만 배우고 잘모르거나 까먹을때 사전을 사용하는게 낫다.
www.w3schools.com 의 HTML Reference https://www.w3schools.com/tags/default.asp
몇개를 배우겟지만 쓸수도 안쓸수도 있다. 모르는 것이 있다면 레퍼런스를 보고 공부하자.
w3schools가 초보자가 배우기는 좋은데 옛날거들이 오류가 잇다.
https://developer.mozilla.org 사이트를 가면 더 자세한 것을 볼 수 있다.

<ul>: The Unordered List element
내일 element 시작태그 어떤 코드들이 들어가잇음 ->속성?
오늘 작성한 코드를 어떻게 올리고 어디에 올리는지?
깃헙에 올릴것임.
1.git 다운 https://git-scm.com/
2.github desktop 다운 https://desktop.github.com/

null

null

null

2023.01.26 후기

첫날이야 그런지 진도가 매우 늦다. 매우 기본적인 것을 가르치는 느낌이다.
말그대로 어떻게 공부할지를 알려주고 혼자서 공부하는게 맞는 것 같다.
깃헙을 어느정도 다룰 수있게 되어서 사용하면 될듯하다.