티스토리 뷰

web & develop/HTML & CSS

[ HTML / CSS 공부] 1. HTML의 기본 형식

Nerd_Lee 2022. 1. 12. 03:46
반응형

퇴사한 지 1년이 넘은 시점.. 아직 코딩 실력은 줄지 않았겠지 라고 생각하고

C#에서 javascript로 넘어가 javascript/typescript와 react.js를 독학하고 구글링하면서 1달 반동안 헤딩한 결과

주식 계산기 토이 프로젝트와 비디오 스트리밍 '나튜브'를 만들었다.

 

주식 계산기 링크 : https://stock-calculator.vercel.app/home

 

주식 계산기

 

stock-calculator.vercel.app

나튜브 링크 : https://natube-frontend-portfolio.vercel.app/

 

나튜브

 

natube-frontend-portfolio.vercel.app

 

당연히 비전공자에 비해, 새로운 언어를 습득하기에는 어려움은 없었고, 극복하기에도 쉬웠던 건 분명하다.

하지만, 바로 typescript와 react.js를 배워서 그런지.. react.js가 없이 홈페이지를 만들기에는 어려웠다.

html과 css 또한 내가 사용했던 부분들만 알지.. 여러가지를 정확하게 몰랐기에

유튜브 강의로 천천히 html과 css를 공부하면서 포트폴리오 페이지를 만들기로 결정했다.

취업 준비를 하면서, 다시 블로그 또한 글을 열심히 쓸 예정이고

포트폴리오를 만들면서 어려웠던 부분들을 다시 글로 천천히 작성해나갈 예정이다.

 

이 글은 html에 대해서 몰랐던 부분 또는 새롭게 알게 되는 부분들은 천천히 작성해나가려고 한다.

홈페이지를 만드는 내용은 아니기에.. 홈페이지를 만드는 방법에 대해서 알려고 들어오신 분들은.. 다음에 올려드릴게요ㅠㅠ

1. html의 기본 형식

<!DOCTYPE html>  
<html lang="ko"> 
<head>
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width">
  <title>타이틀에 쓰여지는 제목</title>
</head>
<body>

</body>
</html>

1.  DOCTYPE html은, 이 문서의 타입이 html이라는 뜻.


2. html 태그 옆에 lang이라는 어트리뷰트는, 여러가지의 값이 들어갈 수 있는데, ko는 한국어를 뜻한다.


3. <meta charset>은, html 파일의 인코딩을 알려주는 어트리뷰트이다. utf-8로 인코딩을 해서 브라우저에게 text를 전달하기 때문에, charset이 없으면, 한글 또는 특수문자가 깨져서 나올수도 있다.


4. <meta name="viewport"는, iOS 장치로 인해, 거의 표준처럼 사용되고 있고 viewport란, 화면 상의 화상 표시 영역을 뜻한다.

그래서 가장 추천하는 content가, width=device-width인데, 이건 해당 기기의 넓이에 맞게 viewport의 넓이도 조절하는 뜻이다.

만약에 내 pc의 최대 px이 1024px이라면? 1024px만큼, 화면 영역을 표시해주는 것이라고 볼 수 있다.

스마트폰에서는 스마트폰의 최대 넓이만큼이 viewport로 설정된다는 것과 같다.

 

5. <title> 태그는 웹 페이지의 제목을 나타내는 태그이다.

<title>안녕 난 타이틀이야</title>

이런 식으로, 타이틀을 작성했다면,

 

위와 같이, 안녕 난 타이틀이야라고 제목이 변경되는 것을 볼 수 있다.

 

6. <head>와 <body> 태그란?

<head> 태그는, 문서 내부정보를 관리하는 용도로 사용된다.

<body> 태그는, 화면의 모든 출력 내용을 가지는 컨테이너이며, 개발자가 내용을 출력할 수 있는 영역을 뜻한다.

 

 

[ 다음 글 보기 ]

 

https://includecoding.tistory.com/219

 

2. HTML 기본 문법

[ 이전 글 보기 ] https://includecoding.tistory.com/218 1. HTML의 기본 형식 퇴사한 지 1년이 넘은 시점.. 아직 코딩 실력은 줄지 않았겠지 라고 생각하고 C#에서 javascript로 넘어가 javascript/typescript와..

includecoding.tistory.com

 

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

'web & develop > HTML & CSS' 카테고리의 다른 글

[ CSS ] background-color를 투명색으로 만들어보자  (0) 2022.01.26
[ HTML / CSS 공부 ] 5. Grid란?  (0) 2022.01.14
[ HTML / CSS 공부 ] 4. Flexbox란?  (0) 2022.01.14
[ HTML / CSS 공부] 3. CSS 기본구조  (0) 2022.01.14
[ HTML / CSS 공부] 2. HTML 기본 문법 ( HTML에서 자주 사용하는 태그들 )  (0) 2022.01.12
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
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 31
글 보관함