1일차

개발 log·2021년 7월 12일

TIL

목록 보기

1/21

1회차

HTML, CSS, JS

HTML

정적 언어

웹의 구조를 담당

CSS

정적 언어

콘텐츠 구조를 꾸며주는 웹의 시각적인 표현을 담당

웹의 동적처리를 담당하는 프로그래밍 언어

웹 표준성과 웹 접근성

웹 표준

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

W3C의 권고안에서 나온 기술

크로스 브라우징

조금씩 차이가 있는 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술, 방법

IE (요주의 브라우저)

웹 접근성

웹 콘텐츠 사용이 가능한 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠 제작법

청각 장애인을 위한 영상 자막

마우스를 사용할 수 없는 사람들에게 키보드를 통해 웹을 이용할 수 있게 하거나 그 반대

이미지에 대체 텍스트를 제공

웹 표준 검사하기

W3C validator

3회차

CSS

선언 방식

태그에 직접 작성하기(인라인)

HTML태그에 직접 작성하기 때문에 선택자가 필요없음
<div style="color: red;">태그에 직접 작성</div>

HTML에 포함하기(내장)

CSS만 따로 작성하기 때문에 선택자 필요

HTML의 안에 포함되어 있음
<head>
  <style>
    div {
    	color: red;
    }
  </style>
</head>
<body>
  <div>HTML에 포함</div> 
</body>

HTML 외부에서 불러오기

CSS 코드를 완전히 분리할 수 있음
분리된 하나의 CSS파일을 여러 HTML파일에서 사용할 수 있음

div {
	color: red;
}

<!-- HTML 1 -->
<head>
  <link rel="stylesheet" href="/css/main.css">
</head>
<body>
  <div>HTML에 외부에서 불러오기1</div> <!-- red -->
</body>

<!-- HTML 2 -->
<head>
  <link rel="stylesheet" href="/css/main.css">
</head>
<body>
  <div>HTML에 외부에서 불러오기2</div> <!-- red -->
</body>

Float

Clearfix
- float 부모속성에 클래스 추가

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

4회차

HTML

블록(Block)요소

div, h1~6, p, ol, ul, li, form, table, hr, header, footer, section, article...

사용가능한 최대 가로 너비를 사용

크기를 지정할 수 있음

(width: 100%; height: 0;)으로 시작 -> 기본값은 auto

수직으로 쌓임

margin, padding (위, 아래, 좌, 우) 사용 가능

레이아웃 최적화

인라인(Inline)요소

span, img, a, button, input, label, script, select, textarea...

필요한 만큼의 너비를 사용

크기를 지정할 수 없음

(width: 0; height: 0;)으로 시작 -> 기본값은 auto(동작방식이 다름)

수평으로 쌓임

margin, padding (위, 아래) 사용 불가

TEXT 최적화

HTML 태그

브라우저나 검색엔진은 기본적으로 html태그 안의 문서만을 해석하기 때문에
html 태그 내부에 문서를 작성해야함

속성

lang -> 언어설정

HEAD 태그

문서의 정보를 입력

title 태그

HTML 문서의 제목

meta 태그

기타 정보

style 태그

스타일 직접 입력

link 태그

스타일 외부에서 가져와서 연결

5회차

BODY 태그

문서의 구조를 작성

소개나 탐색을 돕는 것의 그룹

일부 제목 요소, 로고, 구획의 제목, 탐색 폼 등이 포함되어 있음

header, footer는 후손태그가 될 수 없다

가장 가까운 구획 콘텐츠나 구획 루트의 정보를 표시

구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담음

h1~h6 태그

6단계의 문서 제목을 구현

h1부터 순차적으로 기입하는 것을 권고

h1은 한 페이지에 하나만 사용 권고

main 태그

문서 내부의 핵심적인 콘텐츠를 나타냄

문서의 핵심 주제, 애플리케이션의 핵심 기능성에 대해 연관된 콘텐츠들로 구성됨

문서 내에 하나만 존재해야됨

IE 지원 안함

article 태그

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

일반적으로 <h1>~<h6>을 포함하여 식별

작성일자와 시간을 <time>의 datetime속성으로 작성

section 태그

문서의 일반적인 영역을 설정

일반적으로 <h1>~<h6>을 포함하여 식별

aside 태그

