[2024-2 웹기초 스터디] 김지수 #1주차

HTML 이란?

HTML은 HyperText Markup Language를 의미한다. 하이퍼링크 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트, 쉡게 말해 HTML은 웹브라우저를 통해 표시되는 웹페이지 콘텐츠를 정의하기 위해 사용하는 언어이다.

완성된 HTML코드를 웹브라우저에서 로딩하면 웹페이지가 만들어 진다. HTML 코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다.

HTML 문서는 파일의 확정자가 html 또는 html이다.

개발자 도구 열기 (크롬 기준)

코드 에디터

코드 에디터란? 프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어이다. 코드는 결국 텍스트이다. 그러나 이 텍스트를 더 빠르게, 더 편하게 작성하기 위해서는 코드 에디터를 사용하는 것이 좋다.

추천코드 에디터:https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

HTML은 언어이다

한국어, 영어 등으로 사람들과 소통하기 위해 해당 언어의 문법에 맞는 표현을 사용해야 하듯, HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 사용해야 한다.

HTMl의 문법은 딱 한 가지, 태그(tag)만 기억하면 된다. 태그는 HTML 코드에서 정보(콘텐츠)를 정의하는 형식이다.

태그는 <> 과 </> 기호를 사용해 콘텐츠의 시작과 끝을 표시한다. 각 태그는 콘텐츠를 감싸며, 태그명은 콘텐츠의 성겨과 의미를 나타낸다.

태그 사용 형태: <태그명> 여기에 콘텐츠를 기입합니다. </태그명>

단일 태그 사용 형태: <태그명/> 또는 <태그명>

HTML 태그 사용법: 속성

속성은 태그의 부가적인 기능을 정의하는 것으로, 선택사항이다.

속성은 시작 태그의 내부에 정의한다. 속성의 개수에는 특별한 제한이 없다.

속성이 추가된 태그 형태: <태그명 속성명="속성값"> 내용 </태그명>

<태그명 속성값="속성값"/>

HTML 탸구 사용법: 주석

주석은 사람에게 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다.

주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.

주석의 형태:

HTML 문서의 구조

<!DOCTYPE html>

문서의 첫 부분에서 문서 유형을 지정하는 단일 태그이다.

이때 문서 유형이란 웹 브라우저에게 '이 문서는 ㅇㅇ니까 잘 처리해줘'라는 메시지를 전달하는 것이다.

html은 첫 등장 후 시간이 흐르면서 버전 변경을 해왔는데, 현재 표준으로 사용되고 있는 html 버전을 사용하기 위해 적어주는 타입이 바로 'HTML'이다.

<html>~</html>

문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그이다.

<html>에서부터 HTML 문서가 시작되고 </html>에서 HTMl문서가 끝난다.

이 태그의 내부에 다양한 태그들이 포함되어 문서의 내용을 구성한다.

<head>~<head>

웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어간다.

문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 다일 태그이다. 문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다

문서의 제목을 나타낸다. 콘텐츠는 브라우저 탭에 표시된다.

<boby>~<boby>

실제 브라우저 화면에 표시될 내용을 입력하는 태그이다. 여기에는 다음과 같은 유형의 태그들이 포함될 수 있다.

-텍스트를 표시하는 태그

-이미지를 표시하는 태그

-각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그

문단(paragraph)

p 태그는 문단 요소를 나타내는 태그로써, 가장 많이 사용되는 텍스트 태그. 하나의 p 태그는 하나의 문단을 표현한다. 문단과 문단 사이에는 공백이 있다.

제목(headline)

h 태그는 제목(표제) 요소를 나타내는 태그이다. 숫자와 함께 사용되며, 숫자 1일 떄 가장 크고 6일 때 가장 작다.

수평선

hr 태그는 수평선을 표시하는 태그이다, 수평선은 주제 변경 또는 내용 구분을 위해 주로 사용된다.

HTMl 텍스트의 특징

일반적으로 엔터는 '줄바꿈'을 위미하는 입력이지만, HTML 코드에서는 이를 무시한다. 또한 스페이스를 통한 공백도 한 번씩 밖에 인정되지 않는다.

줄바꿈 태그와 공백문자

HTML에서는 br 태그가 '줄바꿈'을 담당한다.

