Web Development (2)

Web Development (2)

1. HTML 기초

!DOCTYPE html
문서의 페이지 html 버전 지정
*public ~ : XHTML

html
문서의 전체 범위 / html 문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할

head
문서의 정보를 나타내는 범위 (눈에 보이지 않는 정보)
ex) 웹브라우저가 해석해야할 제목, 설명, 사용할 파일의 위치, 스타일 같은 웹페이지에 보이지 않는 정보들

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

2. 경로

상대경로
./주변../상위폴더

• ex)
  css파일 기준
  ../images/image.png = /images/png (port5500의 절대경로, 앞에 생략)

절대경로
http(s) = /

• ex)
  원격에서 불러오는 것
  https ://heropy.blog/images/heropy.png

*VS 오른쪽 아래 port5500 = 로컬 환경

3. HEAD 기초

CSS & JS 연결하기

1) CSS (link 탭)

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

2) JS (script 탭)

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

style

html 문서 안에서 직접 style 작성하는 경우 (CSS X)

  <style>
    div{
      text-decoration: underline;
    }

title

문서 제목

<title>anthony</title>

link

외부문서를 가져와 연결할 때 사용

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<link rel="stylesheet" href="./css/main.css">
  ㅤㅤ
rel(relation) : 가져올 문서와의 관계
href(hypertext reference) : 가져올 문서의 경로

script

1) 자바 스크립트 파일 가져오는 경우 (src O)

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

2) 자바 스크립트를 html 문서 안에서 작성하는 경우 (src X)

console.log 직접 입력

meta 정보

1) 문자 인코딩 방식

<meta charset="UTF-8">

2) 정보 종류 (name) & vieport(페이지 출력 영역 - 모바일만 해당)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3) 정보 내용 (값, content)

<meta http-equiv="X-UA-Compatible" content="IE=edge">
제작자, 내용 키워드, 브라우저 혹은 검색엔진이 알아야할 것

4. BODY 기초

a 링크

about의 경우 index 파일이 있으면 자동으로 찾음

<a href="https://naver.com">NAVAER</a>
<a href="/about/about.html">About</a>
<a href="/about"></a>

해당 페이지에서 다시 홈으로

<a href="/"></a>

*웹에서 li 태그 : hov (호버: CSS 선택자 파트에서 학습하는 여러 가상 클래스 선택자에 관한 내용을 임시로 적용해볼 수 있는 메뉴)

5. CSS 기초

CSS 초기화

reset.css.cdn

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
다른 link보다 먼저 해줘야함

tab키 눌러서 바로 나오게하는 꿀팁

div>ul>li*s{$}

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

본 게시글은 fastcampus 박영웅강사 수업을 듣고 개인적으로 정리한 내용임을 밝힘.