[카카오테크캠퍼스 1주차] 무작정 시작하기

⏳ 2023. 4. 10. - 2023. 4. 16.

프론트엔드 개발이란

HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호작용할 수 있도록 하는것

HTML(Hyper Text Markup Language)

페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당

CSS(Cascading Style Sheets)

실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당

JavaScript

콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당

웹 기초

웹앱의 동작원리

웹 어플리케이션은 사용자의 요청(request)과 서버의 응답(response)이 이루어지면서 동작한다.

웹 표준과 브라우저

웹 표준 : 웹에서 사용되는 표준 기술이나 규칙

크로스 브라우징 : 각각 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술 방법

웹에서 사용하는 이미지

비트맵 : 정교하고 다양한 색상을 자연스럽게 표현, 확대/축소 시 계단 현상(품질 저하)

JPG(JPEG), PNG, GIF, WEBP

벡터 : 확대/축소에서 자유롭고 용량 변화 없음, 정교한 이미지의 표현이 어려움

Material Design이란?

고품질 디지털 경험을 구축할 수 있도록 구글에서 만든 디자인 시스템

무작정 시작하기!

Settings

VS Code, Prettier, Auto Rename Tag, Live Server

html의 구조

<!DOCTYPE html> <!-- 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>Document</title> <!-- html 문서의 제목 -->
    <link rel="stylesheet" href="./main.css" /> <!-- CSS 연결 -->
    <script src="./main.js"></script> <!-- JS 연결 -->
  </head>
  <body> <!-- 문서의 구조 -->
    <div>Hello world</div>
  </body>
</html>

상대 경로 vs 절대 경로

상대 경로 : 주변에서 파일의 경로를 찾는다.

절대 경로 : 루트 디렉토리부터 파일까지의 경로를 찾는다.

index.html에서 logo.png의 경로를 나타내는 법

상대 경로 -> ./images/logo.png

절대 경로 -> /images/logo.png

브라우저 스타일 초기화

브라우저마다 기본 스타일이 다르기 때문에(크로스 브라우징) 원하는 스타일을 정확하게 지정하기 위해서는 브라우저 스타일을 초기화하는 작업이 필요하다.

reset.css cdn -> https://www.jsdelivr.com/package/npm/reset-css

jsDelivr - A free, fast, and reliable CDN for JS and Open Source

Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month.

www.jsdelivr.com

<head>
  <title>Document</title>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
  />
  <link rel="stylesheet" href="./css/main.css" />
</head>

html 개요

기본적으로 <열린 태그>내용</닫힌 태그>의 구조

<tag> <!-- 1️⃣ -->
  <tag> <!-- 2️⃣ -->
    <tag>콘텐츠</tag> <!-- 3️⃣ -->
  </tag>
</tag>

부모와 자식 관계

1️⃣은 2️⃣의 부모, 2️⃣는 1️⃣의 자식

2️⃣는 3️⃣의 부모, 3️⃣은 2️⃣의 자식

1️⃣은 2️⃣와 3️⃣의 상위(조상), 2️⃣와 3️⃣은 1️⃣의 하위(후손)

Inline vs Block

Inline : 수평으로 쌓이는 요소, 글자에 비유
width와 height가 콘텐츠 크기만큼 자동으로 줄어든다. -> 인라인 요소는 높이와 너비를 정할 수 없다.
margin과 padding으로 좌우 여백은 사용할 수 있다.
인라인 요소 부모는 자식으로 블록 요소를 사용할 수 없다.

Block : 수직으로 쌓이는 요소, 상자에 비유

Inline-block : 글자 요소이지만 상자 요소가 갖고 있는 특성을 가진 요소
수평으로 쌓이지만, 높이와 너비를 정할 수 있다.

'카카오테크캠퍼스 > 필수과정' 카테고리의 다른 글

[카카오테크캠퍼스 4주차] CSS 속성 (0)	2023.05.06
[카카오테크캠퍼스 3주차] CSS 속성(Property), 단위 (0)	2023.05.06
[카카오테크캠퍼스 3주차] CSS 개요: 상속, 우선순위 (0)	2023.05.06
[카카오테크캠퍼스 3주차] CSS 개요: 선택자 (0)	2023.05.06
[카카오테크캠퍼스 3주차] CSS 개요: 선언 방식 (0)	2023.05.06