html 기초

ch - 웹 개발 이해하기

웹 개발과 HTML & CSS Javascript
HTML과 CSS는 웹 페이지를 만드는 기초
자바스크립트가 웹 페이지를 컨트롤 하는 방법을 눈으로 확인 가능

HTML: 웹페이지의 구조(Structure) 를 담당하는 Markup 언어

CSS: 디자인 요소를 시각화하는 스타일시트(Presentation) 언어

JS(JavaScript): 단순한 웹페이지를 프로그램으로 만들어 사용자와 상호작용(Interaction) 할 수 있게 해주는 프로그래밍 언어

Visual Studio Code를 설치해서 사용하자

ch – HTML 기초

HTML? → Structure!

HyperText Markup Language; 웹페이지를 구성하는 마크업 언어

→ 프로그래밍 언어가 아니다. 그러나 HTML은 웹페이지를 구성하는 뼈대(Structure)가 되는 언어

ㅤ

마크업 언어?마크업 언어 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.
태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 _문서의 구조를 표현하는 역할_을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라 한다.
학습 목표

HTML을 CSS를 적용하고 JavaScript로 개발할 수 있게 작성하기

HTML은 Markup 언어임을 이해

HTML의 구조와 문법 이해

→ Opening tag(여는 태그), Closing tag(닫는 태그), Self-closing tag에 대한 이해

자주 사용하는 HTML 요소(Element)

→ div, span 태그의 의미, 차이점

→ ul, ol, li 의 의미와 사용법

→ input type 설정을 통한 다양한 종류의 input 활용법

동적인 웹 어플리케이션 개발을 위한 HTML 구조 생성법

→ 간단한 웹 페이지 기획안 표현

→ id 와 class를 적절히 사용하여 읽기 쉬운, "의미있는(Sementic)" HTML 문서 작성

→ HTML5 semantic tag를 적재적소에 사용하여 읽기 쉬운(컴퓨터/사람) 시멘틱한 HTML

HTML 기본 구조와 문법

How to use HTML?
ㅤ
HTML은 tag들의 집합
Tag: 부등호(<>)로 묶인 HTML의 기본 구성 요소
html 확장자 사용
Tree Structure
ㅤ
HTML은 트리 구조로 되어있다(부모-자식 관계)

HTML 문서 시작
    html
        head
            title: Page title
        body
            hi: Hello world
            div: Contents here
                span: Here too!

ㅤ

HTML 기본 tag
ㅤ
아주 기본적인 태그들. 이외에도 다양한 태그들이 존재함

<!DOCTYPE html> 이 문서가 HTML 문서임을 명시

<html> html 시작 태그로, 문서 전체의 틀을 구성

<head> head 태그는 문서의 메타데이터를 선언

<title>Page title</title> 문서의 제목, 브라우저의 탭에 보여짐

</head> </태그이름>은 해당 태그가 끝났음을 의미

<body> body 태그는 문서의 내용을 담는 곳

<h1>Hello world</h1> heading을 의미. 크기에 따라 h1~h6

<div>Contents here content division을 의미. *줄바꿈*됨

<span>here!</span> *줄바꿈이 없는* content 컨테이너

</div> div 태그가 끝났음을 의미

</body> body 태그가 끝났음을 의미

</html> html 태그가 끝났음을 의미

닫는 태그가 없는 태그도 존재!

Self-closing tag

태그 내부에 내용이 없다면 <tag></tag>
<tag/>와 같이 표현 가능

<img src=”xxxx.png”></img> //src는 source 속성을 의미

→ <img src=”xxx.png”/>

자주 사용하는 HTML 요소(Element)

<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와 span의 차이?

div는 줄바꿈하고 한줄을 차지함(한줄 전체를 먹음)
span은 줄바꿈 안하고 딱 자기 공간만 차지(컨텐츠 크기)

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

<div>division2</div>

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

<span>span2</span>

<span>span3</span>

<div>division3</div>

→ 결과)
div 태그는 한줄을 차지한다
division2
span 태그는 컨텐츠 크기만큼 공간을 차지한다 span2 span3
division3

ㅤ

img: 이미지 삽입

<img src=”xxxxx.jpg”>

→ 닫는 태그가 없다!

ㅤ

a: 링크 삽입

<a href="https://naver.com" target="_blank"> 네이버 </a>

→ a href 링크 눌러서 이동하도록
→ 새 탭에서 뜨게 하려면 target=”_blank”

ㅤ

ul, li: 리스트 unordered list(ul)/ list item(li)

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3 has nested list
        <ul>
            <li>Item3-1</li>
        </ul>
    </li>
</ul>

→ 리스트가 트리 구조로 열림
→ ul의 경우 순서가 없는 형태(unordered)

ol(ordered list)는 순서가 있다

ul을 ol로 바꾸면

1.
2.
3.

이런식으로 순서 있게 바뀜을 알 수 있다

ㅤ

input, textarea: 다양한 입력 폼

<input type="text" placeholder="type here">
<div>
<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="b"> b
</div>
<textarea></textarea>
<div>
<input type="checkbox" checked> checked
<input type="checkbox"> unchecked
</div>

input

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

//text 박스를 만들고 사용자들이 입력할 수 있도록
→ id 입력 란

<input type="password" >
→ 타입을 변경하여서 password 입력 란

type=”checkbox”와 “radio”

checkbox는 다중 선택이 가능
radio는 택1이다(라디오 버튼 중 1개만 선택가능) → 그룹 설정


단, radio 버튼을 그룹 설정(택1)하려면 같은 이름(name)으로 묶어줘야 한다

<input type=”radio” name=”group1”> 옵션1
<input type=”radio” name=”group1”> 옵션2

textarea

반드시 닫는태그 넣어줘야함
→ <textarea></textarea>
줄바꿈이 된다(multi-line)

button

말 그대로 누르는 버튼

<button>내용</button>

추가적인 tag들

<p>
→ <p> 엘리먼트는 paragraph(문단)의 약자. 하나의 문단을 표현하기 위하여 사용

<section>
→ 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용
시맨틱 엘리먼트의 일부

<div> 엘리먼트는 HTML5 이전에는 하나의 구역(division)을 나타내기 위해 사용할 수 있었지만, 지금은 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양

'SE Bootcamp 내용 정리' 카테고리의 다른 글

css 기초 - 2 (0)	2021.08.31
css 기초 - 1 (0)	2021.08.27
js - 반복문 (0)	2021.08.26
js - 문자열 (0)	2021.08.25
js - 조건문(conditional) (0)	2021.08.24