0712 - 0718

0712

1일 차 1 ~ 7회차 강의 정리

드디어 네카라쿠배 교육과정 2기가 시작되었다.
OT를 들어보니 정말 일정이 타이트하고 이대로 따라가기만 한다면 네카라쿠배 기업에 합격할 수 있겠다는 생각이 들었다.
매달 탈락자를 선정한다고 하니 자극이 되어서 더 열심히 하는 동기부여가 될 거 같다.
2주 동안은 코로나 여파로 인해 온라인 수업을 진행하는데, 제대로 HTML과 CSS를 학습하기 전에 하는 사전학습과 JS 사전학습을 진행할 예정이라고 한다.
HTML과 CSS 영상은 1차 테스트 때 본 적이 있는 강의라 재미는 떨어졌지만, 다시 한 번 상기시킨다는 마음으로 열심히 하고 있다.

0712

HTML & CSS 첫걸음/개요

HTML, CSS, JS

HTML

Hyper Text Markup Language의 약어로 웹의 구조를 담당하는 정적 언어

CSS

Cascading Style Sheets의 약어로 웹의 시각적인 표현을 담당하는 정적 언어

JS

JavaScript는 콘텐츠를 바꾸고 움직이는 역할을 하는 프로그래밍 언어로 웹의 동적 처리를 담당

웹 표준

웹에서 사용되는 표준 기술이나 규칙. W3C의 권고안에서 나온 기술들이 여기에 해당
이 표준 기술들을 기준으로 웹 브라우저들이 만들어지는데, 표준 기술을 해석하는 차이, 새로운 기술 삽입 등으로 조금은 다르게 구동되는 브라우저가 생기게 된다.
대부분 표준화 제정 단계의 권고안에 해당하는 기술을 웹 표준이라고 이야기함

크로스 브라우징

다르게 구동되는 여러 브라우저에서 동일한 사용자 경험을 줄 수 있도록 제작하는 기술
대부분의 브라우저는 최대한 웹 표준을 준수해서 제작되기 때문에 문제되는 경우가 적지만 IE는 표준화하기 쉽지 않은 브라우저이기 때문에 IE에서 동작하는 것을 크로스 브라우징이라고 부르기도 한다.

웹 접근성

누구나 쉽고 동등하게 웹을 사용할 수 있도록 콘텐츠를 제작하는 방법

웹 콘텐츠 제작 기법

인식의 용이성
운용의 용이성
이해의 용이성
견고성

HTML & CSS 첫걸음/HTML

기본 형태

태그는 각자의 의미를 가지고 있으며 다음과 같은 형태를 가진다.
<Tag></Tag>

태그는 열리고 닫히는 태그 구조를 가지고 있으며 이는 한 쌍으로 이루어져 있다.
이 구조는 태그의 범위를 만들어 준다.
닫히는 태그는 이름 앞에 /가 붙는다.
한 쌍으로 이루어지지 않는 태그도 존재하는데, 이를 빈 태그라고 한다.

속성과 값

태그의 기능을 확장하기 위해 속성을 사용할 수 있다. <Tag 속성="값"></Tag>

부모와 자식 요소

태그 A가 태그 B의 콘텐츠로 사용되면, 태그 B는 태그 A의 부모 요소, 태그 A는 태그 B의 자식 요소라고 한다.
부모 요소의 상위 요소들을 조상 요소, 자식 요소의 하위 요소들을 자손 요소라고 한다.

HTML & CSS 첫걸음/CSS

선택자, 속성, 값이 있으며 무엇을 의미하는지 이해해야 한다.
선택자는 HTML에 스타일을 적용하기 위해 선택하는 사인이다.
속성과 값은 글자색은 무엇, 너비는 얼마, 여백은 얼마 같은 스타일을 지정할 때 사용

블록/인라인 요소

블록 요소

ex) div, h1, p
사용 가능한 최대 가로 너비를 사용
크기를 지정할 수 있다.
width: 100%; height:0에서 시작
수직으로 요소가 쌓인다.
margin, padding 상, 하, 좌, 우 사용 가능
레이아웃을 잡는데 주로 사용

인라인 요소

ex) span, img
필요한 만큼의 너비만 사용
크기를 지정할 수 없다.
width: 0, height: 0에서 시작
수평으로 쌓인다. 줄을 띄울 시, 띄어쓰기 한 칸 적용
margin, padding 좌, 우 사용 가능 (상, 하로는 눈에는 보이지만 사용하기에 적절하지 않다.)
text를 다루는 데 주로 사용

메타데이터

HTML

html 문서의 범위를 설정
이 태그 밖에 작성하면 브라우저가 이 문서의 내용이라 판단하지 않는다.
lang 속성은 국가 언어를 설정한다.
kr은 국가, ko는 국가 언어 약어이다.
<!DOCTYPE html>은 html5 버전으로 해석해서 브라우저에 표현한다는 뜻

HEAD, BODY

head 태그는 문서의 정보, body 태그는 문서의 구조를 설정

TITLE

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

콘텐츠 구분 & 문자 컨텐츠

무조건적으로 div만 사용해서 레이아웃 구조를 설정하는 것은 아니다.
body 태그 안에 들어가는 다양한 의미를 가진 태그들을 사용

헤더를 나타내는 태그
전역 속성만을 사용
header는 address, footer, 다른 header의 자식 요소가 될 수 없고, footer는 header의 자식 요소가 될 수 없다.

사이트 가장 하단에 있는 바
전역 속성만을 속성으로 가짐

h1 ~ h6

6단계의 문서 제목을 구현
제목 크기를 조정하기 위해서 낮은 단계를 사용하면 안 된다.
- html은 구조를 나타내는 용도로만 사용해야 한다.
제목 단계를 건너띄는 것을 피하고, h1는 한 페이지에 하나만 사용한다.

main

문서나 앱의 주요 콘텐츠를 나타낸다.
하나보다 많은 <main> 태그를 사용해서는 안된다.
IE 지원 불가

article

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

section

문서의 일반적인 영역 설정
article과 section 둘 다 일반적으로 h1 ~ h6를 포함하여 식별
article > section > div 순서로 의미가 강하다.

aside

문서의 별도 콘텐츠를 설정

nav

다른 페이지 링크를 제공하는 영역을 설정. navigation

address

body, article, footer 등에서 연락처 정보를 제공하기 위해 포함하여 사용

div

본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정
콘텐츠 구분 요소들은 거의 block 요소이다.

ol, ul, li

각 항목 li의 정렬된 목록 ol이나 정렬되지 않은 목록 ul을 설정
ol과 ul은 자식으로 li만 포함 가능
li는 단독으로 사용할 수 없으며, ol이나 ul의 자식으로 포함되어야 함
정렬된 목록 ol의 항목 순서는 중요도를 의미할 수 있음
- 일반적으로 ol보다 ul을 많이 사용

