[웹퍼블리싱] HTML 시작하기

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

JiYoung Dev 🖥

[웹퍼블리싱] HTML 시작하기 본문

full stack/HTML, CSS

[웹퍼블리싱] HTML 시작하기

Shinjio 2023. 2. 28. 17:23

🔎 HTML, CSS란?

HTML, CSS는 웹사이트를 만드는 프로그래밍 언어(컴퓨터 프로그램을 만들 때 사용하는 언어)

소스 코드 : 프로그래밍 언어로 작성한 내용

코딩 한다 : 프로그래밍 언어로 코드를 작성한다.

HTML은 웹사이트에 들어가는 내용을 담당하고, CSS(Cascading Style Sheets)는 웹사이트에 들어갈 스타일을 담당

웹사이트를 만들 때는 기본적으로 .html 형식의 파일을 만듦. HTML 파일을 편집한 다음에 웹 브라우저에서 열면 우리가 평소에 보는 웹사이트처럼 화면에서 볼 수 있음. HTML 파일을 작성하기 위해 VS Code를 사용하고, 웹 브라우저로는 크롬을 사용하여 웹사이트를 만들어 볼 예정.

🔎 HTML 파일 만들고 실행해보기

📖 태그(Tag)

HTML에서 태그는 꺾쇠(< 기호와 > 기호)를 사용하는 문법.

일반적으로 시작 태그와 종료 태그로 내용을 감싸는데, 시작 태그는 <태그 이름> 형태로 쓰고 종료 태그는 </태그 이름> 형태로 작성

📖 속성

시작 태그에 속성 이름 = "속성 값" 형태로 사용하는 문법으로 태그의 속성을 정의함.

<a href="">, <img src=""> 가 대표적인 속성

📖 HTML 파일의 기본 구조

<!DOCTYPE html> - 도큐먼트 타입이 html임을 나타내는 코드

<html> - 파일 안에서 모든 것을 감싸는, 페이지 전체를 감싸는 역할을 하는 태그
html 태그 내에 내용을 작성하면 웹사이트에서 작성한 내용을 볼 수 있음
<head> - 페이지에 대한 정보 (화면에는 보이지 않음)
</head>
<body> - 페이지 내용 (화면에는 보이지 않음)
</body>
</html>

▼▼▼ DOCTYPE, html 태그 사용 ▼▼▼

이렇게 만든 html 파일은 파일이 저장된 내 컴퓨터에서만 볼 수 있음. 다른 사람들이 볼 수 있도록 하기 위해서는 인터넷에 올려야 함

📖 HTML 파일 인터넷에 올리기

netlify : 웹서비스 배포를 도와주는 클라우드 서비스

웹사이트를 인터넷에 올리려면 서버가 필요함. 이 서버 공간 일부를 빌려주면서 여러가지 편리한 기능을 제공

회원가입 후 deploy manually 사용하여 업로드 진행

아래 사진처럼 site details에서 사이트 주소 변경할 수 있음

📖 태그 정리

⚙ 사이트에 이름 붙이기 : <title> </title>

아래 사진과 같이 웹브라우저의 탭이나 창에 보이는 제목 정하는 태그로 화면 내에는 나타나지 않음

이 태그는 페이지의 내용이 아닌 페이지에 대한 정보이므로 <head> 태그 안에 구분해서 넣음

⚙ 인코딩(Encoding) 정하기 : <meta>

컴퓨터는 숫자로 문자를 저장하는데 어떤 숫자가 어떤 문자에 해당하는지 정해 놓은 규칙을 인코딩이라고 함. 인코딩에는 여러 종류가 있는데, 인코딩을 잘못 사용하면 엉뚱한 문자를 보여줌. 따라서 HTML에서 한글을 사용하려면 한글을 지원하는 인코딩 방식을 사용해야 함. (크롬의 경우 작성하지 않아도 한글이 정상적으로 표시됨)

모든 브라우저에서 같은 인코딩을 사용하게 하려면 직접 인코딩을 설정하면 됨. 인코딩은 <head> 태그 안에 넣음.

<meta charset="utf-8">
한글을 지원하는 인코딩인 UTF-8을 사용하도록 정하는 코드

