[멋사] 프론트엔드 스쿨 7기 학습 230705

챈스·2023년 7월 10일

멋쟁이사자처럼 FES 7기

목록 보기

4/30

멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

1. 폴더 및 파일 이름 규칙

공백없이 영어소문자, 언더바( _ ) 대신 하이픈 ( - ) 사용하기
🤷🏻‍♀️Why? 의도하지 않은 수정이 일어날 수 있기 때문

코드 컨벤션: 읽고 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약(=코드 규칙)

영어 소문자: 컴퓨터와 웹서버는 영어 대소문자를 구분하기 때문에 소문자로 일관되게 작성하면 오류를 줄일 수 있음 ex) 텍스트 일괄 교체
공백: 브라우저들과 웹서버, 프로그래밍 언어들은 공백을 일관되게 처리하지 않기 때문에 오류 발생할 수 있음
하이픈( - ): 구글 검색 엔진은 하이픈을 단어 구분자로 취급

📌 폴더 및 파일 이름을 잘 작성한다면 SEO(검색 엔진 최적화)에도 도움이 됨!

2. HTML/CSS 파일구조 및 경로

index.html
├ images
│ └ logo.png
├ css
│ ├ reset.css
│ └ style.css
└ js
.... └script.js

상대경로

./ : 현재 폴더
../ : 상위 폴더
./폴더명/ : 하위 폴더
index.html 기준으로 style.css 파일은 ./css/style.css / /css/style.css
style.css 기준으로 logo.png 파일은 ../images/logo.png

절대경로

http://, https://로 시작하는 도메인 네임이 포함된 인터넷상의 유일한 절대적인 경로(URL)

3. WEB

Web (WWW, W3, World Wide Web)

거미줄이라는 의미도 있지만, World Wide Web의 재귀적 용어
웹은 인터넷을 통해 접근할 수 있는 공용 웹페이지의 상호 연결 시스템

Web !== Internet

웹은 인터넷과 다르며, 웹은 인터넷을 기반으로 한 수많은 서비스 중 하나

💻 웹 개발의 대표 기술: HTML / CSS / JS

HTML

HyperText Markup Laguage
HyperText: 정해진 순서 없이, '참조'를 통해 한 문서에서 다른 문서로 접근할 수 있는 텍스트
Markup Laguage: 태그 등을 이용하여 문서나 데이터의 구조를 표시하는 언어

HTML은 프로그래밍 언어가 아닌 웹 콘텐츠의 의미와 구조를 정의하는 마크업 언어
확장자 .html

CSS

Cascading Style Sheet

CSS는 웹 페이지의 모양을 표현하는 언어
확장자 .css

JS

JavaScript

JavaScript는 웹 페이지의 기능과 동작을 구현하는 언어

🧐생각해보기!
웹페이지 = 홈페이지
집을 짓는다고 생각하면,
HTML은 구조물(뼈대),
CSS는 인테리어(디자인),
JavaScript는 집의 시스템(동적 움직임) ex)수도, 전기, 가스

🚨 주의사항
html은 문법에 오류가 났을 경우, 알려주지 않고 웹브라우저가 임의로 결과를 보여주기 때문에 오류를 방지하기 위해 마크업 검사 습관을 들려야 함!
https://validator.w3.org/

4. HTML 문서해부

<!DOCTYPE html>
<html lang="ko-KR">
  <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>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
		<script src="./script.js"></script>
  </body>
</html>

`<!DOCTYPE html>`

'이 문서는 html Living Standard 문서!' 라는 의미
html로 작성된 문서임을 알려주는 doctype.

`<html>`

HTML 문서의 루트, 최상단 요소
lang속성을 통해 해당 페이지 주 언어가 무엇인지 설정함
주 언어 설정은 검색엔진, 스크린리더, 번역 기능 제공 등에 영향을 미침
스크린리더가 음성 표현에 사용할 언어를 선택할 때 도움 됨

`<head>`

문서 정보(메타데이터)를 담음
검색 엔진을 위한 다양한 정보들이 담기는 곳
사용자에게 제목(title), 파비콘(favicon), 뷰포트(viewport) 정보 등이 보이게 됨

meta(메타데이터) : 어떤 목적을 위해 만들어진 데이터
<meta charset="utf-8"> : uft-8은 전 세계적인 언어들을 지원하도록 하며, 어떤 언어로 작성하더라도 웹페이지를 읽을 수 있음. 국제적인 코드 규약.

`<title>`

브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의
텍스트만 포함(특수 문자X)
검색 엔진: 인터넷을 사용하는 사용자가 제목을 보고 탐색할 페이지를 선택
약 60자를 넘지 않아야 함
웹 접근성(스크린 리더)을 고려하여 하위페이지 내용 먼저 노출

`<link>`

현재 문서와 외부 리소스의 관계 명시
외부 스타일 시트, 폰트, 파비콘을 연결할 때 사용
head 요소 내부에만 위치할 수 있음
rel: relations(관계). 대상 파일의 속성

href: hyper-references(경로). 연결 시 참조할 파일의 위치

<html>
 <head>
  <!-- 스타일 시트 링크 -->
  <link rel="stylesheet" href="style.css">
  <!-- 폰트 링크 -->
  <link rel="stylesheet" href="font.ttf">
  <!-- 파비콘 링크 -->
  <link rel="shortcut icon" href="favicon.ico"> 
</head>
<body>
</body>
</html>