ol 속성

start: 항목에 매겨지는 번호의 시작 값
type: 항목에 매겨지는 번호의 유형
reversed: 순서를 역순으로 바꿈

li 속성

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

dl, dt, dd

용어 dt와 정의 dd의 쌍들의 영역 dl을 설정
dl은 dt와 dd만을 포함해야 함
key, value 형태를 표시할 때 유용
dl의 특성 상 css 적용이 어렵기 때문에, 일반적으로 dfn + p를 리스트로 구현하여 대체해서 사용

인라인 텍스트

a

다른 페이지, 같은 페이지, 파일, 이메일 주소, 전화번호 등 다른 URL로 연결되는 하이퍼링크 설정
href: 링크 URL
target: 링크 UR:L의 표시 위치
- _self: 기본값. 현재 페이지에서 이동
- _blank: 새로운 탭을 열어서 이동
rel: 현재 문서와 링크 URL의 관계

span

본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정
div의 인라인 버전

멀티미디어

img

이미지를 삽입할 수 있는 빈 태그
src: 필수 속성으로 이미지의 url
alt: 필수 속성으로 이미지가 없을 때 나타나는 대체 텍스트
width, height: 이미지의 가로 세로 너비.
- 둘 중 하나만 사용해도 원래 이미지 비율을 유지한채로 계산된다.
srcset, sizes
- 반응형 웹을 제작할 때 사용
- 일반적으로 css의 미디어쿼리를 사용해서 반응형 웹을 구현하는데, 이것은 뷰포트 크기, 화면 해상도 등의 많은 환경을 고려해야 됨

srcset, sizes

<img
  srcset="경로 원본크기,
          경로 원본크기,
          경로 원본크기"
  sizes="(미디어조건) 최적화출력크기,
         (미디어조건) 최적화출력크기,
         기본출력크기"
  src="경로"
  alt="대체텍스트"
/>

srcset은 브라우저에 제시할 이미지들과 그 이미지들의 원본 크기를 지정
이미지가 하나면 굳이 srcset을 사용할 필요가 없기 때문에 src를 사용
이미지의 크기로 px 단위가 아닌 w 디스크립터 혹은 x 디스크립터를 입력해야 하며, 작은 크기 이미지부터 순서대로 입력해야 함
- w 디스크립터는 이미지의 원본 크기 가로 너비를 의미
- x 디스크립터는 이미지의 비율을 의미
srcset을 사용하여 현재 뷰포트 너비에 최적화된 이미지를 선택해 출력
고정된 이미지 크기를 유지하려면 width 속성을 추가할 수 있음
width는 이미지의 출력 크기만 지정하는 데 반해, sizes는 이미지의 출력 크기 + 최적 크기도 함께 지정
src 속성은 srcset을 이용할 수 없는 환경에서 사용
srcset과 sizes 속성은 IE에서 지원하지 않음

audio

소리 콘텐츠를 삽입
autoplay: 준비되면 바로 재생
controls: 제어 메뉴를 표시
loop: 재생이 끝나면 다시 처음부터 재생
preload: 페이지가 로드될 때 파일을 로드할지의 지정
- none: 로드 x
- metadata: 메타데이터만 로드
- auto: 전체 파일 로드
src: 콘텐츠 url
muted: 음소거 여부
autoplay가 지정된 경우, preload는 무시됨
음악을 특정 시간부터 재생, 특정 구간만 재생 등의 작업은 JS를 통해 제어

vedio

동영상 콘텐츠를 삽입
poster: 동영상 썸네일 이미지 url
width, height: 동영상 가로, 세로 너비
나머지는 audio 속성과 동일

figure, figcaption

figure는 이미지나 삽화, 도표 등의 영역을 설정
figcaption은 figure에 포함되어 이미지나 삽화 등의 설명을 표시
일반적으로 브라우저에게 정보를 주기위해 사용

iframe

다른 HTML 페이지를 현재 페이지에 삽입
중첩된 브라우저 컨텍스트(프레임)를 표시
name: 프레임의 이름
src: 포함할 문서의 url
width, height: 프레임의 가로 세로 너비
allowfullscreen: 전체화면 사용 여부
frameborder: 프레임 테두리 사용 여부. 기본값 1
- 일반적으로 0으로 설정하고 사용
sandbox: 보안을 위한 읽기 전용으로 삽ㅇ비
- allow-form: 양식 제출 가능
- allow-scripts: 스트립트 실행 가능
- allow-same-origin: 같은 출처의 리소스 사용 가능

미디어 요소중 figure만 block 요소, 나머지는 inline 요소

0713

2일 차 8 ~ 14회차 강의 정리

표 콘텐츠 & 양식

table

데이터 표의 행과 열을 생성
과거에는 테이블 요소가 레이아웃을 잡을 때 사용되기도 했으나, 현재는 그렇게 사용해서 안된다.

tr

테이블의 행 생성

th

표의 헤더 지정
headers: 관련된 하나 이상의 다른 머리글 칸 id 속성 값
colspan: 확장하려는 열의 수
rowspan: 확장하려는 행의 수
scope: 자신이 누구의 머리글 칸인지 명시

td

일반 칸을 지정
속성으로 colspan, rowspan, headers를 가지고 있음
headers 속성은 th의 id 값과 연결시켜야 함

caption

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

form

웹 서버에 정보를 제출하기 위한 양식 범위를 정의
form이 다른 form을 자식 요소로 포함할 수 없음
action: 전송할 정보를 처리할 웹페이지의 url
autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부
- form 내부 모든 양식에 적용
- 값으로 on, off를 가짐
method: 서버로 전송될 HTTP 방식
- get: url에 데이터 노출
- post: url에서 데이터 숨김
name: 고유한 양식의 이름
novalidate: 서버 전송시 양식 데이터의 유효성을 검사하지 않도록 지정
target: 서버로 전송 후 응답받을 방식 지정

input

사용자에게 입력받을 데이터 양식
autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부
autofocus: 페이지 로드될 때 자동으로 포커스
- 문서 내 고유해야 함
checked: 양식이 선택되었음을 표시
- type이 radio, checkbox일 경우만
disabled: 양식 비활성화
readonly: 수정 불가한 읽기 전용
form: form의 id 속성 값을 입력하여 form 밖에서도 안에 있는 것처럼 동작
max, min: type이 number일 경우만
maxlength: 입력 가능한 최대 문자 수
- type이 text, email, password, tel, url일 경우만
multiple: 둘 이상의 값을 입력 할 수 있는지 여부
- type이 email, file일 경우만
name: 양식의 이름
placeholder: 사용자가 입력할 값의 힌트
step: 유효한 증감 숫자의 간격
- type이 number, range일 경우만
value: 초기 값
image type을 이용해서 이미지를 출력할 수 있는데, form을 활용해서 제출 버튼으로 사용 가능
radio type은 주로 묶음으로 사용하는데, 묶기 위해서는 name을 같은 값으로 맞춰야 한다.
reset 타입은 자신이 포함되어 있는 form 안을 초기화

