0524 - 0530

0524

무조건 간다! 네카라쿠배 지원

새로운 프로젝트에서 분석 단계를 진행하다보니 하루에 오랜 시간을 사용하기에는 애매한 감이 있었다.
그래서 분석을 2시간 정도 한다고 가정했을 때에 남은 시간에는 어떤 공부를 할까 고민하다가 새로운 도전을 하기로 결심했다.
패스트캠퍼스에서 진행하는 네카라쿠배에 합격하기 위해 공부하는 프론트엔드 개발자 과정에 지원해서 경험을 쌓고자 한다.
1차는 자기소개서와 역량 테스트를 종합하여 진행하는데, 역량 테스트는 좀 특이하게 html과 css에 대한 이해를 기반으로 시험을 진행한다고 한다.
마침 html과 css 사용법에 대한 기본은 알지만, 조금 더 실력을 증진시키고 싶다는 생각이 들어 이를 동기삼아 약 10일간 정말 열심히 학습해보고자 한다.
설사 붙지 못한다고 하더라도 부족했던 퍼블리싱 실력을 키울 좋은 기회가 될 것 같다는 느낌이 들었다.

0525

역량테스트 준비 1일차

이번에 역량 테스트를 진행하기 위해서 패스트캠퍼스 측에서 HTML/CSS에 대한 인터넷 강의를 지원해줘서 이를 이용해 공부하기로 했다.
정말 신기했던 건 강의를 진행하시던 분이 내가 개발할 때 참고했던 블로그를 작성하시는 분이었다는 것이다.
Vuex 포스팅을 참고하여 최근 개발을 진행했었는데, 이렇게 보게 되니 반갑기도 하고 블로그 상단에 있는 캐리커쳐보다 훨씬 멋있는 선생님이셔서 신기했다.
강의의 내용도 좋고 잘 가르쳐줘서 학습을 하는데에 많은 도움이 될 것 같다는 생각이 들었다.
그날그날 학습한 강의 내용을 정리하여 포스팅 하고자 한다.
오늘은 입문 편에 해당하는 아는 내용들을 복습하고, 개념 단어들에 대해서 학습했다.

학습 내용

HTML 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 구조와 의미를 부여하는 정적 언어
온전히 튼튼한 구조를 만드는 것에만 집중해야 한다.

CSS 마크업 언어가 실제 표시되는 방법을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어
웹의 시각적인 표현을 담당

주요 개념

웹 표준

웹에서 사용되는 표준 기술이나 규칙
표준화 제정 단계의 권고안에 해당하는 기술

크로스 브라우징

다르게 구동되는 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술, 방법
IE에서 동작하게 하는 것을 크로스 브라우징이라고 부르기도 한다.

웹 접근성

정상적인 웹 콘텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법

웹에서 사용하는 이미지

비트맵

각 픽셀이 모여 만들어진 정보의 집합
픽셀 단위로 화면에 렌더링한다.
정교하고 다양한 색상을 자연스럽게 표현 가능하나, 확대 및 축소 시 계단 현상으로 품질이 저하된다.

JPG

손실 압축을 하여 압축률이 훌륭하고 고해상도 표시장치에 적합하다.

PNG

비손실 압축을 하여 압축률은 조금 떨어지지만 Alpha Channel을 지원하여 투명도를 보장한다.

GIF

비손실 압축을 하고 8비트 컬러만 지원하여 성능은 떨어지지만, 동영상 같은 이미지를 지원한다.

WEBP

모두 대체할 수 있는 구글이 개발한 이미지 포맷이지만 지원 브라우저가 아직 부족하다.

백터

이미지가 가지고 있는 점, 선, 면의 위치, 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더링한다.
확대 축소에서 자유롭고, 용량 변화가 없지만 정교한 이미지를 표현하기가 어렵다.

SVG

마크업 언어 기반의 벡터 그래픽을 표현하는 포맷으로 css로 스타일링이 가능하고 javascript로 이벤트 핸들링이 가능하다.

특수 문자 용어

