2020.06.30 [TIL] HTML

Hello, Big stranger 2020. 6. 28. 15:09

HTML과 CSS는 웹브라우저 상에서 화면에 보여지는 사이트 혹은 웹 앱을 표현하는 도구입니다. 각 영역을 구분할 줄 알고, 각 영역마다 의미를 담아내는것은 잘 구조화된 HTML을 만드는 과정입니다. 이를 통해 프론트엔드 개발을 하기 위한 설계를 배울 수 있습니다. 웹 앱을 만들기 위해서 HTML을 programmable하게 작성하는 것은 문서로 만드는 것과는 또다른 차원의 문제입니다. 그러기 위해 Selector라는 개념을 이해해야 합니다. 이는 CSS, 즉 기본적인 스타일링을 하기 위해서도 반드시 알아야 할 개념입니다.

Achievement Goals

HTML & CSS

HTML 구조를 programmable하게 기획할 수 있다
CSS를 HTML에 적용할 수 있다
w3school 등의 reference 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다
기초적인 selector 규칙을 이해할 수 있다
CSS를 이용해 간단한 레이아웃을 만들 수 있다
element에 class를 사용해야 할 때와 id를 사용해야 할 때를 구분할 수 있다

문서의 구조나 내용들을 담겨있는 것이다. 말그대로 문서의 틀을 만드는 언어이다.

What is HTML?

HyperTextMArkup Language의 약자

웹페이지의 틀을 만드는 마크업 언어

How to use HTML?

HTML은 tag들의 집합

Tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소

<!DOCTYPE html> ----> 선언이다!

<html>

<head>

<title>page title</title>

</head>

<body>

<h1>Hello world</h1>

<div>Contents here

</div>

</body>

</html>

----------------> 그후 읽어보면 쌍으로 이루어져있다는 것을 알 수 있다.

순서가 여는 순서와 닫는순서 역시 지켜지고 있다는 것을 알 수 있다.

대표적으로 이것을 TREE STRUCTURE이라고 한다.

이 문서가 HTML 문서임을 명시 html 시작 태그로, 문서 전체의 틀을 구성 head 태그는 문서의 메타데이터를 선언

문서의 제목, 브라우저의 탭에 보여짐 </태그이름>은 해당 태그가 끝났음을 의미 body 태그는 문서의 내용을 담는 곳 heading을 의미하며,

크기에 따라 h1부터 h6까지 있음. content division을 의미하며, 줄바꿈됨 줄바꿈이 없는 content 컨테이너

div 태그가 끝났음을 의미

body 태그가 끝났음을 의미

html 태그가 끝났음을 의미

html 태그들을 찾아보면 수많은 데이터들이 있다. 그 중에서 주요 태그들만 아신다면 웹을 만드는데 지장이 없다.

HTML 확장자 사용

TREE STRUCTURE

HTML 문서 시작

html

head

title : Page title

body

h1: Hello world

div : Contents here

span : Here too!

SELF-CLOSING TAG

태그 내부에 내용이 없다면, (<tag></tag>와 같이 표현되는 경우) <tag/>와 같이 표현 가능

img 태그 같은경우는 여는건있지만 닫는것은 없다. 그래서 셀프태그를 해줘야한다.

또 하나 설명을 하면 태그의 속성들이 담겨있는걸 볼수있다.

우분투에서 Open In Browser가 작동하지 않는 경우인데 뭔가 제목이 잘못 되어져있는 것같다. / vs code 여는걸로 되어있는가?

vscode 실행 후 Desktop바탕화면에 HTML 연습으로 해놓은 다음에 vscode로 드래그 하여 열면된다.

여기서 index.html 파일을 만들고 연습을 시작하면 된다.

맨처음에 <!DOCTYPE html>

<html>

</html> 만들어 준다 !D까지만 쳤는데도 자동입력이 된다. 굳!

그 후 <head> , <title> 제목 </title>, </head>를 작성해준다.

그 후 설정 한다음에 하나만 더 추가한다.

-------------------------------------->어디서도 한글이 잘 나올수있도록 해주는 유니코드 세팅이라고 한다.

그후 <body>를 입력해 주면 된다.

이렇게 하면 기본적인 html 구성이라고 한다.

body를 제외한 작성한것은 눈에 보이지 않는 곳 body는 눈에 보이는 곳이 된다.

그 후 단축키로 저장을 한 후, html 연습을 들어가신 후 index.html 연습을 들어가보면 html이 출력이 되는 것을 볼 수 있을것이다.

그런 다음 수정하고 새로고침하는 형식으로 계속 갈 것이다.

자 그런데 이거 말고 팁하나를 알려드리자면 vscode 확장같은 개념으로서 Open in Default Browser 기능을 사용하면 바로 chrome 열릴수 있게 해준다.

