[한경xToss] 3주차 요약 : CSS 중급 및 Javascript

 

* 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다.

 

3주차 실습

---

CSS 중급

 

이미지 잘라서 배경으로 쓰기 : background-position

가상요소 선택자 before/after

 

li 가로로 배치하기

list-style: none;
display:inline-block;
padding: 10px;

 

변환효과 - transition 속성

 

속성 종류

transition-delay : 지연시간

• duration : 변환시간
• property : 대상 속성
• timing-function : 보간 타입 (인터폴레이션, 시간의 간격을 채움)

cubic-bezier()

배지어 곡선 - 수학자 베지어가 제안한 두 점만으로 곡선을 정의하는 공식

변형 속성 - transform 속성

 

CSS 초기화 코드

: Eric Meyer’s CSS Reset

/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, 
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, 
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

---

수평/수직정렬 (align)

하위요소 중앙정렬

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

 

반응형 웹 - 미디어쿼리 속성

 

Flex : 영역 분배하기 (비율)

 

@media

 

벤더 프리픽스

• 웹브라우저에 새로운 기능이 나올때
• 표준화가 완료되기 전 중간단계로 vender prefix(접두어)를 제공함

브라우저 고려 사항 4가지 : 크롬, 엣지, 사파리, 파이어폭스

 

브라우저 벤더 프리픽스 예시

Chrome, Safari -webkit- -webkit-transform

Firefox -moz- -moz-border-radius

Internet Explorer -ms- -ms-user-select

---

Lorem 꿀팁 :

  loerm5 입력 시 5개 단어가 생성됨 - 단어 수 지정 가능

  lorem*2 입력 시 lorem 문장 2개가 생성됨 - 문장 갯수 지정 가능

 

Emmet

(= Zen Coding)

VSCode Emmet 문법은 HTML, CSS 등의 코드를 더 빠르게 작성할 수 있도록 돕는 기능.

Emmet은 축약된 문법을 통해 코드를 생성하며, VSCode에서 기본적으로 활성화되어 있음

 

Tailwind CSS

html을 떠나지 않고 빠르게 빌드하는 CSS 템플릿

 

 

어려운 것) 테일윈드에서는 기본적으로 rem 단위를 사용하는데, 이게 되게 추상적이라 ..
%나 px 단위가 편해서 거의 안쓸 것 같긴한데 그래도 써보면서 익혀야 할 것 같다.

 

 

 

md(미디어쿼리, 반응형)

Breakpoint prefix   Minimum width CSS

sm   640px   @media (min-width: 640px) { ... }

md   768px   @media (min-width: 768px) { ... }

lg   1024px   @media (min-width: 1024px) { ... }

xl   1280px   @media (min-width: 1280px) { ... }

2xl   1536px   @media (min-width: 1536px) { ... }

---

daisyUI

• Tailwind CSS를 확장하는 UI 컴포넌트 라이브러리
• 미리 설계된 UI 요소를 제공하여 빠르고 쉽게 스타일링된 컴포넌트를 사용할 수 있음

 

JavaScript

 

공식명칭은 ECMA Script

Java와 JavaScript는 아예 다름

ES6(ECMA Script 6)에서 언어적으로 완성됨.

 

특징

: 웹브라우저에서 지원하는 유일한 언어

: 과거 Basic언어 : 구글에서 JS V8 엔진을 향상시키고, 오픈 소스로 배포

 

JS를 선언하는 3가지 방법

1. script태그안에서 - head,body태그
2. html태그 속성으로 - onclick,href
3. 별도의 js파일 import / link해서

js 변수 선언 : var, let, const

1. var : 변수, 같은이름 재선언 가능, 타입 변경 가능
2. let : 변수, 최근에 추가됨(ES6), 같은이름 재선언 불가
3. const : 상수

 

JavaScript는 기본적으로 동기 언어 (순차 실행)

하지만 비동기 프로그래밍을 지원 (이벤트 루프, 콜백 함수, 프로미스(Promise), async/await 등을 제공)

 

형변환

NaN (Not a Number)

연산자

연산자의 우선순위 : 연산자가 한 줄에 있을 때, 우선순위에 따라 순차적 연산 진행

(단항 > 이항 > 삼항 > 대입)

---

논리연산자

조건문 - if/switch

 

느낀점 :
친구의 코드를 한번 봤는데 아무래도 코딩을 원래 하던 사람들이다보니 간단한 문제인데도 코드가 정말 달랐다.
이게 바로 흔히 말하는 코딩 스타일인가 …
조건문을 사용할 때, 선 예외처리로 return하여 로직을 최대한 효율적으로 만드는게 정석이고
그 뒤에는 if를 쓰거나 삼항연산자를 쓰거나 취향 차이인 느낌

 

Random 함수

- 0 이상 N 미만의 정수

    Math.floor(Math.random() * N);

• floor : 숫자 내림 (소숫점 버림)
• random : 0.0 ~ 0.999999 까지의 임의 수 발생

- 1 이상 10 이하의 정수

    → Math.floor(Math.random() * 10)+1;

 

반복문  - for, while, do-while

비교연산자

Break/Continue