[TIL] 1주차 ⎮ CSS,JS - ＂Flexbox 정리하기＂ ➕ ＂자바스크립트 script 태그 위치＂ ➕ ＂슬라이더 구현＂

1. Flexbox

flexbox는 반응형 웹페이지를 제작할 때 유용하게 사용 가능하다.

♠️  Container와 Items

flex 완벽가이드

display : flex;

위 속성으로 flexbox를 사용할 수 있다. 그러나 이 때 flex를 적용하고 싶은 요소의 부모 요소 = flex container 에 추가해야 한다. flexbox에는 컨테이너와 아이템이라는 두 가지 개념이 존재한다. 컨테이너가 부모고 그 안에 각 요소가 아이템이다. 컨테이너와 아이템에 적용하는 속성이 구분되어 있다.

컨테이너 속성	의미
display	컨테이너 정의
justify-content	주축=가로축을 따라 아이템 정렬
align-items	교차축=세로축을 따라 아이템 정렬

일단 세 가지만 기술, 주축과 교차축 이미지 참고

♠️ 기타

a-guide-to-flexbox

padding: 10px 10px 10px 10px; // 시계방향으로 상 우 하 좌

swiperjs.com/demos

2. css reset 추가

패딩도 크기에 영향을 미친다.

box-sizing: border-box;

이걸로 CSS 초기화를 해주면 border나 padding를 해도 전체 크기가 변하지 않는다.

3. Flexbox Froggy

flexboxfroggy

container

1. justify-content - 주축, 가로축에서 정렬방법 설정
2. align-items - 교차축, 세로축에서 정렬방법 설정
3. flex-direction - 컨테이너 안에서 정렬되는 방향 설정
4. flex-wrap - 한 줄로 배치하거나 여러 줄로 배치하도록 설정
5. align-content - 여러 줄 사이의 간격 설정
6. flex-flow - 3,4가 합쳐짐. 여러 줄

items

1. order -아이템의 순서 설정
2. align-self - 개별 아이템의 정렬 설정

4. 자바스크립트

자바스크립트는 객체 기반의 스크립트 언어로 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.

🔆 script 태그 위치에 따른 차이점

html에서 자바스크립트를 포함하는 방법은 script 태그를 사용하는 것이다.

script-태그의-위치에-따른-차이점

1. head 태그
2. body 태그
3. head 태그 + async
4. head 태그 + defer

1) body 태그

사용자가 html 화면을 빠르게 볼 수 있다. 파싱이 완료되고 스크립트 다운과 실행이 진행된다. 만약 js 사용이 많은 사이트라면 제대로 된 화면을 보려면 여전히 시간이 많이 걸리긴 한다. 즉 interaction은 나중에 실행된다.

2) head 태그

헤드 태그에 작성시 첫 화면 로딩에 시간이 걸리는 문제가 발생한다.

웹브라우저는 먼저 html 파싱을 진행하는데 헤드 태그를 파싱하다가 스크립트 태그를 만나면 파싱을 중단하고 스크립트를 실행하고 다시 파싱을 이어 진행한다.

파싱(parsing)은 브라우저가 html 코드를 읽고 이를 DOM 트리 구조로 변환하는 과정이다.

3) head + async

<script async src="./index.js"></script>

async를 사용해 html 파싱과 js 파일 다운로드를 병렬적으로 실행하고 js 파일을 실행할 때만 파싱을 중단시켜 파싱 중단 시간을 줄인다. 병렬 처리로 다운로드 시간을 줄인다.

단점 : 여러 async 스크립트일 경우 실행 순서가 보장되지 않는다.

4) head + defer

<script defer src="./index.js"></script>

defer를 사용해서 파일 다운로드를 병렬처리하고 파싱이 끝나고 자서 js 파일을 실행시킨다. 스크립트의 실행 순서가 보장된다.

단점 : interaction=DOM 조작이 느려진다. 바디 태그와 같은 문제

🔆 자바스크립트 선택자

JavaScript-기본-문법-총-정리

1) 태그 선택자

document.getElementsByTagName(태그명)[순서];

2) 클래스 선택자

document.getElementsByClassName(클래스명)[순서];

3) 아이디 선택자

document.getElementById(아이디명);

JavaScriptJQuery-선택자-Selector-모음

제이쿼리도 더 해보고 추가할 예정

5. 슬라이더 구현 - jQuery + bxSlider

🎲 CDNJS

Content Delivery Network for JavaScript는 오픈 소스 라이브러리, 프레임워크, 플러그인, 폰트 등을 웹페이지에서 쉽게 사용할 수 있도록 제공하는 콘텐츠 전송 네트워크이다.

cdnjs에서 jQuery와 bxSlider를 로드해서 간단한 슬라이더를 구현한다.

...
<script src="맞는위치/jquery.min.js"></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.17/jquery.bxslider.min.js"
  integrity="sha512-LaBO0tZh1+6Ebk+EnHt/WsGM0UnmkCXfQ1rfhGmpa5MXUdslNuSSELBRcteHKz4k4ny+Op10Ax2fPoTNq+VcUg=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script>
  $(".slide").bxSlider({
    auto: true,
  });
</script>