label

라벨 가능 요소의 제목
라벨 가능 요소: button, input, progress, select, textarea

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

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

button

선택 가능한 버튼을 지정
type으로 button, reset, submit이 있다.

textarea

여러 줄의 일반 텍스트 양식
rows 속성을 이용해 양식의 줄 수를 정할 수 있다. 기본값 2
오른쪽 아래를 드래그하여 크기를 확대/축소할 수 있다.

fieldset, legend

같은 목적의 양식을 그룹화하여 제목(legend)를 지정

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

전역 속성, 기타

class

공백으로 구분된 요소의 별칭을 지정
css혹은 javascript의 요소 선택기를 통해서 요소를 선택하거나 접근

id

문서에서 고유한 식별자를 정의
css 혹은 javascript의 요소 선택기를 통해서 요소를 선택하거나 접근

style

요소에 적용할 css를 선언

title

요소의 정보를 지정
요소에 마우스 커서를 올리면 title에 작성한 text가 나타남

lang

요소의 언어 지정
주로 html 태그에서 지정하는 속성

tabindex

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

절대 경로

현재 위치에 상관없이 동일한 경로
http에서 시작하는 경로
도메인 주소를 생략하여 /부터 시작하는 경로

상대 경로

현재 위치에 따라 바뀌는 상대적인 경로
./: 현재 폴더. 생략 가능
../: 상위 폴더

개요

기본 문법

선택자는 속성과 값을 지정할 대상을 검색
속성과 값은 검색된 대상에 지정될 css 명령
옆으로 길게 작성하는 방식은 가독성이 떨어지므로, 속성과 값을 입력하고 세미콜론으로 구분하여 한 줄에 하나 씩 작성한다.

선언 방식

인라인 방식

HTML 요소의 style 속성에 직접 작성하는 방식

<div style="color: red;">Hello world</div>

직접 입력하는 행위는 피해야 한다.

내장 방식

HTML <style></style> 안에 작성하는 방식

링크 방식

HTML <link>를 이용하여 외부 CSS 문서를 불러와 적용하는 방식

@import 방식

css에서 다른 css를 불러오는 방식
직렬 호출 방식이기 때문에 시간이 오래 걸릴 수 있어서 사용할 때 유의해야 한다.

기본 선택자

전체 선택자

모든 요소를 선택

* {
  color: red;
}

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

태그 선택자

태그 이름으로 요소를 선택

li {
  color: red;
}

클래스 선택자

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

.orange {
  color: red;
}

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

아이디 선택자

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

#orange {
  color: red;
}

id=”orange”를 가진 태그를 찾아 css 적용
id는 고유하게 사용

복합선택자

일치 선택자

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

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

가상 클래스 선택자

기본 형태는 선택자 뒤에 : 하나

hover

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

active

요소를 클릭하는 동안 선택

focus

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

a:focus {
  color: red;
}

가상 요소 선택자

before

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

after

요소 내부의 뒤에, 내용을 삽입
url()를 사용해 이미지도 삽입 가능

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

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

상속과 우선순위

상속

css에서도 조상 요소로부터 하위 요소로 css의 속성들이 상속될 수 있다.
상속이 되는 속성들은 주로 글자를 다루는 속성들
- font
- color
- text-align
- text-indent
- text-decoration
- letter-spacing
- opacity 등

강제 상속

상속되지 않는 값을 상속하기 위해 사용
ex) position: inherit;
자식을 제외한 후손에게는 적용되지 않고, 모든 속성이 강제 상속을 사용할 수 있는 것은 아니다.

우선순위

같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 css 속성을 우선 적용할지 결정하는 방법
1. 명시도 점수가 높은 선언이 우선 (명시도)
2. 점수가 같을 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선 (선언 순서)
3. 명시도는 ‘상속’ 규칙보다 우선 (중요도)
4. !important 가 적용된 선언 방식이 다른 모든 방식보다 우선 (중요도)

명시도 점수

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

우선순위 점수 계산

.list li.item {
  color: red;
} /* 21pt */

.list li:hover {
  color: red;
} /* 21pt */

.box::before {
  content: "Good";
  color: red;
} /* 11pt */

#submit span {
  color: red;
} /* 101pt */

header .menu li:nth-child(2) {
  color: red;
} /* 22pt */

h1 {
  color: red;
} /* 1pt */

:not(.box) {
  color: red;
} /* 10pt, 가상 클래스 not은 점수 X */

:not(span) {
  color: red;
} /* 1pt 가상 클래스 not은 점수 X */

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

실습 환경 & 단위

reset.css

브라우저마다 기본적인 스타일이 다르기 때문에 기본적인 내용을 초기화하여 사용해야 한다.
여기서 주의할 점은 먼저 스타일을 초기화하고, 내가 작성한 css 코드를 적용해야 한다는 것이다.

px

해상도에 따른 상대 단위
화면의 픽셀 단위로 고정

%

부모 요소의 영향을 받아, 부모 요소에 대한 상대적 단위
상대값

em

자기 자신의 폰트 크기에 영향을 받음
15em = 15 * font-size
폰트 사이즈가 바뀌면 조정된 사이즈에 영향을 받는 모든 부분이 변경
부모나 조상 요소의 폰트 사이즈를 고정시키고, 그 하위 요소들은 그 폰트 사이즈에 맞게 조정할 때 많이 사용

rem

html 태그의 폰트 사이즈 영향을 받음
em을 사용할 때 폰트 사이즈의 관리 어려움을 해결
font-size를 16px로 고정한 채 사용하고 싶다면, html 태그에서 font-size를 설정한 뒤, body 태그에서 font-size를 16px로 설정하는 방법이 있다.

박스 모델

width, height

각각 너비와 높이를 나타내는 속성
속성의 기본 값은 auto. 브라우저가 계산한다는 뜻
블록 요소는 width는 100%, height는 0에서 시작
인라인 요소는 width는 0, height는 0에서 시작
인라인 요소는 크기 지정 불가능 -> 텍스트에 특화

margin

요소의 외부 여백을 지정. 단축 속성
음수의 값도 사용할 수 있다.
기본 값은 0이다.
margin의 값으로 %를 사용하게 되면 부모 요소의 가로 너비를 기준으로 계산한다.
값이 4개 작성된 경우에는 위, 우, 아래, 좌 순
값이 3개 작성된 경우에는 위, (좌, 우), 아래 순
값이 2개 작성된 경우에는 (위, 아래), (좌, 우)
값이 1개 작성된 경우에는 모두 동일
개별 속성은 margin-top 식으로 사용하면 된다.

마진 중복

마진의 특정 값들이 중복되어 합쳐지는 현상
버그가 아니라 활용하거나 우회해서 사용할 수 있다.

형제 요소들의 margin-top과 margin-bottom이 만났을 때
부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때
부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때

마진 중복 계산법

마진 중복 현상 발생시, 중복 값을 계산하는 방법
둘 다 양수이면 더 큰 값으로 중복
둘 다 음수이면 더 작은 값으로 중복
각각 양수와 음수이면 더해서 계산

padding

요소의 내부 여백을 지정
기본 값과 사용법은 margin과 동일

크기 증가

추가된 padding 값만큼 요소의 크기가 커지는 현상
크기가 커지지 않도록 직접 계산
- padding이 추가된 값만큼 width와 height 값을 다시 계산한다.
크기가 커지지 않도록 자동 계산
- box-sizing: border-box; 속성을 사용하면 크기가 커지지 않고 브라우저가 자동으로 계산해준다.

border

요소의 테두리 선을 지정
속성 값으로는 border-width, border-style, border-color을 지정해주어야 한다.
각 기본 값은 medium, none, black이다.
border의 경우에도 padding 처럼 border-width만큼 요소의 크기가 커진다.

.box {
  border: 1px solid red;
}

border-width

선의 두께를 지정
medium, thin, thick, 단위를 값으로 입력할 수 있다.
margin과 마찬가지로 위, 우, 아래, 좌 각각 두께를 따로 정할 수 있다.
단축속성이면서 개별속성

border-style

선의 종류를 지정
값으로는 solid - 실선, dotted - 점선, dashed - 파선, double - 두줄선 등이 있다.
단축속성이면서 개별속성으로 사용 가능하다. (margin과 padding 처럼)

border-color

선의 색상을 지정
transparent - 투명한 선. 요소의 배경색이 보인다.
단축속성이면서 개별속성
border-top-width 처럼 속성을 사용할 수도 있다.

box-sizing

요소의 크기 계산 기준을 지정
content-box : 너비만으로 요소의 크기를 계산. 기본 값
border-box : 너비에 안쪽 여백과 테두리선을 포함하여 요소의 크기를 계산
padding-box는 브라우저 호환성이 떨어져서 사용하지 않음

display

요소의 박스 타입을 설정
block : 블록 요소
inline : 인라인 요소
inline-block : 인라인-블록요소
- 인라인 요소이지만 블록의 추가적인 특징을 가지고 있다.
- 인라인 요소인대 크기와 높이를 가질 수 있다.
- margin과 padding도 사용할 수 있다.
기타 : table, table-cell, flex 등
none : 요소의 박스 타입이 없음 (화면에서 요소가 사라짐). 투명한 것과는 다르다.

overflow

요소 크기 이상으로 내용이 넘쳤을 때, 내용이 보여짐을 제어
visible : 넘친 부분을 자르지 않고 그대로 보여줌. 기본값
hidden : 넘친 부분을 잘라내고, 보이지 않도록 함
scroll : 넘친 유무와 상관 없이, 스크롤바 생성
auto : 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 생성

글꼴

font-size

글자의 크기를 지정
주로 단위로 지정. 기본값 16px

line-height

줄 높이(줄 간격) 지정
line-height: 32px이라는 것은 줄 사이 간격이 32px이라는 것이 아니라 줄의 높이가 32px이라는 것
normal - 기본값
숫자 - 요소 자체 글꼴 크기의 배수로 지정
단위 - px, em 등의 단위로 지정
1.4에서 1.7 추천

font-family

글꼴 지정
글꼴이름 - 글꼴 후보 목록을 지정
- 후보 중 하나만 사용된다.

.box {
  font-family: Arial, "Open Sans", "돋움", dotum, sans-serif;
}

폰트 후보를 지정해주는 이유는 사용자 os환경에 폰트가 없을수도 있으므로 없을 경우 사용할 수 있는 후보를 지정해주는 것이다.
모두 없을수도 있으므로 마지막에는 sans-serif처럼 계열로 지정해준다. (계열은 필수)

글꼴 계열

serif : 바탕체 계열
sans-serif : 고딕체 게열
monospace : 고정너비(가로폭이 동등한) 글꼴 계열
cursive : 필기체 계열
fantasy : 장식 글꼴 계열

문자(Text) 관련 속성

color

문자의 색상을 지정

색상 표현

색상 이름
- ex) red, blue
Hex 색상코드 : 16진수 색상
- ex)#000000
RGB :빛의 삼원색
- ex) rgb(255, 255, 255)
RGBA : 빛의 삼원색, 투명도
- ex) rgba(255, 0, 0, .5)
HSL : 색상, 채도, 명도
HSLA : 색상, 채도, 명도, 투명도

띄움(정렬), 위치

float

요소를 좌우 방향으로 띄움(수평 정렬)
flex box가 등장하면서 요즘은 float보다 flex box를 이용하여 수평 정렬함
none : 요소 띄움 없음. 기본값
left : 왼쪽으로 띄움
right : 오른쪽으로 띄움
단순히 정렬되는 것이 아니라 쌓이는 것이라 right로 설정하면 오른쪽부터 1, 2, 3순으로 쌓인다.

float 해제

float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 해제해야 함

형제 요소에서 해제
- float 속성이 추가된 요소의 다음 형제요소에 clear 속성 추가
- 형제 요소가 없는 경우에는 해제할 수 없다는 단점이 있다.

.next {
  /* 양쪽 해제. 왼쪽 해제는 left 오른쪽은 right */
  clear: both;
}

부모 요소에서 해제 1
- float 속성이 추가된 요소의 부모요소에 overflow 속성 추가
- overflow: hidden은 float과 아무 상관이 없는 속성이기 때문에 좋지 않다.

.parent {
  overflow: hidden;
}

부모 요소에서 해제 2
- float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix 클래스 추가
- 가상 요소 선택자인 after을 사용하여 자식 요소가 마치는 시점에 clear: both; 를 추가하여 해제
- 주의할 점은 clearfix 클래스가 있는 자식 요소에는 float 속성을 가진 것들만 있어야 해제가 용이하게 된다.

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

display 수정

float 속성이 추가된 요소는 display 속성의 값이 대부분 block으로 수정됨
flex와 inline-flex는 block으로 수정되지 않는다.

clear

float 속성이 적용되지 않도록 지정
none : 요소 띄움 허용
left : 왼쪽 띄움 해제
right : 오른쪽 띄움 해제
both : 양쪽 모두 띄움 해제

position

요소의 위치 지정 방법의 유형을 설정
static : 유형 없음 / 배치 불가능. 기본값
relative: 요소 자신을 기준으로 배치
absolute : 위치 상 부모 요소를 기준으로 배치
fixed : 브라우저(뷰포트)를 기준으로 배치
sticky : 스크롤 영역 기준으로 배치

top, bottom

요소의 position 기준에 맞는 위, 아래쪽에서의 거리를 설정
auto : 브라우저가 계산
단위 : px, em 등 단위로 지정
% : 부모 요소의 세로 너비의 비율로 지정, 음수 값 허용

left, right

% : 부모 요소의 가로 너비의 비율로 지정, 음수 값 허용
다른 내용은 동일

relative

자기 자신을 기준으로 움직이다 보니까 주변 요소의 영향을 받거나 준다. (주의해서 사용해야 함)

absolute

배치 기준은 위치상 부모 요소이다.
- HTML 구조상 부모가 아닌 position: xxx;가 적용되어 있는 부모 요소.
구조상 부모 요소로부터 배치하고 싶으면, 부모 요소에 position: relative; 추가
부모 요소에 position 값이 없다면 뷰포트 기준으로 ( 윈도우 객체 ) 위치가 정해진다.

0714

3일 차 Git/Github 기초

반복되는 인강이 지겨워질 때 쯤, 이번 수업이 찾아왔다. 오늘은 최우영 강사님의 git 수업을 들었는데, 생각보다 강의를 너무 잘해주셔서 놀랐다. 무작정 깃에 대해 학습한 것이 아니라, 6시간에 걸쳐서 깃이 나오게 된 배경부터 깃을 잘 사용하기 위한 도구들을 재밌게 소개해주고, 깃 기본에 대한 강의를 해주셨다. 오늘 들었던 강의는 그래도 여러 번 학습한 경험이 있던 부분이었기에 복습 차원에서 공부했지만, 다음 시간에는 내가 모르는 부분도 대거 등장할 것 같다. 다음 강의까지 오늘 들은 내용을 더 온전하게 이해해서 깃을 잘 활용할 수 있도록 해야겠다.

깃이 출현하게 된 배경

유닉스가 유행하던 시절, 리차드 스톨먼이 오픈 소프트웨어 자유성 확보를 위한 GNU 프로젝트 돌입
그러나 GNU 프로젝트에는 커널이 없었고, 대학생이던 리누스 토발즈가 MINIX를 개조한 Linux를발표
- 커널: 하드웨어와 응용프로그램을 이어주는 운영체제의 핵심 시스템소프트웨어
- Shell: 운영체제의 커널과 사용자를 이어주는 소프트웨어
리눅스 커널을 만들기 위해 리누스 토발즈가 Subversion을 쓰다가 화가 나서 2주만에 git이라는 버전관리 시스템을 만들었다.

깃 관련 도구

Shell Command

ls (list segment): 현재 디렉토리의 파일 목록
- ls -l = 한 줄 씩 보겠다.
- ls -a = 숨긴 파일까지 보겠다. (.확장자명)
- ls -al = 두 플래그를 동시에 사용 가능
cd 경로 (change directory): 디렉토리 이동
mkdir 디렉토리명 (make directory): 디렉토리 생성
touch 파일명(확장자포함): 파일 생성
mv 파일명 이동시킬위치 (move): 해당 파일을 이동
mv 파일명 새파일명: 파일 이름 변경
- 이동시키면서 이름을 변경할 수도 있다.
cp 파일명 복사할위치 (copy): 파일 복사
rm 파일명 (remove): 파일 삭제
- 와일드카드 *를 사용해서 여러개 파일 삭제 가능
rm -rf 디렉토리명: 디렉토리 삭제
cat 파일명: 글 내용 취합해서 보여줌

Vim

cli에서 가장 많이 쓰이는 에디터 중 하나

Vim command

h j k l - left, down, up, right
i - 삽입모드
esc - 노말모드로 이동
dd (delete) - 커서가 위치한 줄 삭제
d + j - 아랫줄 삭제
d + k - 윗줄 삭제
d + 숫자 + j - 아랫줄 숫자만큼 삭제
Y (yank) - 줄 복사
p (paste) - 붙여넣기
u (undo) - 되돌리기
A - 줄 맨뒤로 이동하여 삽입모드
0 - 줄 맨 앞으로 이동
H - 맨 위로 이동
L - 맨 아래로 이동

:w - 저장
:q - 나가기
:wq - 저장 후 나가기
:q! - 저장 안하고 나가기
:{number} - 해당 라인으로 이동

깃

VCS (Version Control System)

소스 코드 관리와 같은 뜻이며, 형상관리에 포함되는 요소들중 하나

깃의 특성

빠른속도, 단순한 구조
분산형 저장소 지원
비선형적 개발(수천개의 브랜치) 가능
수정 내용은 commit 단위로 관리하기 때문에, 인터넷이 연결되지 않아도 개발할 수 있다.
새로운 기능 추가는 브랜치로 개발하여 편안한 실험 가능. 성공적으로 개발 시 merge하여 반영

git objects

Blob: 파일 하나의 내용에 대한 정보
Tree: Blob이나 subtree의 메타데이터(디렉토리 위치, 속성, 이름 등)
Commit: 커밋 순간의 스냅샷

git Process Flow

개인 working directory에서 작업을 하고 git add명령어로 staging area에 올린다.
커밋 메시지를 작성해서 local repo로 커밋을 한다.
git push 명령어를 이용해 remote repo에 저장한다.

git 환경설정

git config --global user.name "유저네임"
git config --global user.email "메일주소"
git config --global core.editor "vim"
git config --global core.pager "cat"

git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

전역적으로 사용할 깃의 유저이름과 메일을 등록하고, 기본 에디터를 vim으로 그리고 페이지를 보여주는 것은 cat 명령어를 이용하도록 설정한다.
git config --list로 설정을 확인할 수 있다.
마지막 줄은 깃 로그 정보를 이쁘게 볼 수 있도록 도와주는 옵션이다.

깃 시작하기

프로젝트를 시작하는 방법은 크게 두가지가 존재

git init
git clone

git init

작업 공간에서 시작해서 github로 소스코드를 순차적으로 내보낸다.

프로젝트 폴더를 만든다

mkdir practice-git
cd practice-git

git init 명령으로 local repo로서 역할을 시작한다.
github에서 새로 비어있는 remote repository를 생성하고, 복사한 주소를 local repo에 등록
- remote repo와 local repo의 이름을 맞춘다.

git remote add origin 복사한주소

origin은 복사한 주소를 부르기 위한 별명같은 존재로, 다른 것으로 사용해도 되나 주로 origin을 사용한다.

현재 브랜치 이름을 main으로 변경 * 기존에 주로 사용하던 master 표현 대신 main으로 바뀌는 추세이다.
git branch -M main
새 파일을 만들고 작업을 수행
작업이 끝났다면 git status 명령으로 현재 프로젝트의 상태를 확인
- untracked files가 보인다면 다음 작업을 할 준비 완료
workspace에 추가된 새로운 파일을 staging area로 보낸다.
- git add 파일명
추가된 파일에 커밋 메시지를 작성해 local repo로 커밋한다.
git status로 commit 할 내역이 존재하는지 확인한 후, 커밋이 끝났다면 remote report push한다.
- git push -u origin main
- origin remote repo의 main 브랜치로 push한다는 뜻
- 첫 커밋이라면, -u(–set -upstream) flag를 붙여 push하여 현재 작업중인 branch가 업로드할 branch의 변동사항을 추적하도록 설정
- 이후에는 -u 옵션 없이 바로 push한다. (origin main)을 안붙여도 동작한다.

git clone

github에서 remote repository를 먼저 생성한 뒤, 작업공간으로 끌어와 작업을 시작한다.

github에서 remote repo를 생성하되, LICENSE, README.md, .gitignore 등의 파일과 함께 생성
터미널에서 주소를 복사하여 작업공간에 local repo를 생성하며 복제한다.
- git clone remote repo주소
커밋까지는 git init 방식과 동일
commit이 끝났다면 remote repo로 push
- remote repo에서 먼저 끌어와 사용하는 구조이기 때문에 remote repo의 main과 local repo의 main 브랜치는 추적하도록 세팅되어 있다.
- 따라서, 위의 -u flag를 붙이지 않아도 된다.
- git push origin master

Conventional Commit

오픈 소스 개발의 경우, 소스 코드뿐 아니라 커밋 메세지도 공개되기 때문에 모든 사용자가 읽을 수 있는 영어를 선택
커밋은 동작 가능한 최소단위로 자주 할 것
해당 작업단위에 수행된 모든 파일 변화가 해당 커밋에 포함되어야 함
모두가 이해할 수 있는 log를 작성할 것
커밋 제목은 구나 절(50자 이내)로 완성
내용은 optional body에 엔터로 구분하여 작성하며, 문장형으로 작성
커밋 메세지의 제목에 prefix 꼭 달기
- feat: 기능 개발 관련
- fix: 오류 개선 혹은 버그 패치
- docs: 문서화 작업
- test: test rhksfus
- conf: 환경설정 관련
- build: 빌드 관련
- ci: Continuous Integration 관련

0715

4일 차 15 ~ 18회차 강의 정리

배경

요소의 배경을 설정

background: 색상 이미지경로 반복 위치 스크롤특성;

background-color

색상 : 요소의 배경 색상
transparent: 투명. 기본 값

background-image

요소의 배경에 하나 이상의 이미지를 삽입
none : 이미지 없음. 기본값
url(“경로”) : 이미지 경로

.box {
  background-image: url("경로");
  width: 120px;
  height: 80px;
}

배경 이미지 삽입 시, 요소 크기가 설정되어야 보일 수 있다.
하나 이상의 배경 이미지를 삽입할 경우 ,로 구분한다. 먼저 작성된 이미지가 더 위에 쌓인다.
배경 이미지가 포함된 사이즈 내에서 이미지는 좌측 상단부터 반복되는데, 이를 제어하기 위해서 background-repeat 속성을 사용한다.

background-repeat

배경 이미지의 반복을 설정
repeat : 배경 이미지를 수직, 수평으로 반복. 기본값
repeat-x : 배경 이미지를 수평으로 반복
repeat-y : 배경 이미지를 수직으로 반복
no-repeat : 반복 없음

background-position

배경 이미지의 위치를 설정
% : 왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100%. x축 y축 순
방향 : right, left, bottom, top, center를 조합하여 사용
방향으로 입력할 경우 중앙에 위치하고 싶으면 center는 한 번만 작성해도 된다.
방향과 단위를 동시에 이용할 때는 x축 y축 순을 지켜서 사용해야 한다.
position 속성과는 다르게 좌측에서, 위에서의 위치만 지정할 수 있다. (오른쪽에서, 아래에서의 위치를 지정할 수 없다.)

background-attachment

요소가 스크롤될 때 배경 이미지의 스크롤 여부 설정
scroll : 배경 이미지가 요소를 따라서 같이 스크롤 됨
fixed : 배경 이미지가 뷰포트에 고정되어, 요소가 같이 스크롤되지 않음
local : 요소 내 스크롤 시 배경이미지가 같이 스크롤 됨

background-size

배경 이미지의 크기를 지정
auto : 배경 이미지가 원래의 크기로 표시됨
단위 : px, em 등 단위로 지정. width만 입력하면 비율에 맞게 지정됨
cover : 배경 이미지의 크기 비율을 유지하며, 요소의 더 긴 너비에 맞춰짐. 이미지가 잘릴 수 있음
contain : 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐. 이미지가 잘리지 않음

전환 & 변환

transition

css 속성의 시작과 끝을 지정하여 중간 값을 애니메이션
주로 변환하기 전의 요소에 지정
transition-property : 전환 효과를 사용할 속성 이름을 설정. 기본값 all
transition-duration : 전환 효과의 지속시간 설정. 기본값 0s
- ms 단위로도 사용 가능
transition-timing-function : 타이밍 함수 지정. 기본값 ease
transition-delay : 전환 효과의 대기시간 설정. 기본값 0s
- 단축 속성으로 작성 시, 앞에 있는 것이 duration, 뒤에 있는 것이 delay

타이밍 함수

ease : 빠르게 - 느리게
linear : 일정하게
ease-in : 느리게 - 빠르게
steps(n) : n번 분할된 애니메이션

transform

요소의 변환 효과를 지정

transform 2D 속성

translate(x, y) : 이동(X축, Y축). 단위는 일반 단위
scale(x, y) : 크기(X축, Y축). 단위는 없음(배수)
rotate(degree) : 회전(각도). 단위는 deg
skew(x-deg, y-deg) : 기울임(X축, Y축). 단위는 deg
position을 이용해서 이동하는 것은 지양하고, transform의 translate함수를 사용하자.
- position은 위치를 배치하고 끝내는 개념. 애니메이션에 특화되어 있는 것은 translate
띄워쓰기로 동시에 2개 이상 함수를 사용할 수 있다.

애니메이션 & 다단

animation

요소에 애니메이션을 설정/제어

animation: 애니메이션이름 지속시간 [타이밍 함수 대기시간 반복횟수 반복방향
  전후상태 재생/정지];

@keyframes

2개 이상의 애니메이션 중간 상태(프레임)을 지정

@keyframes 애니메이션이름 {
  0% {
    속성: 값;
  }
  50% {
    속성: 값;
  }
}

animation-name

@keyframes 규칙의 이름을 지정
기본값 none

animation-duration

애니메이션의 지속 시간 설정
기본값 0s
- ms 단위도 사용 가능

animation-timing-function

타이밍 함수 지정
사용법은 transition-timing-function과 같다.

animation-delay

애니메이션의 대기 시간 설정
음수가 허용. 그 값만큼 애니메이션이 앞서 시작
단축 속성의 경우 delay가 duration보다 앞에 적지만 않으면 된다.

animation-iteration-count

애니메이션 반복 횟수를 설정
숫자 : 반복 횟수를 설정
infinite : 무한 반복

animation-direction

애니메이션의 반복 방향을 설정
normal : 정방향만 반복
reverse : 역방향만 반복
alternate : 정방향에서 역방향으로 반복(왕복). 2번이다.
alternate-reverse : 역방향에서 정방향으로 반복(왕복)

animation-fill-mode

애니메이션의 전후 상태를 설정
none : 기존 위치 시작 -> 애니메이션 시작 위치 -> 동작 -> 기존 위치에서 끝
forwards : 기존 위치 시작 -> 애니메이션 시작 위치 -> 동작 -> 애니메이션 끝 위치에서 끝
backwards : 애니메이션 시작 위치 시작 -> 동작 -> 기존 위치에서 끝
both : 애니메이션 시작 위치 시작 -> 동작 -> 애니메이션 끝 위치에서 끝

animation-play-state

애니메이션의 재생과 정지를 설정
running : 애니메이션을 동작. 기본값
paused : 애니메이션 동작을 정지
예를 들어, hover를 사용해서 요소에 커서를 올렸을 때 애니메이션을 정지 시킬 수 있다.

플랙스

flex

float: left;나 display: inline-block;과 같이 블록 요소를 수평 정렬하기 위해 사용했던 방법들은 일종의 대체재이다.
flex는 2개의 개념으로 나뉘는데 Container와 items로 나뉜다.
Container는 items를 감싸는 부모 요소이며, 각 item을 정렬하기 위해선 Container이 필수이다.

Flex Container 속성

display

Flex Conatiner를 정의한다.
display: flex : Flex Conatiner 자체가 블록 요소처럼 사용된다.
display: inline-flex : Flex Conatiner 자체가 인라인 요소처럼 사용된다.

flex-flow

단축 속성으로 Flex Items의 주 축을 설정하고 Items의 여러 줄 묶음도 설정한다.

flex-flow: 주축, 여러줄 묶음;

flex-direction

items의 주 축을 설정한다.
row : items를 수평축으로 표시(왼쪽 -> 오른쪽). 기본값
row-reverse : items를 row의 반대 축으로 표시
column : items를 수직축으로 표시(위 -> 아래)
column-reverse: items를 column의 반대 축으로 표시

주 축(main-axis)과 교차 축(cross-axis)

값 row는 items를 수평축으로 표시하므로 주 축이 수평이고 교차 축은 수직이 된다.
column은 그 반대의 경우이다.
방향에 따라 주 축과 교차 축은 달라지는 상대적 개념이다.

시작점과 끝점

주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭한다.
방향에 따라 시작점과 끝점이 달라진다.
주축의 방향이 reverse가 되어도 교차축의 시작점과 끝점은 변하지 않는다.

flex-wrap

items의 여러 줄 묶음을 설정
nowrap : 모든 items를 여러 줄로 묶지 않음(한 줄에 표시). 기본값
wrap : items를 여러 줄로 묶음
wrap-reverse : items를 wrap의 역 방향으로 여러 줄로 묶음
기본적으로 items는 한 줄에서만 표시되고 줄 바꿈 되지 않는다.

justify-content

주 축의 정렬 방법을 설정
flex-start : items를 시작점으로 정렬
flex-end : items를 끝점으로 정렬
center : items를 가운데 정렬
space-between : 시작 item는 시작점에, 마지막 items는 끝점에 정렬되고 나머지 items는 사이에 고르게 정렬됨
space-around : items를 균등한 여백을 포함하여 정렬

align-content

교차 축의 정렬 방법을 설정
flex-wrap 속성을 통해 Items가 여러 줄이고 여백이 있을 경우에만 사용할 수 있다.
items가 한 줄일 경우는 align-items 속성 사용할 것
stretch : Container의 교차 축을 채우기 위해 items를 늘림. 기본값
나머지 속성은 justify-content와 동일

align-items

교차 축에서 items의 정렬 방법을 설정
items가 한 줄일 경우 많이 사용
flex-wrap을 통해 여러 줄일 경우에는 align-content 속성이 우선
속성은 stretch, flex-start, flex-end, center이 있고 align-content와 동일하다
baseline : items를 문자 기준선에 정렬

display: flex;
justify-content: center;
align-items: center;

자주 쓰일만한 표현
하나의 요소를 컨테이너로 만들고 그 안의 아이템을 중앙 정렬한다.

Flex Items

order

item의 순서를 설정
숫자가 클수록 순서가 밀리고, 음수가 허용된다.
숫자가 같을 때는 html 구조 순서대로 정렬된다.

flex-grow

item의 증가 너비 비율을 설정
숫자가 더 크면 더 많은 너비를 가진다.
완벽한 비율을 의미하지 않을 수도 있다.
item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다. 기본값 0

flex-shrink

item이 감소하는 너비의 비율을 설정
숫자가 더 크면 더 많은 너비가 감소
item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다. 기본값 1

flex-basis

item의 기본 너비를 설정
auto : width, height 등의 속성으로 item의 너비를 설정할 수 있다. 기본값
- auto이면 텍스트와 같은 요소를 제외하고 flex-grow 비율을 계산해서 너비를 결정한다.
단위 : 단위 값이 주어질 경우 너비를 설정할 수 없다.

flex

item의 너비를 설정하는 단축 속성

flex: flex-grow flex-shrink flex-basis;

flex-basis를 개별 속성으로 사용할 때는 기본값이 auto이지만 단축 속성에서 명시하지 않는다면 기본값이 0이 된다.

align-self

align-items는 Container 내 모든 items의 정렬 방법을 설정한다.
필요에 의해 일부 item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있다.
이 속성은 align-items 속성보다 우선한다.
auto : Container의 align-items 속성을 상속받음
다른 속성은 align-items와 같다.

0716

5일 차 JS 1 ~ 11회차 강의 정리

What is JavaScript?

브라우저에서 사용하려고 만들어졌다.
Node.js를 통해서 서버 쪽에서도 JS를 실행할 수 있게 되었다.
데스크탑 애플리케이션도 만들 수 있다.
- ex) electron
모바일 앱도 만들 수 있다.
- ex) reactnative, nativescript
하드웨어에서도 node.js를 통해 JS를 사용할 수 있기 때문에 IOT진영에서도 사용이 된다.

변수