문서의 별도 콘텐츠를 설정

보통 광고나 기타 링크 등의 사이드바를 설정

nav 태그

다른 페이지 링크를 제공하는 영역

navigation, 보통 메뉴(Home, About, Contact), 목차, 색인 등을 설정

address 태그

<body>, <article>, <footer> 등에서 연락처 정보(주소)를 제공하기 위해 포함하여 사용
<p>Contact the author of this page:</p>
<address>
  <a href="mailto:sonwj0915@naver.com">sonwj0915@naver.com</a><br>
  <a href="tel:+821049943117">(010)-4994-3117</a>
</address>

div 태그

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

ol, ul, li 태그

각 항목(<li>)의 정렬된 목록(<ol>)이나 정렬되지 않은 목록(<ul>)을 설정

<ol>과<ul>은 자식으로 <li>만 포함 가능

<li>는 단독으로 사용할 수 없으며, <ol>이나 <ul>에 자식으로 포함되어야 함

정렬된 목록(<ol>)의 항목 순서는 중요도를 의미할 수 있음

ol 속성

reversed -> 항목을 역순으로 설정 (IE지원 불가)

start -> 항목에 매겨지는 번호의 시작 값

type -> 항목에 매겨지는 번호의 유형 -> 값: a, A, i, I, 1

li 속성

value -> 항목의 순서를 설정

dl, dt, dd 태그

용어(<dt>)와 정의(<dd>) 쌍들의 영역((<dl>)을 설정

Deescription List, Definition Details, Definition Term

<dl>은 <dd>, <dt>만을 포함해야 함

키(key)/값(value) 형태를 표시할 때 유용
<dl>
  <dt>Coffee</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
  <dt>Milk</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
</dl>
or
<ul>
  <li>
    <dfn>Coffee</dfn>
    <p>Coffee is a brewed drink ...</p>
  </li>
  <li>
    <dfn>Milk</dfn>
    <p>Milk is a brewed drink ...</p>
  </li>
</ul>

p 태그

하나의 문단을 설정 (Paragraph)

일반적으로 정보통신보조기기 등은 다음 문단(<p>)으로 넘어갈 수 있는 단축키를 제공

hr 태그

문단의 분리(주제에 의한)를 위해 설정

horizontal rule

대부분의 경우 수평선(border)으로 표시(표현적 관점)되나 의미적 관점으로만 사용해야함

pre 태그

서식이 미리 지정된 텍스트를 설정

텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음

기본적으로 Monospace 글꼴 계열로 표시됨

모든 글자의 너비가 동일(Monospace)

blockquote 태그

일반적인 인용문을 설정

속성

cite -> 인용된 정보의 URL

6회차

BODY 태그

a 태그

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

속성

download -> 이 요소가 리소스를 다운로드 하는 용도로 사용됨을 의미 -> 값: boolean

href -> 링크 URL

hreflang -> 링크 URL(페이지) 언어(ISO 639-`) -> ko, en...

rel -> 현재문서와 링크 URL의 관계(Link Types) -> license, prev, next...

target -> 링크 URL의 표시(브라우저 탭) 위치 -> _self, _blank

type -> 링크 URL의 MIME 타입 -> text/html...

abbr 태그

약어를 지정 (힌트 제공)

(Abbreviation) 보통 title 속성을 사용하여 전체 글자나 설명을 제공)
Using <abbr title="HyperText Markup Language">HTML</abbr> is fun and easy!
Using HTML is fun and easy!

b 태그

문체가 다른 글자의 범위를 설정

기본적으로 글자가 두껍게(Bold) 표시됨

mark 태그

사용자의 관심을 끌기 위해 하이라이팅 할 때 사용

기본적으로 형광펜을 사용한 것처럼 글자 배경이 노란색으로 표시됨

em 태그

단순한 의미 강조를 표시

중첩 가능 (중첩될수록 강조의미가 강해짐)

정보통신보조기기 등에서 구두 강조로 발음됨

기본적으로 이택릭체로 표시됨

strong 태그

의미의 중요성을 나타내기 위해 사용

기본적으로 글자가 두껍게(Bold) 표시됨

b와 다른점은 중요도의 차이

i 태그

<em>, <strong>, <mark>, <cite>, <dfn> 등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용

dfn 태그

용어를 정의할 때 사용

cite 태그

창작물에 대한 참조를 설정

기본적으로 이탤릭체로 표시됨

q 태그

짧은 인용문을 설정

긴 인용문은 <blockquote>를 사용

속성

cite -> 인용된 정보의 URL

u 태그

밑줄이 있는 글자를 설정

순수하게 꾸미는 용도의 요소로 사용

<span style="text-decoration: underline;">을 활용할 수 있다면 사용을 권장하지 않음

code 태그

컴퓨터 코드 범위를 설정

기본적으로 고정폭(Monospace) 글꼴 계열로 표시됨

kbd 태그

텍스트 입력장치(키보드)에서 사용자 입력을 나타내는 텍스트 범위를 설정
<p><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd></p>, <kbd>ESC</kbd>
Ctrl + Alt + K
, ESC

sup, sub 태그

위첨자(<sup>)와 아래 첨자(<sub>)를 설정
X<sup>4</sup> + Y<sup>2</sup>, H<sub>2</sub>O
X4 + Y2, H2O

time 태그

날짜나 시간을 나타내기 위한 목록으로 사용

IE 지원 불가
Date <time datetime="2018-07-07">July 7</time>
Date July 7

span 태그

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

br 태그

줄바꿈을 설정

del 태그

삭제된(변경된) 텍스트의 범위를 지정

중간에 줄 그임

속성

cite -> 변경을 설명하는 리소스의 URI

datetime -> 변경이 일어난 유효한 날짜 문자
~~this is delete~~

ins 태그

새로 추가된(변경된) 텍스트의 범위를 지정

underline으로 표시됨

속성

cite -> 변경을 설명하는 리소스의 URI

datetime -> 변경이 일어난 유효한 날짜 문자
this is ins

7회차

멀티미디어

img 태그

src -> (필수)이미지 URL

alt -> (필수)이미지의 대체텍스트

width -> 이미지의 가로너비

height -> 이미지의 세로너비

srcset -> 브라우저에게 제시할 이미지 URL과 크기의 목록을 정의 -> w, x

sizes -> 미디어 조건과 해당 조건일 때의 이미지 크기를 정의

crossorigin -> 가져오기가 CORS를 사용하여 수행되어야하는지 여부 -> anonymous, use-credentials

ismap -> 서버 측 이미지 맵으로 지정해 클릭하여 좌표를 쿼리스트링으로 서버에 전송할지 여부 -> boolean

usemap -> 클라이언트 측 이미지 맵으로 지정 -> <map>의 ID속성 값

srcset, sizes
일반적으로 반응형 웹에서 이미지를 지원하기 위해 '미디어 쿼리'라고 부르는 CSS Media Rule(@media)에서 background-image속성을 많이 사용하는데,
반응형 이미지를 처리하기 위해 뷰포트(Viewprot)의 크기부터 사용자 화면의 해상도 등 많은 환경을 고려해야함
하지만 srcset과 size를 통해 쉽게는 이미지의 크기를 설정하는 것만으로 대부분의 고려 사항을 사용자 브라우저에 떠넘길 수 있음

sizes의 조건에 따라 srcset에서 사용할 이미지를 결정함(최적화된 조건)

srcset -> 출력될 이미지 목록

srcset

srcset은 브라우저에 제시할 이미지들과 그 이미지들의 원본 크기를 지정함

사용할 이미지를 사이즈별로 2장 이상 준비하여 srcset 속성에 작성

px 아니고 w 단위 혹은 x 단위를 사용해야함

작은 크기 이미지부터 순서대로 입력

비율이 1이상 (픽셀 수가 충분) 이면서 가장 작은 이미지를 사용

1920px 화면폭에 1000w 이미지 표시 -> ex)1000w/1920 -> 0.52

1920px 화면폭에 2000w 이미지 표시 -> ex)2000w/1920 -> 1.04

1920px 화면폭에 3000w 이미지 표시 -> ex)3000w/1920 -> 1.56

W unit

w 단위(Width descriptor)는 이미지의 원본 크기(가로 너비)를 의미
- 400x300(px)의 w값은 400w

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

X unit

x 단위(Device pixel ratio descriptor)는 이미지의 비율 의도를 의미

위의 예제를 다음과 같이 수정할 수 있음
<img 
srcset="images/heropy_small.png 1x,
		images/heropy_medium.png 1.75x,
        images/heropy_large.png 2.5x" 
sizes="(min-width: 701px) 1000px,
	   (min-width: 401px) 700px,
	   400px"
src="images/heropy.png" alt="HEROPY" />

sizes

sizes는 미디어조건과 그 조건에 해당하는 이미지의 '최적화 출력 크기'를 지정합니다.
`

audio 태그

소리 콘텐츠를 삽입

autoplay가 지정된 경우, preload는 무시됨

속성

autoplay -> 준비되면 바로 재생

controls -> 제어 메뉴를 표시

loop -> 재생이 끝나면 다시 처음부터 재생

preload -> 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)
-> none: 로드하지 않음, metadata : 메타데이터만 로드, auto : 전체 파일 로드
-> 기본값 : metadata

src -> 콘텐츠 URL

muted -> 음소거 여부

vedio 태그

동영상 콘텐츠를 삽입

autoplay가 지정된 경우, preload는 무시됨

속성

autoplay -> 준비되면 바로 재생

controls -> 제어 메뉴를 표시

loop -> 재생이 끝나면 다시 처음부터 재생

muted -> 음소거 여부

poster -> 동영상 썸네일 이미지 URL

preload -> 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)
-> none: 로드하지 않음, metadata : 메타데이터만 로드, auto : 전체 파일 로드
-> 기본값 : metadata

src -> 콘텐츠 URL

width -> 동영상 가로 너비

height -> 동영상 세로 너비

figure, figcaption 태그

figure는 이미지나 삽화, 도표 등의 영역을 설정

figcaption은 figure에 포함되어 이미지나 삽화 등의 설명을 표시
<figure>
  <img src="milk.jpg" alt="A milk">
  <figcaption>Milk is a nutrient-rich.</figcaption>
</figure>

iframe 태그

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

속성

name -> 프레임의 이름

src -> 포함할 문서의 URL

width -> 프레임의 가로너비

height -> 프레임의 세로너비

allowfullscreen -> 전체 화면 모드 사용 여부

frameborder -> 프레임 테두리 사용 여부

sandbox -> 보안을 위한 읽기 전용으로 삽입
-> boolean
-> allow-form : 양식 제출 가능
-> allow-scripts : 스크립트 실행 가능
-> allow-origin : 같은 출처(도메인)의 리소스 사용 가능
<iframe width="1280" height="720" src="https://www.youtube.com/embed/Q9yn1DpZkHQ" frameborder="0" allowfullscreen></iframe>

canvas 태그

canvas API 나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링 (범위)

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgb(200, 0, 0)';
  ctx.fillRect(10, 10, 50, 50)
</script>

script 태그

속성

async -> 스크립트의 비동기적 실행 여부

crossorigin -> 별도의 도메인을 사용하는 사이트(CORS)의 오류 로깅(Error logging)을 허용하기 위해 사용

defer -> 문서 파싱 후 작동 여부

src -> 참조할 외부 스크립트 URL

type -> MIME 타입

noscript 태그

스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의
<noscript>
  <p>Your browser does not support JavaScript!</p>
</noscript>

개발 log

개발자 지망생

1일차

TIL

1회차

HTML, CSS, JS

웹 표준성과 웹 접근성

웹 표준 검사하기

3회차

CSS

선언 방식

4회차

HTML

블록(Block)요소

인라인(Inline)요소

HTML 태그

HEAD 태그

title 태그

meta 태그

style 태그

link 태그

5회차

BODY 태그

header 태그

footer 태그

h1~h6 태그

main 태그

article 태그

section 태그

aside 태그

nav 태그

address 태그

div 태그

ol, ul, li 태그

dl, dt, dd 태그

p 태그

hr 태그

pre 태그

blockquote 태그

6회차

BODY 태그

a 태그

abbr 태그

b 태그

mark 태그

em 태그

strong 태그

i 태그

dfn 태그

cite 태그

q 태그

u 태그

code 태그

kbd 태그

sup, sub 태그

time 태그

span 태그

br 태그

del 태그

ins 태그

7회차

멀티미디어

img 태그

srcset

W unit

X unit

sizes

audio 태그

vedio 태그

figure, figcaption 태그

iframe 태그

canvas 태그

script 태그

noscript 태그

0개의 댓글