기호	영어	한글
`	그레이브
~	틸드	물결표시
!	엑스클러메이션	느낌표
@	엣 사인	골뱅이
#	넘버, 샵
$	달러
%	퍼센트
^	캐럿
&	앰퍼센드
*	에스터리스크	별표
-	하이픈, 대쉬	마이너스
_	언더스코어, 로대쉬	밑줄
=	이퀄	이꼬르
”	쿼테이션 마크	큰 따옴표
’	아포스트로피	작은 따옴표
:	콜론	땡땡이
;	피리어드, 닷	마침표
?	퀘스쳔 마크	물음표
/	슬래쉬
`	`	버티컬 바
\	퍼렌서시스	소괄호
{}	브레이스	중괄호
[]	브래킷	대괄호
<>	앵글 브래킷	꺽쇠괄호

0526

역량테스트 준비 2일차

블록 요소와 인라인 요소의 차이점이 무엇이고 각각 특징이 무엇인지를 학습하고, 문서의 정보를 설정하는 head에 들어가는 메타데이터, 콘텐츠를 구분하는 태그와 블록 레벨의 문자 콘텐츠에 대해서 학습하였다.

블록 요소와 인라인 요소

블록 요소

div, h1, p 태그와 같은 요소
사용 가능한 최대 가로 너비를 사용한다.
크기를 지정할 수 있다.
width: 100%; height: 0;로 시작
수직으로 요소들이 쌓인다.
margin, padding 위, 아래, 좌, 우 모두 사용 가능하다.
레이아웃을 잡는데 사용한다.

인라인 요소

span, img
필요한 만큼의 너비를 사용한다.
크기를 지정할 수 없다.
width: 0; height: 0;로 시작
수평으로 요소들이 쌓인다.
margin, padding 위, 아래는 사용을 할 수 없다.
text를 조작하는 데 사용한다.

후에 다시 배우겠지만, css display 속성으로 inline 레벨과 block 레벨을 결정할 수 있다.

메타데이터

주요 범위

`<html>`

HTML 문서의 범위를 설정

`<head>`

HTML 문서의 정보를 설정

`<body>`

HTML 문서의 구조를 설정

메타데이터

`<title>`

브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 설정

`<base />`

<base href="http://www.example.com/page.html" />

HTML 문서에 포함된 모든 상대 URL들의 기준 URL를 설정
한 문서에 하나의 요소만 포함 가능하다.
위와 같이 사용하면 상대 URL의 기준이 정해진다.

`<link />`

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

css, icon등 외부 리소스의 연결 및 현재 문서와의 관계를 명시

`<meta />`

<meta charset="UTF-8" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

기타 메타데이터 요소로 나타낼 수 없는 메타데이터를 나타내기 위해 설정
검색 엔진이나 브라우저에 정보 제공
http-equiv는 서버/사용자 에이전트의 작동방식 변경에 대한 지시

콘텐츠 구분

`<h1> ~ <h6>`

문서의 정보 계층을 구조화
숫자가 낮을수록 높은 단계의 제목
글씨 크기를 위해 제목 태그를 사용하지 말고, 제목 단계를 건너뛰는 것을 피해야한다.

`<header>`

문서의 헤더를 설정
보통 로고, 제목, 검색등을 포함

`<footer>`

문서의 푸터를 설정
보통 작성자, 저작권, 관련 문서 등을 포함
푸터와 헤더는 다른 태그 안에 포함되지 않아야 한다.

`<main>`

문서의 주요 콘텐츠를 설정
IE를 지원하지 않고, 한 문서에 하나의 요소만 포함 가능

`<article>`

독립적으로 구분되거나 재사용 가능한 영역을 설정

`<section>`

문서의 일반적인 영역을 설정
아티클을 섹션 내부에 포함하거나, 섹션을 아티클 내부에 포함한 형태 가능
일반적으로 둘다 <h1>~<h6>를 포함하여 식별한다.

`<aside>`

문서의 별도 콘텐츠를 설정
보통 광고나 기타 링크 등의 사이드바를 설정

`<nav>`

다른 페이지 링크를 제공하는 영역을 설정
보통 헤더에 포함되어 있는 경우가 많다.

`<address>`

<address>
  <a href="mailto:이메일"></a>
  <a href="tel:+82핸드폰번호"></a>
</address>

<body>, <article>, <footer>등에서 연락처 정보를 제공하기 위해 포함하여 사용
위와 같이 작성하면 실제로 이메일, 전화 프로그램이 실행된다.

`<div>`

본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정
위의 모든 콘텐츠 구분 태그들은 블록 레벨 요소이다.

문자 콘텐츠

`<ol>, <ul>, <li>`

각 항목의 정렬된 목록(<ol>)이나 정렬되지 않은 목록(<ul>)을 설정
자식으로 <li>만 포함 가능
<li>는 단독으로 사용할 수 없으며, 둘의 자식으로 포함되어야 한다.

`<ol>` 속성

start - 항목에 매겨지는 번호의 시작 값
type - 항목에 매겨지는 번호의 유형
- ex) a, A, i, I, 1
reversed - 항목 순서가 역순으로 보이게 됨

`<li>` 속성

value - 항목의 순서를 설정, 이하 항목들의 순서가 다시 지정됨

`<dl>, <dt>, <dd>`

용어(<dt>)와 정의(<dd>) 쌍들의 영역(<dl>)을 설정
<dl>은 <dt>와 <dd>만을 포함해야 함
이러한 이유로 이 대신 <ul>, <dfn> 조합이 더 많이 사용됨

`<p>, <hr>`

<p>는 하나의 문단을 설정한다.
일반적으로 정보통신보조기기 등은 다음 문단(<p>)으로 넘어갈 수 있는 단축키를 제공함
<hr />은 문단의 분리를 위해 설정한다.
대부분 수평선(border)으로 표시되나 의미적 관점으로만 사용해야 함
2px을 지정하면 실제로는 border의 top과 bottom 모두 적용되어 4px의 두께를 가지므로, 아래와 같이 지정해야 실제 2px 두께의 수평선이 들어간다.

hr {
  border: 0;
  border-top: 2px;
}

`<pre>`

서식이 미리 지정된 텍스트를 설정
텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있다.
기본적으로 Monospace 글꼴 계열로 표시된다.

`<blockquote>`

일반적인 인용문을 설정할 때 사용한다.
속성으로는 cite를 가지는데 그에 대한 값으로 인용된 정보의 URL을 작성하면 된다.

0527

역량테스트 준비 3일차

인라인 텍스트 태그와 멀티미디어 그리고 내장 콘텐츠에 관련된 태그들을 학습했다.
그리고 자기소개서를 작성하는데 사실 나는 글 쓰는 재주가 부족하여 어떻게하면 나를 잘 나타낼 수 있을까 하는 고민이 많이 들었다.
어떻게 하면 내 이야기를 진솔하게 잘 전달할 수 있을지에 대해서 많은 고민이 필요할 거 같다는 생각이 들었다.

인라인 텍스트

`<a>`

<a href="https://www.mozilla.com" target="_blank">Mozilla</a>
<-- title1로 이동 -->
<a href="#title1">Mozilla</a>

다른 페이지, 같은 페이지 위치(# 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정

속성

속성	의미	값
download	이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미	불린
href	링크 URL	URL
rel	현재 문서와 링크 URL의 관계	license, prev, next
target	링크 URL의 표시 위치	_self, _blank
type	링크 URL의 MIME 타입	text/html

`<abbr>`

약어를 지정
title 속성을 사용하여 전체 글자나 설명을 제공. title은 전역 속성
마우스를 가져다 대면 설명이 나온다.

`<b>`

문체가 다른 글자의 범위를 설정
특별한 의미를 가지지 않고 기본적으로 글자가 두껍게 표시됨

`<mark>`

시각적인 효과를 위해 하이라이팅할 때 사용
배격이 노란색으로 표시됨

`<em>`

단순한 의미 강조를 표시
중첩이 가능하고 중첩할수록 강조 의미가 강해짐
기본적으로 이탤릭체로 표시됨
정보통신보조기기 등에서 구두 강조로 발음됨

`<strong>`

의미의 중요성을 나타내기 위해 사용
기본적으로 글자가 두껍게 표시됨

`<i>`

다른 태그에서 표현할 수 있는 적합한 의미가 아닌 경우 사용
평범한 글자와 구분(아이콘이나 특수기호)하기 위해 사용
기본적으로 이탤릭체로 표시됨

`<dfn>`

용어를 정의할 때 사용

`<cite>`

창작물에 대한 참조를 설정
기본적으로 이탤릭체로 표시됨

`<q>`

짧은 인용문을 설정
긴 인용문을 설정할 경우 <blockquote>를 사용
인용된 정보의 url을 나타내는 cite 속성 사용 가능

`<u>`

밑줄이 있는 글자를 설정
css를 활용할 수 있는 경우에는 사용하지 않기

`<code>`

컴퓨터 코드 범위를 설정
기본적으로 Monospace 글꼴 계열로 표시됨

`<kbd>`

텍스트 입력 장치에서 사용자 입력을 나타내는 텍스트 범위를 설정

`<sup>, <sub>`

위 첨자와 아래 첨자를 설정

`<time>`

날짜나 시간을 나타내기 위한 목적으로 사용
속성으로 datetime 사용. ex) yyyy-mm-dd
IE 지원 불가

`<span>`

본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정

`<br />`

줄바꿈을 설정
빈 태그이고, 개행을 목적으로 여러 번 사용하는 것은 비추천

`<del>`

삭제된 텍스트의 범위를 지정
가운데에 그어진 줄 들어감
속성으로는 변경을 설명하는 리소스 URI를 가진 cite와 변경이 일어난 날짜를 나타내는 datetime이 있다.

`<ins>`

새로 추가된 텍스트 범위를 지정
속성은 <del>과 동일

멀티미디어 & 내장 콘텐츠 & 스크립트

멀티미디어

`<img />`

이미지를 삽입

`<img />` 속성

src - (필수)이미지 URL
alt - (필수)이미지의 대체텍스트
width - 이미지의 가로 너비
height - 이미지의 세로 너비
srcset - 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의
sizes - 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의

<img
  srcset="
    images/heropy_small.png   400w,
    images/heropy_medium.png  700w,
    images/heropy_large.png  1000w
  "
  sizes="(min-width: 701px) 1000px,
         (min-width: 401px) 700px,
          400px"
  src="images/heropy.png"
  alt="HEROPY"
/>

srcset 속성은 쉼표로 구분된 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정하고,
sizes 속성은 미디어조건과 그에 최적화되어 출력될 이미지 크기를 지정한다.
srcset의 단위는 px 단위가 아닌 w 또는 x를 입력해야 하며, 작은 크기 이미지부터 순서대로 입력해야 한다.
w 디스크립터는 이미지의 원본 크기를 의미한다.
위의 예시에서 뷰포트 너비가 400px 이하일 때 heropy_small.png가 사용되고, 401~700px일 때, heropy_medium.png이 사용되고, 그 이상일 때 heropy_large.png가 사용된다.
x 디스크립터는 디바이스의 픽셀 비율과 일치하는 값으로 최적화 선택된다.
길이가 701px 이상이면 그림을 1000px로 최적화하여 출력하고 401px 이상이면 700px로 그 외에는 400px로 그림을 최적화하여 내보내겠다는 뜻이다.
srcset과 sizes 속성은 IE에서는 지원하지 않는다.

`<audio>`

소리 콘텐츠를 삽입

`<audio>` 속성

autoplay - 준비되면 바로 재생
controls - 제어 메뉴를 표시
loop - 재생이 끝나면 다시 처음부터 재생
src - 콘텐츠 URL
muted - 음소거 여부
preload - 페이지가 로드될 때 파일을 로드할지의 지정
- none : 로드하지 않음
- metadata : 메타데이터만 로드
- auto : 전체 파일 로드
autoplay가 지정된 경우 preload는 무시됨

`<video>`

동영상 콘텐츠를 삽입

`<video>`의 속성

<audio>가 가진 모든 속성을 포함
poster - 동영상 썸네일 이미지 URL
width, height - 동영상 가로 세로 너비

`<figure>, <figcaption>`

<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>

<figure>는 이미지나 삽화, 도표 등의 영역을 지정
<figcaption>은 <figure>에 포함되어 이미지나 삽화의 설명을 표시.

내장 콘텐츠

`<iframe>`

다른 HTML 페이지를 현재 페이지에 삽입

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/5rBg_NjFQmc"
  frameborder="0"
  allowfullscreen
></iframe>

`<iframe>` 속성

name - 프레임의 이름
src - 포함할 문서의 URL
width - 프레임의 가로 너비
height - 프레임의 세로 너비
allowfullscreen - 전체 화면 모드 사용 여부
frameborder - 프레임 테두리 사용 여부, 0 또는 1 지정
sandbox - 보안을 위한 읽기 전용으로 삽입
- 불린
- allow-form : 양식 제출 가능
- allow-scripts : 스크립트 실행 가능
- allow-same-origin : 같은 출처의 리소스 사용 가능

`<canvas>`

canvas api나 webGL api를 사용하여 그래픽이나 애니메이션을 렌더링
속성으로는 width와 height가 있다.

스크립트

`<script>`

스크립트 코드를 문서에 포함하거나 참조

`<script>` 속성

async - 스크립트의 비동기적 실행 여부
defer - 문서 파싱 후 작동 여부
src - 참조할 스크립트 URL
type - MIME 타입. 기본값 text/javascript

`<nonscript>`

스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의
스크립트가 동작하지 않는 환경에서만 동작

0528

역량테스트 준비 4일차

표와 관련된 태그와 input 양식에 관한 태그, 그리고 전역적인 속성에 대해 학습하였다.

표 콘텐츠 & 양식

표

`<table>, <tr>, <th>, <td>`

데이터 표(<table>)의 행(<tr>)과 열(<th>, <td>)을 생성

`<td>` 속성

일반 칸을 지정
headers - 관련된 하나 이상의 다른 머리글 칸 id 속성 값
colspan - 확장하려는 열의 수
rowspan - 확장하려는 행의 수

`<th>` 속성

머리글 칸을 지정
<td> 속성을 포함
abbr - 열에 대한 간단한 설명
scope - 자신이 누그의 머리글 칸인지 명시
- col : 자신의 열
- colgroup : 모든 열
- row : 자신의 행
- rowgroup : 모든 행
- auto

`<caption>`

표의 제목을 설정하며 열리는 table 태그 바로 다음에 작성해야 함
테이블당 하나의 태그만 사용 가능

`<colgroup>, <col />`

표의 열들을 공통적으로 정의하는 컬럼(<col>)과 그의 집합 (<colgroup>)
속성으로는 연속되는 열 수를 나타내는 span 보유

`<thead>, <tbody>, <tfoot>`

표의 머리글, 본문, 바닥글을 지정
기본적으로 테이블 레이아웃에는 영향을 주지 않는다.

<table>
  <caption>
    연봉 테이블
  </caption>
  <colgroup>
    <col />
    <col style="background-color: wheat" />
  </colgroup>
  <thead>
    <tr>
      <th>직급</th>
      <th>연봉</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>사장</td>
      <td>5000</td>
    </tr>
    <tr>
      <td>부장</td>
      <td>4000</td>
    </tr>
    <tr>
      <td>대리</td>
      <td>3000</td>
    </tr>
  </tbody>
</table>

양식

`<form>`

웹 서버에 정보를 제출하기 위한 양식 범위를 정의
이 다른 을 자식 요소로 포함할 수 없음

`<form>` 속성

action - 전송한 정보를 처리할 웹페이지의 URL
autocomplete - 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부
- ex) on, off
method - 서버로 전송할 HTTP
- ex) get, post
name - 고유한 양식의 이름
novalidate - 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정
target - 서버로 전송 후 응답받을 방식을 지정

`<input>`

사용자에게 입력 받을 데이터 양식

`<input>` 속성

autocomplete - 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부
- ex) on, off
autofocus - 페이지가 로드될 때 자동으로 포커스
checked - 양식이 선택되었음을 표시
disabled - 양식을 비활성화
form - <form>의 id 속성 값
list - 참조할 <datalist>의 id 속성 값
max, min - 타입이 number일 때, 지정 가능한 값 제한
maxlength - 타입이 text, email, password, tel, url일 경우 입력 가능 최대 문자 수 제한
multiple - 타입이 email, file일 때만 둘 이상의 값을 입력 가능한지 여부
name - 양식 이름
placeholder - 사용자가 입력할 값의 힌트
readonly - 수정 불가한 읽기 전용
step - 유효한 증감 숫자의 간격
src, alt - 타입이 image일 때 사용하는 속성
type - 입력 받을 데이터의 종류
value - 양식 초기 값

`<label>`

라벨 가능 요소의 제목
for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함
이를 사용하면 글자를 클릭해도 체크나 라디오 버튼 클릭이 된다.

<!-- 라벨 가능 요소를 참조 -->
<input type="checkbox" id="user-agreement" />
<label for="user-agreement">동의하십니까?</label>

<!-- 라벨 가능 요소를 포함 -->
<label><input type="checkbox" />동의하십니까?</label>

`<button>`

선택 가능한 버튼 지정
속성으로는 input 태그와 같은 의미의 autofocus, disabled, form, name, type 등이 있다.
type의 값으로는 button, reset, submit이 온다.

`<textarea>`

여러 줄의 일반 텍스트 양식
속성으로는 input 태그와 같은 의미의 autocomplete, autofocus, disabled, form, maxlength, name, placeholder, readonly가 있다.
rows - 양식의 줄 수를 나타내는 속성

`<fieldset>, <legend>`

같은 목적의 양식을 그룹화(<fieldset>)하여 제목(<legend>)을 지정
<fieldset>은 속성으로 disabled, form, name을 가질 수 있다.

<form>
  <fieldset>
    <legend>Coffee Size</legend>
    <label>
      <input type="radio" name="size" value="tall" />
      Tall
    </label>
    <label>
      <input type="radio" name="size" value="grande" />
      Grande
    </label>
    <label>
      <input type="radio" name="size" value="venti" />
      Venti
    </label>
  </fieldset>
</form>

`<select>, <datalist>, <optgroup>, <option>`

옵션(<option>, <optgroup>)의 선택 메뉴(<select>)나 자동완성 (<datalist>)을 제공
select는 옵션을 선택하는 메뉴이고, datalist는 input에 미리 정의한 옵션을 지정하여 자동완성 기능을 제공하는데 사용한다.

<select>
  <optgroup label="Coffee">
    <option>Americano</option>
    <option>Caffe Mocha</option>
    <option label="Cappuccino" value="Cappuccino"></option>
  </optgroup>
  <optgroup label="Latte" disabled>
    <option>Caffe Latte</option>
    <option>Vanilla Latte</option>
  </optgroup>
  <optgroup label="Smoothie">
    <option>Plain</option>
    <option>Strawberry</option>
    <option>Banana</option>
    <option>Mango</option>
  </optgroup>
</select>

`<progress>`

작업의 완료 진행률을 표시

<progress value="70" max="100">70 %</progress>

전역 속성

모든 HTML 요소에서 공통적으로 사용 가능한 속성

class & id

class는 공백으로 구분된 요소의 별칭을 지정한다.
id는 문서에서 고유한 식별자를 정의해서 중복해서 사용할 수 없다.

style & title & lang

style은 요소에 적용할 css를 선언한다
title은 요소에 정보를 지정하여 커서를 올려놓으면 그에 해당하는 텍스트를 보여준다.
lang은 요소의 언어를 지정한다.

data-*

사용자 정의 데이터 속성을 지정하여 HTML에 자바스크립트에서 이용할 수 있는 데이터를 저장하는 용도로 사용

<div id="me" data-my-name="junghoon" data-my-age="26">jh</div>

위와 같이 지정하면 자바스크렙트에서 저장한 데이터를 dataset으로 접근하여 사용할 수 있다.

draggable

요소가 드래그 앤 드롭 api를 사용 가능한지 여부를 지정한다. 기본값은 auto

<div draggable="true">drag</div>

hidden

요소를 숨기는 속성으로 양식에서 숨기고 싶은 정보가 있을 때도 활용할 수 있다.

<form id="hidden-form" action="/form-action" hidden>
  <!-- 숨겨진 양식들.. -->
</form>
<button form="hidden-form" type="submit">전송</button>

tabindex

탭키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정
대화형 콘텐츠는 기본적으로 코드 순서대로 탭 순서가 지정된다.
비대화형 콘텐츠에 tabindex=”0”을 지정하여 탭 순서를 사용할 수 있다.
tabindex=”-1”를 통해 포커스는 가능하지만 탭 순서에서 제외 가능하다.
tabindex=”1” 이상의 양수 값은 논리적 흐름을 방해하기 때문에 지양한다.

절대경로와 상대경로

상대 경로 : ./(생략가능) 또는 ../을 이용하여 현재 위치에서 상대적인 경로
절대 경로 : http 또는 / 로 시작하여 어디에서 찾던 같은 값을 나타낸다

특수 기호

  - 공백
< - <을 텍스트로 보여줌
> - >을 텍스트로 보여줌

0529

역량테스트 준비 5일차

html 학습을 일단락하고, css 학습으로 넘어왔다.
css가 조금 더 부족하기도 하고 할 양도 많아서 열심히 해야할 것 같다.
오늘은 기본 실습환경 구축과 기본 문법, 그리고 기본 선택자와 복합 선택자에 대해서 학습하였다.

실습환경

CSS Reset

브라우저에 따라서 기본적으로 적용되는 스타일이 모두 다르다.
모든 브라우저에서 같은 환경으로 실행하기 위해 css를 초기화 해줘야 한다. reset.css를 검색하여 cdn으로 호출해서 css를 기본값으로 초기화 시키고 그 후에 내가 커스텀한 css를 불러와야 한다.

Emmet

html과 css를 조금 더 편리하게 작성할 수 있도록 하는 문법
주로 태그이름을 작성하고 tab 키를 누르면 자동으로 태그가 작성된다.
.box을 작성하고 tab 키를 누르면 box 클래스를 가진 div가 생성된다.

개요, 선택자, 상속

기본 문법

선택자 {
  속성: 속성값;
  속성: 속성값;
}

위와 같은 방식은 가독성이 떨어지기 때문에 아래와 같이 작성한다.

선택자 {
  속성: 속성값;
  속성: 속성값;
}

선택자

속성과 값을 지정할 대상을 검색

속성과 값

검색된 대상에 지정될 css 명령

주석

문서 내 수정사항이나 설명 등을 작성

/* 주석 문법 */

선언 방식

인라인 방식

태그의 style 속성에 직접 작성하는 방식

<div style="color: red;">HELLO</div>

내장 방식

<style></style>태그 안에 작성하는 방석

링크 방식

<link>를 이용하여 외부 문서로 css를 불러와서 사용하는 방식

`@import`방식

css @import를 이용하여 외부 문서로 css를 불러와 적용하는 방식
link는 html에서 css를 가져오는 반면 import는 css에서 css를 가져오는 방식이다

@import url("./common2.css");

link 태그는 한 번에 css를 불러오는 반면에, import 방식은 직렬 방식으로 호출하기 때문에 1번이 모두 호출되어야 2번이 호출되는 방식이다.

기본 선택자

전체 선택자

모든 요소를 선택

* {
  color: red;
}

전체 부분에 css를 적용하는 선택자이다.

태그 선택자

태그 이름으로 요소를 선택

li {
  color: red;
}

클래스 선택자

html class 속성의 값으로 요소를 선택

.orange {
  color: red;
}

class=”orange”를 가진 태그를 찾아 css 적용

아이디 선택자

html id 속성의 값으로 요소를 선택

#orange {
  color: red;
}

id=”orange”를 가진 태그를 찾아 css 적용

복합선택자

일치 선택자

두 가지를 동시에 만족하는 요소 선택

span.orange {
  color: red;
}

span 태그 이면서 orange 클래스를 가진 요소에 css 적용

자식 선택자

부모를 기준으로 자식요소를 선택

ul > .orange {
  color: red;
}

ul 태그를 기준으로 자식 요소 중에서 orange 클래스를 가진 요소에 css 적용

자손, 후손 선택자

어떤 특정 선택자의 후손 요소를 선택
띄워쓰기가 선택자의 기호로 사용된다.

div .orange {
  color: red;
}

div 태그를 찾아서 그 안에 있는 요소중에 orange 클래스를 가진 요소에 css 적용

인접 형제 선택자

특정 요소의 다음 형제 요소 하나만 선택

.orange + li {
  color: red;
}

orange 클래스를 가진 요소의 바로 다음 형제 요소 하나만 선택한다.

일반 형제 선택자

특정 요소의 다음 형제 요소 모두 선택

.orange ~ li {
  color: red;
}

orange 클래스를 가진 요소의 다음 형제를 모두 선택해 css 적용

0530

역량 테스트 준비 6일차

가상 선택자와 가상 요소 선택자, 속성 선택자를 학습하였고, 같은 요소가 여러 선언의 대상이 될, 어떤 선언의 속성을 우선 적용할지 결정하는 우선순위에 대해 학습하였다.
그리고 css의 단위에 대해서도 새로 배우게 되었다.

가상 선택자

hover

요소에 마우스가 올라가 있는 동안에만 선택

active

요소를 클릭하는 동안 선택

focus

요소가 포커스 된 동안에만 선택
대화형 콘텐츠에서 사용 가능

a:focus {
  color: red;
}

first child

요소가 형제 요소중 첫번째 요소라면 선택

.fruits li:first-child {
  color: red;
}

last child

요소가 형제 요소중 마지막 요소라면 선택

nth-child

요소가 형제 요소중 n번째 요소라면 선택
n 키워드 사용시 0부터 해석

.fruits li:nth-child(2) {
  /* 두 번째 요소들에만 적용 */
  /* fruits 클래스의 후손 요소들 중 2번째가 li면 적용하고 아니라면 적용하지 않는다. */
  /* 후손 요소들 중이 아닌 자식 요소들 중에서만 적용하고 싶다면 > 를 사용한다. */
  /* 만약 :앞에 요소를 선택하지 않으면 모든 두 번째 요소에 css가 적용된다. */
}

.fruits li:nth-child(2n) {
  /* 짝수 번째에 있는 요소들에 적용 */
}

.fruits li:nth-child(n + 3) {
  /* 3번째 요소부터 적용 */
}

nth-of-type

요소의 타입(태그이름)과 동일한 타입인 형제 요소 중 n번째 요소라면 선택

.fruits p:nth-of-type(1) {
  /* p 태그 중 첫 번째 */
}

부정 선택자

.fruits li:not(.strawberry) {
  color: red;
}

strawberry 클래스를 가진 요소만 빼고 li에 적용

가상 요소 선택자

before

요소 내부의 앞에, 내용을 삽입
가상 클래스는 :, 가상 요소는 ::
가상 요소 선택자는 내용을 적지 않더라도 content 속성을 꼭 작성해줘야한다.

after

요소 내부의 뒤에, 내용을 삽입

div::before {
  content: "<";
}

div::after {
  content: url("경로");
}

속성 선택자

css의 속성을 선택자로 이용해서 css 스타일을 적용할 수 있다.

/* disabled 속성을 가진 요소에 css 적용 */
[disabled] {
  color: red;
}

/* 속성과 값을 이용해서 요소에 css 적용 가능 */
[type="password"] {
  color: red;
}

/* 속성 값이 btn-로 시작하는 요소 선택 */
[class^="btn-"] {
  color: red;
}

/* 속성 값이 danger로 끝나는 요소 선택 */
[class$="danger"] {
  color: red;
}

password에 큰 따옴표는 붙여도 되고 안붙여도 된다.

상속과 우선순위

상속

css에서 부모 요소에 속성을 적용하면 후손에게도 속성이 적용될 수도 있다.
주로 글자와 관련된 속성들은 하위 요소들에 상속이 된다.
상속되지 않는 속성도 position: inherit;을 상요해 부모에서 자식으로 강제 상속 시킬 수 있다.
다만 자식을 제외한 후손에게는 적용되지 않고, 모든 속성이 강제 상속을 사용할 수 있는 것은 아니다.

우선순위

같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 속성을 우선 적용할지 결정하는 방법

명시도 점수가 높은 선언이 우선 (명시도)
점수가 같은 경우, 가장 마지막에 해석되는 선언이 우선 (선언 순서)
명시도는 상속 규칙보다 우선

명시도 점수

!important
- 모든 선언을 무시하고 가장 우선
- 점수 : 무한대 pt
인라인 선언 방식
- 점수 : 1000 pt
아이디
- 점수 : 100pt
클래스
- 점수 : 10pt
태그
- 점수 : 1pt
전체
- 점수 : 0pt
상속
- 점수 : 계산하지 않음. 0보다 낮다.

부정 선택자 :not()은 점수를 가지지 않는다.

단위

px

해상도에 따른 상대 단위

%

부모 요소에 대한 상대 단위

em

자기 자신의 폰트 크기에 영향을 받는다.
ex ) 15em은 15 * 자기 자신의 폰트 크기

rem

root em이라고 생각할 수 있다.
html에 지정된 폰트사이즈에 영향을 받는다.
em으로 관리하기 힘든 경우에 사용한다.

vw, vh

vw는 뷰포트의 너비 값, vh는 뷰포트의 높이 값
출력되는 화면의 전체를 뷰포트라고 한다.
백분율로 계산되기 때문에 100을 최대사이즈로 하여 사용하면 된다.

vmin, vmax

뷰포트의 최소 너비와 최대 너비
가로 사이즈와 세로 사이즈를 비교하여 화면을 조절할 때마다 넓거나 좁은 쪽의 너비를 기준으로 설정하는 단위

Twitter Facebook LinkedIn

이정훈

0524

무조건 간다! 네카라쿠배 지원

0525

역량테스트 준비 1일차

학습 내용

주요 개념

웹 표준

크로스 브라우징

웹 접근성

웹에서 사용하는 이미지

비트맵

JPG

PNG

GIF

WEBP

백터

SVG

특수 문자 용어

0526

역량테스트 준비 2일차

블록 요소와 인라인 요소

블록 요소

인라인 요소

메타데이터

주요 범위

<html>

<head>

<body>

메타데이터

<title>

<base />

<link />

<meta />

콘텐츠 구분

<h1> ~ <h6>

<header>

<footer>

<main>

<article>

<section>

<aside>

<nav>

<address>

<div>

문자 콘텐츠

<ol>, <ul>, <li>

<ol> 속성

<li> 속성

<dl>, <dt>, <dd>

<p>, <hr>

<pre>

<blockquote>

0527

역량테스트 준비 3일차

인라인 텍스트

<a>

속성

<abbr>

<b>

<mark>

<em>

<strong>

<i>

<dfn>

<cite>

<q>

<u>

<code>

<kbd>

<sup>, <sub>

<time>

<span>

<br />

<del>

<ins>

멀티미디어 & 내장 콘텐츠 & 스크립트

멀티미디어

<img />

<img /> 속성

`<html>`

`<head>`

`<body>`

`<title>`

`<base />`

`<link />`

`<meta />`

`<h1> ~ <h6>`

`<header>`

`<footer>`

`<main>`

`<article>`

`<section>`

`<aside>`

`<nav>`

`<address>`

`<div>`

`<ol>, <ul>, <li>`

`<ol>` 속성

`<li>` 속성

`<dl>, <dt>, <dd>`

`<p>, <hr>`

`<pre>`

`<blockquote>`

`<a>`

`<abbr>`

`<b>`

`<mark>`

`<em>`

`<strong>`

`<i>`

`<dfn>`

`<cite>`

`<q>`

`<u>`

`<code>`

`<kbd>`

`<sup>, <sub>`

`<time>`

`<span>`

`<br />`

`<del>`

`<ins>`

`<img />`

`<img />` 속성

`<audio>`

`<audio>` 속성

`<video>`

`<video>`의 속성

`<figure>, <figcaption>`

`<iframe>`

`<iframe>` 속성

`<canvas>`

`<script>`

`<script>` 속성

`<nonscript>`

`<table>, <tr>, <th>, <td>`

`<td>` 속성

`<th>` 속성

`<caption>`

`<colgroup>, <col />`

`<thead>, <tbody>, <tfoot>`

`<form>`

`<form>` 속성

`<input>`

`<input>` 속성

`<label>`

`<button>`

`<textarea>`

`<fieldset>, <legend>`

`<select>, <datalist>, <optgroup>, <option>`

`<progress>`

`@import`방식