공백을 두 번 이상 표시하고자 할 때는  를 사용한다.

태그의 구분

블록 레벨 요소: 자기가 속한 너비를 모두 차지하여 블록을 형성한다.

라인 요소: 자기에게 필요한 만큼의 공간만 차지한다.

텍스트를 굵게 만들자

strong 태그는 감싸고 있는 콘텐츠를 굵게 표시하는 태그이다. 인라인 요소를 만드는 태그이다.

텍스트를 이탤릭체러 쓰자

em 태그는 감싸고 있는 콘텐츠를 기울여 이탤릭체로 표시하는 태그이다. 인라인 요소를 만드는 태그이다.

텍스트에 형광펜 표시를 하자

mark 태그는 감싸고 있는 콘텐츠에 형광펜 표시를 더해주는 태그이다. 인라인 요소를 만드는 태그이다.

이미지를 보여주는 img 태그

img 태그는 이미지를 표시할 때 사용하는 태그이다. 단일 태그로써, 닫는 태그를 필요로 하지 않는다. 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야한다.

img 태그 형태: <img src="이미지" alt="이미지설정"/>

표시할 이미지 지정

img 태그의 src 속성은 표시할 이지미의 위치정보와 파일명을 입력받는 속성이다. 즉,이미지의 url을 입력받는다.

서버에 위치한 이미지 파일이어도 되고, 네 컴퓨터에 저장된 이미지 파일이어도 된다.

이미지 설정(alt)의 중요성

alt는 alternative의 약자로 대체 텍스트 역할을 한다.

이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시된다.

alt를 사용하면 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야 하는 상황에 대한 대비가 가능하다(음성인식기가 이미지 대신 이를 활용)

이미지 크기 조절하기

img 태그를 통해 이미지를 표시할 때는 이미지가 표시될 크기를 지정할 수 있다.

이때 너비와 높이를 각각 지정할 수 있다. 단위 없이 정수 값만 지정한다

컨테이너 태그

콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그를 '컨테이너'라고 한다.

콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 개발자는 컨테이너를 사용하는 것이 좋다

블록 레벨 컨테이너: <div></div>

인라인 컨테이너: <span></span>

전역 속성

전역 속성(Global attributes)은 모든 HTML 태그에서 공통으로 사용할 수 있는 속성이다. 속성이란 테그의 부가적인 기능을 정의하는 것으로, 선택사항이다. 속성은 시작 태그의 내부에 정의한다. 속성의 개수에는 특별한 제한이 없다.

속성을 추가하는 방법: <태그명 속성명="속성값" 속성명="속성값">콘텐츠</태그명>

대표적인 전역 속성들

id: 요소에 ㅗ고유한 이름을 부여하는 식별자 역할 속성

class: 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성

style: 요소에 적용할 css 스타일을 선언하는 속성

title: 요소의 추가 정보를 제공하는 텍스트 속성, 사용자에게 툴팁 제공

링크

링크란 현재 문서에서 다른 문서로 이동할 수 있는 수단이다.

링크는 anchor

a 태그 요소는 href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(연결)를 만든다.

인라인 요소이며, 콘텐츠는 주로 링크의 목적지를 나타낸다.

새 탭에서 열고 싶다

a 태그의 target 속성을 이용하면 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정할 수 있다.

연락을 해보자

a 태그의 href에는 웹문서의 주소 뿐 아니라 전화번호나 메일 주소 등을 지정할 수도 있다. 이 때 각 유형별로 추가되는 텍스트가 있다.

목록은 연관 있는 항목(item)들을 나열한 것을 의미한다.

HTML 목록은 '순서 없는 목록'과 '순서 있는 목록'으로 구분된다

목록 태그의 구분

순서 없는 목록: <ul></ul>

순서 있는 목록: <ol></ol>

항목 태그는 같은 것을 쓴다

<li> 태그는 목록에 들어가는 항목 하나를 표현할 때 사용하는 태그이다. 항목들을 감싸는 태그가 무엇이냐에 따라 기호가 달라진다.

input

사용자로부터 값을 입력받을 수 있는 대화형 컨트롤(또는 '필드')을 나타낸다. 기본적으로 인라인 요소이며, 단일 태그이다.

input의 핵심, type 속성

type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라진다. 사용 가능한 type은 20여 가지이며, 기본값은 text이다.

