[1주차 - 2022.04.15] HTML

25034 단어 htmlhtml

HTML 구조

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    
  </body>
</html>

DOCTYPE

DTD(Document Type Definition)이라고도 불리는 DOCTYPE은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도이다.

html 태그

문서의 전체 범위를 나타내며, HTML 문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할을 한다.

head 태그

문서의 정보를 나타내는 범위이며, 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)같은, 웹 페이지의 보이지 않는 정보를 작성하는 범위이다.

body 태그

문서의 구조를 나타내는 범위이며, 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의 보여지는 구조를 작성하는 범위이다.


CSS, JS 연결하기

CSS 연결

head 태그 내부에 link 태그로 연결하고 싶은 CSS파일을 연결할 수 있다.
href 속성에 CSS파일의 위치를 넣는다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  
</body>
</html>

JS 연결

head 태그 내부에 script 태그로 연결하고 싶은 JS파일을 연결할 수 있다.
src 속성에 JS파일의 위치를 넣는다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
  <script src="./main.js"></script>
</head>
<body>
  
</body>
</html>

정보를 의미하는 태그

title 태그

브라우저의 탭을 보면 나타나는 HTML 문서의 제목(title)을 정의한다.

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <title>Document</title>
</head>
<body>
  
</body>
</html>

link 태그

외부 문서를 가져와 연결할 때 사용한다. (대부분 CSS 파일)

  • rel: 가져올 문서와의 관계
  • href: 가져올 문서의 경로

style 태그

스타일(CSS)를 HTML 문서 안에서 작성하는 경우에 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      color: red;
    }
  </style>
</head>
<body>
  
</body>
</html>

script 태그

1) 자바스크립트 파일 가져오는 경우와 2) 자바스크립트를 HTML 문서 안에서 작성하는 경우 2가지가 있다.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 1번 -->
  <script src="./main.js"></script>
  <!-- 2번 -->
  <script>
    console.log('Hello world!')
  </script>
</head>
<body>
  
</body>
</html>

meta 태그

HTML 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에 제공한다.

  • charset: 문자인코딩 방식
  • name: 정보의 종류
  • content: 정보의 값

💡 name="viewport" 속성
모바일에서 웹 페이지의 가로 너비를 모바일 환경의 가로 너비와 일치시키거나, 웹 사이트가 처음 출력될 때 확대/축소 여부나 정도를 어떻게 결정하겠다 등 몇 가지 정보를 META 태그로 명시하는 개념

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

경로

상대 경로

  • ./ (생략 가능): 현재 디렉토리
  • ../: 상위 디렉토리로 올라감

절대 경로

  • http (https)
  • / (//): 루트경로

Codepen.io

Codepen.io는 새로운 프로젝트를 만들고 구성하지 않아도 웹 페이지 내에서 간편하게 코드를 작성하고 실행할 수 있는 사이트이다.

브라우저 스타일 초기화

각각의 브라우저가 제공하는 스타일이 다를 수 있기 때문에 브라우저의 스타일을 초기화해놓은 상태에서 시작하는 것을 권장한다.
reset.css 제공 사이트로 접속을 하면 화면에 reset.min.css라는 파일을 선택해 HTML 코드를 복사하여 붙여넣는다.
브라우저의 스타일을 초기화하는 CSS를 가져오는 것이기 때문에 다른 CSS파일보다 더 먼저, 더 위에 작성을 해줘야한다.

파일명.min.확장자와 같이 min 키워드는 파일이 난독화나 경량화되었다는 것을 의미한다!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  
</body>
</html>

Emmet

우리가 html 파일에서 img를 입력하고 탭키를 누르면 자동으로 img 태그가 생성되고, div.container 를 입력하고 탭키를 누르면 container 클래스를 가진 div 태그가 생성되는 것을 볼 수 있다.
이렇게 코드를 자동으로 완성하는 기능을 Emmet이라고 부른다.

Emmit 문법

C#프로그래밍 08 : 상속성
Lowest Common Ancestor (LCA)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage