커리큘럼을 보면 오늘을 제외하고 매일 퀴즈가 있고, 퀴즈가 대부분 각 강의 회차의 형광펜으로 하이라이팅 된 부분에서 나온다고 하여 그 부분 위주로 공부한 것들을 정리하려고 한다.
강의 영상은 패스트캠퍼스 온라인 강의 [프론트 개발 올인원 패키지 with React Online] 이며 1회차부터 7회차 까지 진행하였다.
Part 1. HTML & CSS 첫걸음 / 개요
📌 HTML, CSS 그리고 JS
HTML
HTML은 웹의 구조를 만드는 데에 사용하는 언어 --> 뼈대라고 생각하면 편할듯
CSS
CSS는 HTML이 실제 표시되는 방법을 지정하여 구조를 꾸며서 웹의 시각적인 표현을 담당하는 언어 --> HTML로 만든 구조를 예쁘게 꾸며서 화면에 표시하게 해줌
JS
JS는 HTML, CSS로 만든 화면의 웹 페이지를 동적으로 꾸며주는 역할을 하는 프로그래밍 언어로 웹의 동적 처리를 담당한다.
📌 웹 표준과 웹 접근성
웹 표준
웹에서 사용되는 표준 기술이나 규칙을 의미하며 W3C의 권고안에서 나온 기술들이 여기에 해당된다.
표준화 제정 단계는 다음과 같다.
-
Working Draft (WD): 초안
-
Candidate Recommendation (CR): 후보권고안
-
Proposed Recommendation (PR): 제안 권고안
-
W3C Recommendation (REC): 권고안 --> 이 단계까지 와야 표준이 되는 것
크로스 브라우징
구글 크롬, MS 엣지, 네이버 웨일과 같은 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술과 방법
인터넷 익스플로어의 경우 웹 표준화가 잘 안되어 있어서 크로스 브라우징 하는 것이 힘들 수도 있음
웹 접근성
웹 접근성이란 정상적인 웹 콘텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 웹 컨텐츠를 제작하는 방법
웹 콘텐츠 제작기법
- 인식의 용이성
- 운용의 용이성
- 이해의 용이성
- 견고성
정보 통신 보조기기
장애인이나 몸이 불편한 분들이 정보 통신 보조기기를 통해 웹 콘텐츠에 접근할 수 있음
웹 접근성 품질인증 마크
장애인 및 고령자가 웹 사이트 이용에 불편이 없도록 웹 접근성 표준지침을 준수한 우수 사이트에 대해 웹 접근성 수준을 인정하고 이를 상징하는 품질 마크를 부여하는 인증제도
Part 2. HTML & CSS 첫걸음 / HTML
📌 기본 문법
기본 형태
태그는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가진다.
<h1>안녕하세요</h1>
<p>안녕하세요 반갑습니다.</P>위와 같이 태그는 열리고 닫히는 구조를 가지고 있으며 이를 한 쌍으로 취급하고 무조건 마지막에 닫을 때 /(슬래쉬)를 붙여야함.
📌 속성(Attributes)과 값(Values)
태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다.
<img src="./cat.jpg" alt="고양이" />img 태그는 이미지를 삽입할 때 사용하여 src와 alt가 필수고 src는 이미지의 경로 위치, alt는 이미지가 나타나지 않을 시 대체 텍스트를 의미함. img의 경우 닫히는 태그가 따로 존재하지 않고 마지막에 < img / > 이렇게 슬래쉬로 닫아서 끝내며 이러한 것들을 빈 태그라고 함
📌 부모 요소(Parent Element), 자식 요소(Child Element)
태그A가 태그B의 콘텐츠로 사용되면, 태그 B는 태그 A의 부모 요소, 태그 A는 태그 B의 자식요소라고 함
<div class="fruits">
<h1>과일 목록</h1>
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
<li>파인애플</li>
</ul>
</div>div는 h1, ul의 부모요소이며 ul은 li의 부모요소이다. 이와 반대로 h1, ul은 div의 자식 요소이고 2단계 이상 차이나면 각각 조상요소, 후손 요소라고 한다.
Part 3. HTML & CSS 첫걸음 / CSS
📌 기본 문법과 선택자의 역할
div {
color: blue;
font-size: 30px;
}
선택자 {
속성: 값;
속성: 값;
}위와 같은 형식이며 선택자는 HTML에 스타일(CSS)를 적용하기 위해 HTML의 특정한 요소를 선택하는 사인이다.
📌 속성(Properties)과 값(Value)
속성과 값은 크기나 색과 같은 스타일을 지정할 때 사용한다.
div {
color: red;
font-size: 20px;
width: 400px;
height: 100px;
}codepen example
Part 4. HTML / 개요, 요소 - 주요범위 & 메타데이터
📌 블록(Block), 인라인(Inline) 1
블록 요소
- div
- h1
- p
특징
- 사용가능한 최대 가로 너비를 사용한다
- 크기를 지정할 수 있다.
- (width: 100%; height: 0; 로시작)
- 수직으로 쌓임
- margin, padding 위, 아래, 좌, 우 사용 가능하다
- 레이아웃
인라인 요소
- span
- img
특징
- 필요한 만큼의 너비를 사용한다
- 크기를 지정할 수 없다.
- (width: 0; height: 0; 로 시작)
- 수평으로 쌓이고 위에서 아래로 작성하게 되면 자동적으로 띄어쓰기가 적용됨. 줄 바꾸지 않고 수평으로 코드 작성하면 띄어쓰기 적용은 안됨
- margin, padding 위, 아래는 사용을 할 수 없다 (padding 위, 아래는 시각적으로 된 것 처럼 보이지만 실제 레이아웃(거리두는 것)에는 적용이 안되어서 안된다고 보면 됨)
- TEXT
span {
display: block;
}다음과 같이 display 속성의 값을 변경하여 span과 같은 인라인 요소들을 block화 시킬 수 있음.
📌 주요범위 & 메타데이터 - HTML, HEAD, BODY, TITLE
HTML
검색엔진은 HTML태그 안에 있는 것들을 읽고(html밖에 적으면 안된다는 의미) html안의 속성 값 중에는 lang이라는 속성이 있는데 언어 종류와 관련한 속성임
!DOCTYPE html의 경우 문서의 타입이 무엇인지 알려주는 것
<!DOCTYPE html>
<html lang = "ko">
</html>HEAD
문서의 정보를 표시(html 문서의 제목, 기타 정보, 스타일 직접 입력, 스타일 외부에서 가져와서 연결)
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
<meta name="author" content="hustle-dev">
<meta name="description" content="hustle-dev의 사이트 입니다!">
<link rel="stylesheet" href="./main.css">
<base href="./css/"> // 기준이 되는 상대경로 루트를 만들어 줌
</head>BODY
문서의 구조를 표시
Part 5. HTML / 요소 - 콘텐츠 구분 & 문자 콘텐츠
📌 BODY 내 구조 개념
기존 Github example code를 작성하였을 시에는 모두 div로만 작성하였는데
기존코드
<body>
<div class="header">
<div class="container">
<div class="container-left clearfix">
<div class="logo">
<img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="Github Logo">
</div>
<div class="menu clearfix">
<div class="menu-item">Personal</div>
<div class="menu-item">Open Source</div>
<div class="menu-item">Business</div>
<div class="menu-item">Explore</div>
</div>
</div>
</div>
</div>
</body>변경 후 코드
<body>
<header>
<div class="container">
<div class="container-left clearfix">
<div class="logo">
<img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="Github Logo">
</div>
<ul class="menu clearfix">
<li class="menu-item">Personal</li>
<li class="menu-item">Open Source</li>
<li class="menu-item">Business</li>
<li class="menu-item">Explore</li>
</ul>
</div>
</div>
</header>
</body>다음과 같이 Body내의 의미가 있는 요소들로 바꾸어서 사용이 가능하다. 의미에 맞는 요소들을 사용하는 것이 중요함
📌 콘텐츠 구분 - HEADER
Header 요소는 소개나 탐색을 돕는것의 그룹을 나타냄
header 요소는 후손이 될 수 없고 오로지 전역 속성만을 포함함
<address>
<header>
</header>
</address>잘못된 예시
📌 콘텐츠 구분 - FOOTER
Footer는 가장 가까운 구획화 콘텐츠나 구획화 루트의 푸터를 나타내고 일반적으로 작성자 구획, 저작권 데이터, 관련된 문서의 링크에 대한 정보를 포함함
footer 요소 또한 후손이 될 수 없음
📌 콘텐츠 구분 - H1~H6
H1~H6 요소는 6단계의 문서 제목을 구현함
마찬가지로 전역 속성만 포함함
사용일람
- 사용자 에이전트가 제목의 정보를 사용해 자동으로 문서 콘텐츠의 표를 만드는 등의 작업을 수행할 수 있음
- 글씨크기를 위해 사용하는 것은 비추천(css font-size사용)
- h1 h2 h3 이렇게 순서대로 사용하는 것을 추천
- 페이지 당 하나의 h1사용
📌 콘텐츠 구분 - MAIN
Main 요소는 문서나 앱 body의 주요 콘텐츠를 나타냄. 주요 콘텐츠 구역은 문서의 핵심 주제나 애플리케이션의 핵심 기능성에 대해 부연, 또는 직접적으로 연관된 콘텐츠들로 이루어짐
- 인터넷 익스플로어에서 호환이 안됨
- 한 문서에 하나의 main 요소만 포함 가능
📌 콘텐츠 구분 - ARTICLE
독립적으로 구분되거나 재사용 가능한 영역을 설정
- 일반적으로 <h1>~<h6>를 포함하여 식별
- 작성일자와 시간을 <time> datetime 속성으로 작성
📌 콘텐츠 구분 - SECTION
문서의 일반적인 영역을 설정
- 일반적으로 <h1>~<h6>를 포함하여 식별
div와 달리 의미없이 사용하진 않고 영역이나 제목을 포함하여 사용
📌 콘텐츠 구분 - ASIDE
문서의 별도 콘텐츠를 설정
(보통 광고나 기타 링크 등의 사이드 바 설정)
📌 콘텐츠 구분 - NAV
다른 페이지 링크를 제공하는 영역을 설정
(Navigation, 보통 메뉴 (home, about, contact), 목차, 색인 등을 설정)
📌 콘텐츠 구분 - ADDRESS
body, article, footer 등에서 연락처 정보를 제공하기 위해 포함해서 사용
주소 -> 이메일, 전화번호, 주소
📌 콘텐츠 구분 - DIV
본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정 --> 막 사용
(Division, 꾸미는 목적으로 사용)
📌 문자 콘텐츠 - OL, UL, LI
각 항목 li의 정렬된 목록 ol이나 정렬되지 않은 목록 ul을 설정
- ol과 ul은 자식으로 li만 포함 가능
- li는 단독으로 사용할 수 없으며 ol이나 ul에 자식으로 포함되어야 함
- 정렬된 목록 ol의 항목 순서는 중요도를 의미할 수 있음
📌 문자 콘텐츠 - DL, DT, DD
용어(dt)와 정의(dd) 쌍들의 영역 (dl)을 설정
(Description List, Definition Details, Definition Term)
- <dl>은 <dd>, <dt>만을 포함해야 함.
- 키(key)/값(value) 형태를 표시할 때 유용.
<dl>
<dt>Coffee</dt>
<dd>Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</dd>
<dt>Milk</dt>
<dd>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</dd>
</dl>스타일의 한계 때문에 (dl dt dd)를 (ul li dfn p)로 바꾸어서 사용하기도 함
위에서 언급한 모든 요소들은 display: block; 이다
Part 6. HTML / 요소 - 인라인 텍스트 & 수정
📌 인라인 텍스트 - A
다른 페이지, 같은 페이지 위치(#, 해시태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼 링크를 설정
속성 중 href, target을 가장 많이 쓰며 download속성은 리소스 다운에 사용하고 rel은 문서와의 관계를 표현
📌 인라인 텍스트 - SPAN
본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정
div태그와 마찬가지로 의미가 없음
Part 7. HTML / 요소 - 멀티미디어 & 내장 콘텐츠 & 스크립트
📌 멀티미디어 - IMG 1
이미지를 삽입하는 요소
<img />
필수 속성: src, alt
추가 속성: width, height, srcset, sizes가 있으며, width와 height중 하나만 수정하여도 둘다 크기가 변함
📌 멀티미디어 - IMG 2 - srcset, sizes 속성
<img
srcset="images/heropy_small.png 400w,
images/heropy_medium.png 700w,
images/heropy_large.png 1000w"
sizes="(max-width: 500px) 444px,
(max-width: 800px) 777px,
1222px"
src="images/heropy.png"
alt="HEROPY" />srcset 속성은 쉼표로 구분된 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정하고, sizes 속성은 쉼표로 구분된 미디어조건(선택적)과 그에 따라 최적화 되어 출력될 이미지 크기를 지정함.
srcset
브라우저에 제시할 이미지들과 그 이미지들의 원본 크기를 지정하며 사용할 이미지를 사이즈별로 2장 이상 준비하여 srcset 속성에 작성한다. 단 이미지의 크기로 px이 아닌 w 단위 혹은 x 단위를 입력해야 하며, 작은 크기 이미지부터 순서대로 입력해야한다.
📌 멀티미디어 - IMG 3 - W, X 단위
<img
srcset="images/heropy_small.png 400w,
images/heropy_medium.png 700w,
images/heropy_large.png 1000w"
src="images/heropy.png"
alt="HEROPY" />뷰포트 너비가 400px이하 일땐 heropy_small.png가 사용되고 401~700px 일땐 medium, 그 이상일땐 large가 사용됨
W descriptor
w 디스크립터는 이미지의 원본 크기를 의미함
400 * 300 크기 이미지의 w 값은 400w 이다.
X descriptor
x 디스크립터는 이미지의 비율 의도를 의미함
1x or 1.75x or 2.5x와 같이 사용
📌 멀티미디어 - IMG 4 - sizes 속성
sizes
sizes는 미디어조건과 그 조건에 해당하는 이미지의 '최적화 출력 크기'를 지정한다.
<img
srcset="images/heropy_small.png 400w,
images/heropy_medium.png 700w,
images/heropy_large.png 1000w"
sizes="(min-width: 1000px) 700px"
src="images/heropy.png"
alt="HEROPY" />뷰포트 너비가 400px 이하일 때 heropy_small.png(400px)가 사용됩니다.
뷰포트 너비가 401~700px 일 때 heropy_medium.png(700px)가 사용됩니다.
뷰포트 너비가 701~999px 일 때 heropy_large.png(1000px)가 사용됩니다.
뷰포트 너비가 1000px 이상일 때 heropy_medium.png(700px)가 사용됩니다.
최적화 출력과 일반 출력
width는 이미지의 출력 크기만 지정하지만 sizes는 이미지의 '출력 크기' + '최적 크기'도 함게 지정하는 개념이다.
📌 멀티미디어 - AUDIO
소리 콘텐츠를 삽입시 사용
<figure>
<figcaption>Listen to the T-Rex:</figcaption>
<audio
controls
src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
Your browser does not support the
<code>audio</code> element.
</audio>
</figure>
📌 멀티미디어 - VIDEO
동영상 콘텐츠(MP4) 삽입
<video controls width="250">
<source src="/media/cc0-videos/flower.webm"
type="video/webm">
<source src="/media/cc0-videos/flower.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
📌 멀티미디어 - FIGURE, FIGCAPTION
figure는 이미지나 삽화, 도표 등의 영역을 설정
figcaption는 figure에 포함되어 이미지나 삽화 등의 설명을 표시
<figure>
<img src="milk.jpg" alt="A milk">
<figcaption>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</figcaption>
</figure>img, p로 만들어도 시각적인 부분에서는 차이가 안나겠지만 검색 엔진이 검색할 때 더 도움을 줄 수 있음
📌 내장 콘텐츠 - IFRAME
다른 HTML페이지를 현재 페이지에 삽입.
(중첩된 브라우저 컨텍스트를 표시)
<iframe width="1280 height="720" src="https://www.youtube.com/embed/Q9yn1DpZkHQ" frameborder="0" allowfullscreen></iframe>IFRAME의 속성중에 sandbox라는 옵션이 있는데 이는 보안을 위한 읽기 전용으로 삽입하여 특정 스크립트가 실행이 안되어 화면 표시가 잘 안나거나하는 부작용이 있을 수 있어서 필요한 경우에 선택하여 사용하는 것이 좋음(신중하게 사용!)
위의 그동안 언급한 멀티미디어 요소중 figure를 제외한 나머지는 display: inline; 이다.
참고자료:
https://heropy.blog/2019/04/24/html-css-starter/
https://heropy.blog/2019/05/26/html-elements/