type의 값이 달라짐에 따라 적용할 수 있는 추가 속성의 종류도 조금씩 차이를 보인다.

이름을 지어주세요

input 태그에는 name 식별자를 추가할 수 있다. 이는 각각의 입력 항목에 대한 이름이다.

보기 중에 골라보자

select는 다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴이다. 메뉴 안에 포함되는 옵션은 optin 태그를 사용해 표시한다.

이름과 값

select에는 input과 마찬가지로 name을 지정할 수 있으며, 각각의 option에는 value 속성을 지정할 수 있다. value는 실제로 처리될 값을 나타낸다.

textarea

textarea는 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소이다.

textarea 역시 name을 추가하여 구별해줄 수 있는 입력 요소이다.

form을 학습하기 전에

form은 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그

서버란, 정보를 제공하는 호스트(host)이다!

서버와 클라이언트

클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공한다.

클라이언트가 어떤 요청을 보내는가에 따라, 응답은 달라질 수 있다.

form

form은 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출(submit)할 수 있다.

form의 내용을 제출

form의 내용(입력값)을 제출하기 위해 input 태그의 submit 타입 사용 가능!

form의 속성

action: 입력값을 전송할 서버의 url

method: 클라이언트가 입력한 데이터를 어떤 식으로 전송할지(get or post)

GET vs POST

GET: 서버에 요청을 보내어 응답을 받아낸다.

서버로부터 정보를 '가져오겠다'는 성격의 요청이다.

POST: 서버에 요청을 보내어 작업을 수행한다.

서버에 있는 데이터를 추가/수정/삭제 한 후에 응답을 받아낸다.

서버의 정보의 '조작하겠다'는 성격의 요청이다.

meta 태그

meta 태그는 HTML 문서에 대한 메타데이터를 정의한다. 메타데이터란 데이터에 대한 데이터 즉 '정보'를 의미한다.

meta 태그는 항상 head 태그의 안에 들어가며, 일반적으로 문자 세트, 페이지 설명, 키워드, 문서의 작성자 및 뷰포트 지정하는 데 사용된다.

meta 태그가 젱공하는 메타데이터의 유형 & 속성은?

charset: 문자 세트

http-equiv: 콘텐츠 속성 정보에 대한 http 헤더

name: 문서 정보

content: 메타데이터 내용

chatset

문자 인코딩에 대한 요약 정보를 기입하는 속성이다. 문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다.

코드: <meta charset="utf-8">

http-equiv

콘텐츠 속성의 정보/값에 대한 HTTP 헤더를 제공한다.

HTTP란 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이다.

name

name 속성을 이름으로, content 속성을 값으로 하여 문서 정보를 이름+값 쌍의 형태로 제공할 때 사용할 수 있다.

뷰포트(viewport)

뷰포트(viewport)란 현재 화면에 보여지고 있는 영역을 의미한다.

기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다. 아래 그림은 동일한 HTML 문서를 각각 PC와 모바일로 확인한 결과이다.

왜 이런 현상이?

태블릿, 스마트폰 등 모바일 기기가 등장하기 전에는 웹 페이지가 컴퓨터 화면만을 위해 설계 되었다.

컴퓨터 화면에서의 웹 조회할 수 있지만, 모바일 기기에서는 고정된 사이즈(스크린 크기)로 조회해야 하므로 웹의 콘텐츠를 표시하기 위해서는 배율 조정을 해야만 한다.

name="viewport"

기기 별로 뷰포트가 다르기 때문에 발생하는 배율 문제에 대응하기 위해 meta 태그를 통해 뷰포트 관련 설정을 추가할 수 있다.

저작자표시 동일조건

'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글

[2024-2 웹기초 스터디] 김재승 #1주차 (1)	2024.10.31
[2024-2 웹기초 스터디 #1주차] 김민재 - HTML (0)	2024.10.31
[2024 신입부원 기초 스터디] 이종윤 #6주차 (웹 기초 스터디 마무리~) (0)	2024.05.28
[2024 신입부원 기초 스터디] 백채린 #5주차 (Clock_실습) (0)	2024.05.24
[2024 신입부원 기초 스터디] 박건민 #6주차 웹 기초 스터디 마무리~ (0)	2024.05.23