멜팅비의 개발 공부

[Web] 패스트캠퍼스 프론트엔드 강의 스터디 정리-2 본문

개발 공부/[Web 개발]

[Web] 패스트캠퍼스 프론트엔드 강의 스터디 정리-2

멜팅비 2021. 4. 3. 12:39
반응형

무작정 따라하기 실습에 대한 HTHML의 기본 내용을 정리

<!DOCTYPE html>  // html 표준으로 작성된 페이지임을 알림
<html> // 문서 전체의 범위
	<head> // 문서의 정보를 나타내는 범위
	
	</head>
	<body> // 문서의 구조를 나타내는 범위
	
	</body>
</html>

head : 문서의 정보를 나타내는 범위

웹 브라우저가 해석해야 함, 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일 같은 정보를 작성하는 범위(눈에 보이지 않는 정보)

 

body : 문서의 구조를 나타내는 범위

 사용자의 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은 눈에 보여지는 구조를 작성하는 범위

 

css파일 적용 시 head안에 명시를 해야 함

<head>
	<link rel="stylesheet" href="./main.css">
</head>

lang(language) : 문서의 언어를 명시하는 HTML 속성

 

Javascript 파일 적용 시 head안에 명시

<head>
	<script src="./main.js"></script>
</head>

style tag 적용

<head>
	<style>
		div {
			color: red;
		}
	</style>
</head>

 

TAG

title : HTML 문서의 제목을 정의 > 웹 브라우저의 탭에 표시됨

link : 외부 문서를 가져와 연결할 때 사용 (대부분 css 파일)

  • href : 가져올 문서의 경로를 설정하는 속성
  • rel : 가져올 문서와 관계(필수 속성) stylesheet - css / icon - logo(탭에 표시되는 아이콘 favorite icon = favicon)

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

script : 자바스크립트(JS) 파일을 가져오는 경우

  • src : 외부에서 파일을 가져오는 경우 (link)
  • 태그 사이에 작성 : HTML 문서 안에서 작성하는 경우 (style)

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

  • name : 정보의 종류 (viewport : 페이지가 출력되는 영역-모바일 장치에서만 해당됨)
  • content : 정보의 값
  • charset : 문자 인코딩 방식

img : 이미지 출력 태그

  • src : 소스의 경로 (파일 경로 또는 이미지 주소 사용 가능)
  • alt(필수 속성) : 이미지를 출력하지 못할 경우 대체 텍스트를 명시

 

상대 경로 vs 절대 경로

상대 경로

  • ./ : (생량가능) : 현재 위치한 폴더
  • ../ : 상위 폴더

절대 경로

  • http(https) : 원격의 사이트 주소
  • / (//) : 최상위 경로 (루트 경로)

 

링크

  • a 태그 : 페이지를 이동시켜주는 역할
  • href : 이동할 경로

<index.html>

<!DOCTYPE html>
<html lang="ko">
  <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>Index</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/main.js"></script>
    <style>
      div {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <a href="http://naver.com">NAVER</a>
    <a href="/about/about.html">About</a>
  </body>
</html>

<about.html>

<!DOCTYPE html>
<html lang="ko">
<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>About</title>
</head>
<body>
    About!!
</body>
</html>

브라우저는 index라는 이름의 HTML 파일을 가장 먼저 찾아서 출력하려고 함

 

 

 

반응형

'개발 공부 > [Web 개발]' 카테고리의 다른 글

[Web] 패스트캠퍼스 프론트엔드 강의 스터디 정리-1  (0) 2021.04.03
'개발 공부/[Web 개발]' Related Articles more
Comments