특정 이름에 특정 값을 담는 것을 선언이라고 한다.
값을 선언할 때는 두 가지 종류가 있는데, 변수와 상수가 있다.
변수: 바뀔 수 있는 값
- let
상수: 한 번 값을 설정하고 나면 바꾸지 못한다. 고정적인 값
- const
변수와 상수 모두 한 번 선언했으면 똑같은 이름으로 선언할 수 없다.
다른 블록에서는 똑같은 이름으로 선언할 수 있다.
옛날에는 JS에서 변수를 선언할 때 var를 사용했다.
- 똑같은 이름으로 선언 가능하다.
- 인터넷 익스플로러 구버전에서는 let이랑 const 사용 불가능. Babel을 통해서 해결
- 더 이상 사용을 권장하지 않는다.

데이터 형식

문자열
- ''나 "" 사용. 취향차이
boolean
- true와 false
null, undefined
- 둘 다 없다라는 뜻이지만 역할이 조금 다르다.
- null은 없다 라는 뜻이고, undefined는 지정되지 않았다.
문장 끝에 세미콜론은 취향

연산자

산술 연산자

덧셈, 뺄셈, 곱셈, 나눗셈 등
- +, -, *, /
증감 연산자
- ++, --
- 피연산자 앞에 붙냐, 뒤에 붙냐에 따라 값이 다를 수 있다.

대입 연산자

*  `=, +=, -=, *=, /=`
* 다른 연산자랑 합쳐지면 피연산자에 우항 값을 연산하여 대입한다는 뜻

논리 연산자

boolean 타입을 처리하기 위한 연산자

// NOT ! - boolean 값을 반전
// AND && - 양 측 모두 true이면 true
// OR || - 둘 중 하나만 true이면 true

not > and > or 순으로 우선순위가 높다.

비교 연산자

==는 비교한 값을 boolean 타입으로 반환한다. 타입을 검사하지 않는다.
- null과 undefined를 같은 값으로 반환
===는 타입을 검사해서 비교한 값을 반환한다. (권장)
!=, !==는 비교한 값이 다르면 true 반환, 같으면 false 반환
<, >, <=, >=
- 크고, 작고, 크거나 같고, 작거나 같고 boolean 값 반환

문자열 붙이기

문자열끼리 +연산을 하면 합쳐진다.

조건문

if 문 뒤에 나온 조건문이 true이면 해당 블록을 실행한다.
false이면 else 문을 실행한다.
else if 문은 if문 조건이 false일 때 다른 조건을 검사하고 싶다면 사용한다.
switch문은 괄호 안에 확인하고 싶은 변수를 넣어주고 블록을 연다.
- 블록 안에서 case를 추가하여 확인하고 싶은 변수와 비교해서 일치하면 해당 case문을 실행한다.
- default문은 일치하는 케이스가 없으면 실행한다.
- case문이 끝날 때마다 break; 를 작성해야 한다.

함수

파라미터를 받아서 결과값을 반환할 수 있다.

function 함수이름(파라미터) {
  return 반환값;
}

Template Literal

ES6 문법으로 백 틱 기호를 사용해서 문자열을 쉽게 결합할 수 있다.

function hello (name) {
	console.log(`hello ${name}!`)
}

hello(junghoon);

// 결과
hello junghoon!

변수를 ${}안에 넣어주면 정상 작동하여 반환한다.

화살표 함수

위의 함수를 ES6 문법인 화살표 함수를 사용해서 표현할 수도 있다.

const hello = (name) => {
  console.log(`Hello, ${name}!`);
};

화살표 함수 내부의 this랑 function 함수 내부의 this는 의미가 다르다.

0717

BEM 방식

사전 과제를 하면서 css 클래스네임 작명을 어떻게 하면 좋을까 고민하다가 유명한 방법인 BEM 방식을 학습하고 사전과제에 적용해보기로 했다.

BEM의 기본 구조

BEM은 Block, Element, Modifier 세 가지로 구성된 이름을 짓는 것을 뜻한다.
각각 __와 --로 구분

.header__navigation--navi-text {
	color: red;

BEM은 기본적으로 ID를 사용하지 않으며, class만을 사용한다.
‘어떻게 보이는가’가 아닌 ‘어떤 목적인가’에 따라 이름을 짓는다.
- ex) 에러 메시지를 띄우는 p 태그에는 .red가 아닌 .error라는 이름을 줘야한다.
이름을 연결할 때는 하이픈 하나만 써서 연결한다.

Block

재사용 가능한 기능적으로 독립적인 페이지 컴포넌트
블럭은 블럭을 감쌀 수 있다.

Element

블럭을 구성하는 단위
블럭은 독립적인 형태인 반면, 엘리면트는 의존적인 형태.
자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어다 다른 데 쓸 수 없다.

<form class="search-form">
  <input class="search-form__input" />
  <button class="search-form__button">Search</button>
</form>

위 예시에서 search-form은 블럭이고 .search-form__input과 .search-form__button은 엘리먼트이다.
search-form이란 블럭은 떼어내서 다른 곳에서 재사용 할 수 있지만, 내부의 input과 button은 search-form안에서만 존재 의미가 있는 엘리먼트이다.
엘리먼트또한 중첩이 가능하다.
- ex) .block > .block__element1 > .block__element2
- .block__element2를 .block__element1의 하위 엘리먼트로 보지 않고 둘 다 똑같이 .block의 엘리먼트로 취급

Modifier

블럭이나 엘리먼트의 속성
생긴게 다르거나, 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용

<ul class="tab">
	<li class="tab__item tab__item--focused">탭 01</li>
	<li class="tab__item">탭 02</li>
	<li class="tab__item">탭 03</li>
</ul>

--focused가 수식어에 해당
값이 true라고 가정하고 사용하는 불리언 타입
키-밸류 타입도 있다.
- ex) color-gray, theme-normal

Twitter Facebook LinkedIn

이정훈

0712

1일 차 1 ~ 7회차 강의 정리

0712

HTML & CSS 첫걸음/개요

HTML, CSS, JS

HTML

CSS

JS

웹 표준

크로스 브라우징

웹 접근성

웹 콘텐츠 제작 기법

HTML & CSS 첫걸음/HTML

기본 형태

속성과 값

부모와 자식 요소

HTML & CSS 첫걸음/CSS

블록/인라인 요소

블록 요소

인라인 요소

메타데이터

HTML

HEAD, BODY

TITLE

콘텐츠 구분 & 문자 컨텐츠

header

footer

h1 ~ h6

main

article

section

aside

nav

address

div

ol, ul, li

ol 속성

li 속성

dl, dt, dd

인라인 텍스트

a

span

멀티미디어

img

srcset, sizes

audio

vedio

figure, figcaption

iframe

0713

2일 차 8 ~ 14회차 강의 정리

표 콘텐츠 & 양식

table

tr

th

td

caption

form

input

label

button

textarea

fieldset, legend

전역 속성, 기타

class

id

style

title

lang

tabindex

절대 경로

상대 경로

개요

기본 문법

선언 방식

인라인 방식

내장 방식

링크 방식

@import 방식