⚙ 제목 넣기 : <h> </h>

제목 태그는 <h1>, <h2>, ... , <h6>까지 사용할 수 있고, 숫자가 커질수록 작은 제목을 뜻함

⚙ 단락 넣기 : <p> </p>

단락을 나누지 않으면 계속 연결되어 보여짐 (줄바꿈X)

⚙ 줄 바꿈 : <br>

HTML에서는 코드 내에 줄바꿈이 있더라도 화면 내에서는 줄바꿈을 하지 않음. 창의 크기에 따라 보여줄 수 있는 만큼 보여줌. 원하는 곳에서 줄바꿈을 하기 위해서는 <br> 태그 사용. 참고로 <br>태그는 시작 태그 하나로만 사용

⚙ HTML 본문 안에 꺾쇠 기호 넣는 법 (< >)

HTML 문법에서는 꺾쇠 기호를 태그를 작성하는데 사용. 그래서 페이지 내에 꺽쇠를 넣으면 이를 태그로 해석하여 내용이 보이지 않음. 꺾쇠를 표현하고 싶을 때는 꺾쇠 대신 <(앰퍼샌드 엘 티 세미콜론), >(앰퍼샌드 지 티 세미콜론)을 입력해야 함. 참고로 lt는 less than의 약자로 ~보다 작다, gt는 greater than의 약자로 ~보다 크다는 뜻

⚙ 링크 넣기 (하이퍼링크) : <a>

시작 태그에 href="", 따옴표 안에 링크 주소 입력하는 구조로 href는 하이퍼텍스트 참조(hypertext reference)의 약자.

⚙ 이미지 넣기 : <img>

인터넷에 올라온 사진을 사용하는 경우 : <img src="사진 주소">

같은 폴더에 있는 파일을 사용하는 경우 : <img src="파일명">

기타 폴더에 있는 파일을 사용하는 경우 : <img src="경로/파일명">

⚙ 영역 나누기 : <div> </div> 혹은 <span> </span>

CSS 를 적용할 때 각 태그에 적용할 수도 있고, 각 영역에 적용할 수도 있음. CSS를 사용할 때 스타일을 적용하는 용도로 영역을 나눔

<div> : 여러 태그를 감쌀 때

<span> : 제목이나 단락 같은 데서 일부분만 영역만 지정할 때

📖 HTML 코드를 편하게 입력하는 법

빈 HTML 문서를 열고 ! 입력 후 엔터치면 기본적으로 사용되는 태그들이 자동완성 됨

인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드

모바일 기기에서 보여줄 비율을 조정하는 코드

'full stack > HTML, CSS' 카테고리의 다른 글

WEB & HTML 정의와 역사 / HTML 태그 (2023.04.21) (1)	2023.04.23
CSS 레이아웃 : Position, Flex (0)	2023.03.08
HTML 핵심 개념 (0)	2023.03.06
CSS 핵심 개념 (1)	2023.03.03
[웹퍼블리싱] CSS 시작하기 / 페이지끼리 연결하기 (0)	2023.02.28

'full stack/HTML, CSS' Related Articles

JiYoung Dev 🖥

[웹퍼블리싱] HTML 시작하기 본문

[웹퍼블리싱] HTML 시작하기

🔎 HTML, CSS란?

🔎 HTML 파일 만들고 실행해보기

📖 태그(Tag)

📖 속성

📖 HTML 파일의 기본 구조

📖 HTML 파일 인터넷에 올리기

📖 태그 정리

⚙ 사이트에 이름 붙이기 : <title> </title>

⚙ 인코딩(Encoding) 정하기 : <meta>

⚙ 제목 넣기 : <h> </h>

⚙ 단락 넣기 : <p> </p>

⚙ 줄 바꿈 : <br>

⚙ HTML 본문 안에 꺾쇠 기호 넣는 법 (< >)

⚙ 링크 넣기 (하이퍼링크) : <a>

⚙ 이미지 넣기 : <img>

⚙ 영역 나누기 : <div> </div> 혹은 <span> </span>

📖 HTML 코드를 편하게 입력하는 법

'full stack > HTML, CSS' 카테고리의 다른 글

티스토리툴바