프론트엔드 개발
HTML. CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 잇도록 하는것.
- 프론트엔드 : 사용자의 앞에 보이는 사이트 개발
- 백앤드 : 비즈니스 로직(Business Logic)은 웹 사이트가 동작하는데 필요한, 핵심 데이터 처리를 수행하는 알고리즘을 말함.
- 풀스택 개발(Full-stack development) : GUI 프론트엔드부터, 데이터베이스 백엔드 등 모든 소프트웨어 스택을 개발하는 것을 말합니다.
HTML (Hyper Text Markup Languge)
페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당.
하이퍼 텍스트(Hyper Text)는 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동)할 수 있는 텍스트를 말합니다.
EX) 버튼(텍스트)을 의미
EX) 버튼(텍스트)을 의미
CSS (Cascading Style Sheets)
실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당.
JS (JavaScript)
콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당.
웹앱의 동작원리
웹 표준
‘웹에서 사용되는 표준 기술이나 규칙’을 의미
W3C의 표준화 제정 단계의 ‘권고안(REC)’에 해당하는 기술
크로스 브라우징
크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법
비트맵
- 정교하고 다양한 색상을 자연스럽게 표현
- 확대/축소 시 계단 현상, 품질 저하.
- Ex) .png , .jpg 등
JPG (JPEG)
- 손실 압축 방식을 사용한다.
- 표현 색상도(24비트, 약 1600만 색상)가 뛰어남
- 이미지의 품질과 용량을 쉽게 조절 가능
- 가장 널리 쓰이는 이미지 포맷
PNG
- 비손실 압축
- 8비트(256색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
- Alpha Channel 지원(투명도)
- W3C 권장 포맷
WEBP
- JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷
- 투명도 지원
- gif 같은 애니메이션 지원
- 단 IE에서 지원 불가 사용전 하위호환성 체크하기!
벡터
- 확대/축소에서 자유로움, 용량 변화가 없음.
- 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움
- Ex) .svg
SVG
- 해상도의 영향에서 자유로움
- CSS와 JS로 제어 가능
- 파일 및 코드 삽입 가능
- Ex) 구글의 로고는 .svg 확장자 파일이다.
벡터
- 확대/축소에서 자유로움, 용량 변화가 없음.
- 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움
- Ex) .svg
SVG
- 해상도의 영향에서 자유로움
- CSS와 JS로 제어 가능
- 파일 및 코드 삽입 가능
- Ex) 구글의 로고는 .svg 확장자 파일이다.
시작하기
<!DOCTYPE html> : 문서(페이지) HTML 버전을 지정
<html> </html> : HTML 문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할.
<head> </head> : 문서의 **정보**를 나타내는 범위 (EX 페이지 제목, CSS 등)
<body> </body> : 문서의 **구조**를 나타내는 범위 (로고, 헤더, 버튼 등)
연결하기
CSS 연결하기
<head> 태그 내부에 <link> 태그를 이용하여 css 연결
head 태그에 link 선언 후 연결하고 싶은 css 파일 url 설정
<head>
<link rel="가져올 문서와 관계" href="가져올 문서의 경로">
<link rel="stylesheet" href="./main.css">
</head>
JS 연결하기
<head> 태그 내부에 <script> 태그를 이용하여 js 연결
head 태그에 link 선언 후 연결하고 싶은 css 파일 url 설정
<head>
<script src="JS 파일 경로"></script >
<script src="./mina.js"></script >
</head>
상대 경로와 절대 경로
상대 경로
./ 주변(생략가능)
../ 상위 폴더
../ 상위 폴더
절대 경로
http (https) 원격
/ (//) 루트경로
/ (//) 루트경로
브라우저 스타일 초기화
- https://www.jsdelivr.com/package/npm/reset-css 클릭
- 귀찮으면 아래 절대경로 사용
- 반드시 사용할 css보다 최상단에 위치 해야함
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.css">
min : 용량 줄인 파일 공백이 없음
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
Emmet
https://docs.emmet.io/cheat-sheet/ 돔구조 작성할떄 빠르게 작성 가능한 기능
HTML 개요
HTML
HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 언어입니다.
- HT - HyoerText : 문서와 문서를 연결
- M - Markup : 마크업, 태그
- L - Language : 언어
- 즉 HTML이란? 문서와 문서로 연결된 태그 언어를 말합니다.
기본문법
태그를 작성하는 기본 문법
<태그>내용</태그>
부모와 자식 관계
<!-- 부모 요소 -->
<태그>
<!-- 자식 요소 -->
<태그>내용</태그>
<!-- //자식 요소 -->
</태그>
<!-- //부모 요소 -->
글자와 상자
블럭 요소는 박스, 인라인 요소는 텍스트를 의미합니다.
인라인(Inline)
- 포함한 콘텐츠 크기만큼 자동으로 줄어듬!
- 글자를 마늘기 위한 요소들
- 요소가 수평으로 쌓임
- 콘텐츠 영역을 설정하는 용도
- 글자는 가로사이즈와 세로사이즈 지정 불가
- 인라인 요소 안에는 블럭요소 사용 불가
- 독립된 텍스트 영역으로, 한 줄에 여러 개의 인라인 요소를 표현 할 수 있습니다.
- 인라인 요소에는 블록 요소가 포함 될 수 없지만, 인라인 요소는 포함 될 수 있습니다.
-
<span>,<a>,<strong>,<em>,<img>
블록(Block)
- 부모 요소의 크기만큼 자동으로 늘어남!
- 상자(레이아웃)를 만들기 위한 요소
- 콘텐츠 영역을 설정하는 용도
- 요소가 수직으로 쌓임
- 독립된 박스 영역으로, 한 줄에 하나에 블록 요소만 표현 할 수 있습니다.
- 블록요소에는 블록요소와 인라인 요소를 포함 할 수 있습니다.
-
<div>,<p>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<ul>,<li>
HTML Reference
전역 속성
title="요소의 정보나 설명을 지정"
style=”요소에 적용할 스타일(CSS)을 지정”
class=”요소를 지칭하는 중복 가능한 이름” *중복가능
id=”요소를 지칭하는 고유한 이름” *중복불가
data-이름=”요소에 데이터를 지정”
defer : script 태그에 사용됨 , HTML 구조가 준비된 후 JS를 해석하겠다는 의미를 가지고 있음
태그
태그란? 정보를 정의하는 방식을 정의합니다.
- 태그는 열린태그와 닫는 태그가 있습니다.
- 닫는 태그에는 "/" 잇어야 합니다.
- 닫는 태그가 필요없는 태그도 있습니다.
- HTML5에서는 "/"가 생략이 가능합니다.
| Tag | 설명 | Content | Version |
|---|---|---|---|
<h1>~<h6> |
제목 영역을 성정합니다. | Block | HTML4 |
<div> |
문서의 영역을 나누거나 그룹화 할 때 사용합니다. | Block | HTML4 |
<ul> |
순서가 없는 목록을 정의합니다. | Block | HTML4 |
<ol> |
순서가 있는 목록을 정의합니다. | Block | HTML4 |
<li> |
목록의 항목을 정의합니다. | Block | HTML4 |
<p> |
문단(paragraph)을 정의합니다 | Block | HTML4 |
<span> |
인라인 요소 그룹화를 정의합니다. | Inline | HTML4 |
<table> |
표를 만드는 태그이며 전체구성 레이아웃을 만드는 데도 사용 한다. | Block | HTML4 |
<tr> |
같은행에 넣을것을 묶어준다.(행,가로줄) | Block | HTML4 |
<th> |
표의 제목을 쓰는 역활이다 . | Block | HTML4 |
<td> |
항목하나를 묶어주는것이다.(칸,세로줄) | Block | HTML4 |
<tbody> |
table 의 body 부분이다. | Block | HTML4 |
<thead> |
table 의 head 부분이다. | Block | HTML4 |
<tfoot> |
table 의 footer 부분이다 . | Block | HTML4 |
<col> |
표에서 열의 속성 값을 정의하는데 각 열에 반복적으로 스타일을 적용하는 대신 전체 열의 스타일을 적용한다. | Block | HTML4 |
<colgroup> |
표 안에서 셀(열) 을 그룹화하는 데 사용되며 col 태그와 마찬가지로 전체 스타일을 적용한다. | Block | HTML4 |
<br> |
줄바꿈 태그이다. | Block | HTML4 |
<strong> |
중요한 의미를 갖는 텍스트를 설정합니다. | inline | HTML4 |
<em> |
텍스트를 강조할 때 사용합니다. | inline | HTML4 |
<b> |
다른 텍스트와 단순 구별하고 싶을 때 사용합니다. | inline | HTML4 |
<mark> |
중요성과 강조를 고려하지 않은 단순 참고용 표시를 할때 사용합니다. | inline | HTML5 |
<address> |
주소를 입력할 때 사용한다. | inline | HTML5 |
<section> |
일반적으로 문서의 컨텐츠 섹션을 의미한다. | block | HTML5 |
<nav> |
컨텐츠의 독립적인 항목을 나타내는 컨텐츠를 의미한다. | block | HTML5 |
<main> |
컨텐츠의 독립적인 항목을 나타내는 컨텐츠를 의미한다. | block | HTML5 |
<aside> |
웹 문서의 메인 컨텐츠와 관련된 사이드 컨텐츠 영역을 나타낸다. | block | HTML5 |
<header> |
웹 문서의 헤더 영역을 나타낸다. | block | HTML5 |
<footer> |
웹 문서의 풋터 영역을 나타낸다. | block | HTML5 |
section
- 일반적으로 문서의 콘텐츠 색션을 의미합니다.
- 콘텐츠와 관련된 한 가지 주제 영역을 말합니다.
- section 요소는 문장이나 문서의 스타일링 요소가 아니기 때문에 편의나 영역을 위함이라면 div 태그가 좋습니다.
- section 요소는 제목이 없는 경우는 섹션이라고 할 수 없기 때문에 제목을 제공해야 합니다.
- section 요소는 일반적인 주제가 아니라면 구체적인 요소(article, aside, nav)를 사용하는 것이 더 적절합니다.
article
- 콘텐츠의 독립적인 항목을 나타내는 콘텐츠를 의미합니다.
- article은 포럼, 신문기사, 잡지, 블러그 항목, 게시판 글 등 콘텐츠의 독립적인 항목을 나타냅니다.
- section은 하나의 주제를 나타낸다면, article은 주제를 묶은 독립적인 콘텐츠입니다.
- section 요소 안에는 article 요소를 쓸 수 있으며, article 요소 안에도 section 요소를 쓸 수 있습니다.
nav
- 페이지 내에서 이동 할 수 있는 네비게이션 링크 그룹입니다.
- nav는 문서의 핵심적인 페이지의 메뉴 및 서브 메뉴에서 사용하고, 문서에서 주로 한 번 사용합니다.
- 문서 안에 링크가 포함된 콘텐츠는 nav를 사용하지 않습니다
- nav는 핵심적인 네비게션에 사용해야 하므로 foot 내에 링크 그룹의 사용은 적절하지 안습니다.
main
- 웹 문서의 주요 콘텐츠 영역을 나타낼 때 사용합니다.
- main은 웹 페이지에서 한 번만 사용 할 수 있으며, 접근성과 검색영역에 노출을 향상시킵니다.
- article, aside, footer, header, nav를 하위 요소로 사용할 수 있습니다.
aside
- 웹 문서의 메인 콘텐츠와 관련된 사이드 콘텐츠 영역을 나타냅니다.
- aside는 메인 콘텐츠와 관련된 사이드이 정보, 광고, 등 부준적인 정보를 그룹화 할 때 사용합니다.
header
- 웹 문서의 해더 영역을 나타냅니다.
- header 에는 웹 페이지에 대한 소개, 내비게이션 영역, 테이블 영역, 검색 영역, 로고 영역 을 포함한 영역입니다.
- header는 제목 태그가 포함 될 수 있으며, 필수 조건은 아닙니다.
- header 는 색션 콘텐츠가 아닌 그룹화하기 위한 요소이므로 section 요소를 포함 할 수 없습니다.
footer
- 웹 문서의 footer 영역을 나타냅니다.
- footer 는 저작권 정보, 회사 정보, 관련 링크, 주소, 바닥글, 사이트 정보 등을 포함하는 콘텐츠 영역입니다.
- footer는 섹션 콘텐츠가 아닌 그룹을 나타내는 요소이며, section, article, aside 등을 포함 할 수 있습니다.
HTML5 에서 새로 생긴 태그
- dialog : 대화를 의미있는 콘텐츠로 만들고자 할때 사용하며 <dt>에 말하는 사람 <dd>에 내용을 작성한다.
- figure : 이미지, 그래프, 사진, 예제 코드, 비디오, 일반 텍스트등을 하나로 묶어 블록을 형성하고 캡션을 포함시켜 서로의 관계를 명확히 구조화 시킨다. 반드시 메인이 되는 문서 안에 삽입될 필요는 없으며 페이지 옆이나 참조용 별도 페이지등에 넣어도 크게 상관없는 내용을 지정할 수 있다.
- mark : 형광펜으로 특정단어들을 칠해서 강조하는 효과와 비슷하며 문장내의 중요한 부분에 강조효과를 넣는 <em>, <strong>과는 다른 개념이다. 시각적 주목효과 만을 노리며 스타일이 정의되어 있지 않으므로 직접 효과를 작성한다.
- time : 날짜와 시간을 기계가 이해할 수 있게 명확하게 인코딩하면서 사람도 이해할 수 있게 노출시킨다. YYYY-MM-DD(날짜) / HH:MM:SS(24시의 형태) 로 표기하고 동시에 나타낼 경우, 2013-01-30T12:00:00+09:00 와 같이 T문자로 구분하고 문자열 끝에 타임존 정보를 더하면 된다.(time요소에 지정할 수 있는 일시의 문자열 형태는 ISO-86이라는 표준 규격에 정해져 있다.)
- meter : 통화, 인구, 점수, 치수와 같은 숫자들과 같이 특정 범위내에 있는 숫자 값을 시스템에 인지시킬 필요가 있을때 사용할 수 있다. '%'나 '분수'형태로도 사용할 수 있다.
- value : 실제로 측정된 진짜 데이터를 지정한다.
- title : 튤팁 입력을 할수 있다.
- high : 입력된 데이터들 중의 사용자가 허용할 수 있는 최대값을 지정한다.
- low : 입력된 데이터들 중의 사용자가 허용할 수 있는 최저값을 지정한다.
- max : meter에서 인식할 수 있는 최고 값을 지정한다.
- min : meter에서 인식할 수 있는 최저 값을 지정한다.
- optimum : 최적의 측정값을 지정해 준다. min으로 설정된 최저값과 max로 설정된 최대값 사이에서 가능한 한 최고 적합한 값을 지정해준다
- progress : 다운로드 진척 상태를 알려줄때 유용하게 사용할수 있는 태그로 최대값 max 속성과 현재 다운로드한 값 value 속성을 가진다. 이는 자바스크립트와 연동하여 동적으로 다운로드 상태를 제공할 수 있다.
- ruby : 한자, 일어등의 발음등을 표기하기위해 사용하며 <rp>와 <rt>를 사용한다.5.5pt의 작은 글씨를 사용해 첨언을 넣는 영국 출판문화에서 기원한 단어.
- details : HTML 문서에서 추가적인 설명을 붙일때 사용하며 워드프로세서의 '각주' 역할과 비슷하다. <summary> 태그와 함께 사용되며 기본적으로 <details>는 '감춤'상태이다. summary 부분만 보이도록 되어있고 그 외 콘텐츠는 기본적으로 감추어져 있는 것이다. details 콘텐츠를 모두 펼쳐 놓기 위한 속성이 있는데 'open' 속성이다.
SVG
스케일러블 벡터 그래픽스(Scalable Vector Graphic, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다.