다시 돌아가서 html을 살펴볼 것인데. test를 할 수있다. body 태그 안쪽에서 실행할 수 있는 것이다.

그 안에서 <div>를 test 해 보겠다. 후 작성 후 저장 새로고침하면된다. 이것과 관련해서 어떠한 태그들이 있는지 알아볼 것이다.

중요한 몇개만 아시면 된다.

Most used tags in html

태그	설명
<div>	Division
<span>	span
<img>	Image
<a>	Link
<ul>&<li>	Unordered List & List Item
<input>	Input(Text,Radio,Checkbox)
<textarea>	Multi-line Text Input
<button>	Button

div vs. span

<div>div 태그는 한 줄을 차지합니다</div>

<div>division 2</div>

<span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다.</span>

<div>division 3</div>

vscode를 작성 후 확인해 보면 다음과 같다.

div 태그는 한 줄을 차지합니다.

division 2

span 태그는 컨텐츠 크기만큼 공간을 차지합니다. span2 span3

division 3

developer console 창을 통해 확인해 볼수 있다.

여기 보시는 것과 같이 span 태그는 컨텐츠 크기만큼 차지해보이는 것처럼 보일수있다.

div 태그는 전부다 한줄을 차지하고 있다.

이와같이 한줄을 먹느냐 안먹느냐의 차이이다. css를 이용해서 한줄을 차지하느냐 안하느냐할수있지만 기본값은 한줄 , 컨텐츠 크기이다.

다음은 img 삽입이다. / 속성은 다음과 같다.

이것을 다음과 같다 key = value 라고 볼 수있다.

이미지 태그는 닫는태그가 따로 없다.

a : 링크 삽입

<a href="https://codestates.com" target="_blank">코드스테이츠</a>

코드스테이츠

큰 특징 중 하나 눌러서 이동하는게 html문서의 가장 특징이라고 할 수 있다. 링크 삽입이가능하며 설정해놓으면 코드스테이츠로 이동한다.

이거 말고 자주가는 사이트를 넣어볼까요?

<a href="https://naver.com">네이버</a> 새로 고침 할때에 네이버가 뜨며 이동한다.

새창이나 새탭으로 열고싶으면 target="_blank"> 추가를 한다.

그다음에는 ul,li : 리스트라는것이있다.

<ul>

<li>Item 3 has nested list

<ul>

</ul>

</li>

</ul>

Item 1

Item 2

Item 3 has nested list

Item 3-1

unordered list / ul 말고 ol이라는 것도있다.

ul 대신 ol를 집어넣으면 넘버링이 같이들어간다. 이런것들은 메뉴같은데에 많이 쓰인다.

input,textarea : 다양한 입력 폼

<div>

<input type="radio, name="choice" value="a"> a

<input type="radio, name="choice" value="b"> b

</div>

<div>

<input type ="checkbox" checked> checked

<input type ="checkbox"> unchecked

</div>

text 박스 부터 먼저 출력을 해보겠습니다.

<input type="password">를 만들어보고

이제 id,password를 한줄에 먹도록 해보겠습니다. div

<div>

ID <input type="text" placeholder="type here">

</div>

<div>

password <input type="password">

</div>

그럴듯하게 나옵니다.

그 후 아이디를 만들고 비밀번호들을 만든다면 아이디 기억하기 같은 체크박스들이 있죠?

radio / check 차이점? - radio는 둘중하나, 셋중 하나 선택이 가능(name이라는 것을 이용하여 그룹설정이가능)하나 check는 여러개가 설정이 가능하다.

<div>

ID <input type="text" placeholder="type here">

</div>

<div>

password <input type="password">

</div>

<div>

<input type="checkbox"> 다음에 들어올 때 ID 기억하기

</div>

<body>

<div>

ID <input type="text" placeholder="type here">

</div>

<div>

Password <input type="password">

</div>

<div>

<input type="checkbox"> 다음에 들어올 때 ID 기억하기

</div>

<div>

<input type="radio" name ="option1"> 옵션A

<input type="radio" name ="option1"> 옵션B

</div>

</body>

<textarea>!!!!!! 이건 꼭 닫는 태그가있어야하고 줄바꿈이 되는 입력태그이다!!

결정적인거 하나 추가하면 뭐죠? 바로 button 이다.

---------------------------------------------------------------------------------------------------------------------------

Slide : HTML

Learn yourself : HTML

MDN HTML elements 참고해서 확인할 것

HTML 구조 관련 태그

<html>

<head>

<body>

<style>

<meta>

HTML 컨텐츠 관련 태그

<img>

<br>

HTML 폼 관련 태그

<form>

<input><type: text, checkbox,color, date,password.....)

왜<b>,<font>,<center>등의 태그를 권장하지 않는지....

저작자표시 비영리 변경금지 (새창열림)