211122 프론트엔드 스쿨 16일차

JIAH·2021년 11월 22일

멋사 프론트엔드 스쿨 1기

목록 보기

16/30

수업 내용 (한재현 강사님)

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

1. IR기법 - clip

.clip {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

mdn을 보면 clip은 오래된 속성이라 권장하지 않고 있음.
margin: -1px; 가 들어가 있는 이유?
추측만 난무하고 확실한 이유는 없다.
스스로 생각해보기!
관련링크 1, 2

2. CSS Sprite 기법

이미지 로드의 부담을 줄이는게 목적
sprite image를 안 쓰는 경우
- 이미지가 바뀔 가능성이 있을 때
- sprite 용량이 너무 커서 사용 목적과 부합하지 않을 때

3. retina display 대응

sprite image 사용해서 대응하기.

요소의 사이즈에 2배 되는 이미지를 준비한다. (피그마에서 배수로 export, 포토샵 등)
sprite image 생성.
미디어 쿼리로 레티나 조건에서 sprite image의 size, position 지정
@media screen and (-webkit-min-device-pixel-ratio :2)
생성된 이미지 크기를 2로 나눠서 background-size 지정.
이미지 크기를 절반으로 줄였으니까 background-position 역시 2로 나눠서 적용.

4. select 박스 만들기

button, ul등을 활용해서 나만의 select 박스 만들기.
기능은 자바스크립트로 구현하기. (강사님이 소스 제공해주심)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

    <h2>셀렉트 박스 만들기</h2>
    <article class="cont-select">
        <button class="btn-select">최애 프로그래밍 언어</button>
        <ul class="list-member">
            <li><button type="button">Python</button></li>
            <li><button type="button">Java</button></li>
            <li><button type="button">JavaScript</button></li>
            <li><button type="button">C#</button></li>
            <li><button type="button">C/C++</button></li>
        </ul>
    </article>

    <script>
        const btn = document.querySelector('.btn-select');
        const list = document.querySelector('.list-member');
        btn.addEventListener('click', () => {
            btn.classList.toggle('on');
        });
        list.addEventListener('click', (event) => {
            if (event.target.nodeName === "BUTTON") {
                btn.innerText = event.target.innerText;
                btn.classList.remove('on');
            }
        });
    </script>
</body>
</html>

목요일에 진도 다시 나가니까 그전에 완성하기!

수업 전 말씀 (이호준 강사님)

자신감은 실무를 경험해봐야 쌓인다.
벌써 조급해하거나 불안해하지 말기!

수업 내용 (이호준 강사님)

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

1. grid system과 bootstrap

bootstrap
bootstrap - grid
bootstrap - image
bootstrap - tables - Hoverable rows
bootstrap - spacing
bootstrap - buttons, modal, carousel, toaset 등
md >= 768px
sm >= 576px
관공서, 병원 등은 낮은 버젼의 브라우저도 지원해야되는 경우가 많아서 bootstrap을 쓰기에는 적합하지 않다.
bootstrap plugin
sweetalert2
datepicker
summernote (bootstrap 4까지 지원)
bootstrap-select

2. tailwind

링크

오늘의 TIP

참고 링크
이미지 최적화 - kraken
bennettfeely - image clip
toptal - sprite generator
toast - 텍스트 에디터
text image 쓰는 경우
폰트를 한 요소에서만 쓰는 경우에 폰트 용량을 고려해서 image로 넣는다.
코드 리뷰를 받을 때 어디를 중점적으로 구현했는지, 어디를 리뷰받고 싶은지 콕 집어서 말해주는 게 좋다. 짧은 분량을 핑퐁하듯이 서로 리뷰해줘야 도움이 된다.

새로 알게 된 내용

bootstrap에 다양한 plugin이 존재한다.

과제

custom select box
구름 IDE 가입

스프린트 (임동준 강사님)

체크인 점수(1~10점)
액션 플랜 점검 (~19:15)
이전 액션 플랜이 계획대로 잘 진행됐나요? 잘된점이 있다면 어떻게 진행했는지, 잘 안된점이 있다면 어떤 부분이 지키기 어려웠는지 나눠보고 적어볼게요
1차 워크샵 복기
내가 목표로 했던 역량을 지금 잘 키우고 있나요? 1/4지점 동안 그 역량에 대해 노력했거나 진전이 없다면 우선순위가 바뀐걸 수 있어요. 남은 3/4 기간동안 내가 가장 강화하고 싶은 역량을 좀 더 디테일하게 만들어볼게요
1) 첫번째 역량 (무엇을 했는가, 무엇을 할 것인가)
2) 두번째 역량 (무엇을 했는가, 무엇을 할 것인가)
3) 세번째 역량 (무엇을 했는가, 무엇을 할 것인가)
나침반 만들기
지난 1순위 역량은 무엇인가.
과거의 나와 비교해서 역량점수를 매긴다면?
이 점수를 1점 더 올리기 위해서 무엇을 할 수 있을까요?
과거의 나침반 꺼내보기
지금 '돌이켜' 생각해보니 기억에 남고 효과적이었던 강의와 학습 방법
지금 '돌이켜' 생각해보니 별로 도움이 안됐던 강의와 학습 방법
2개의 차이를 만든 키워드 3가지
회고에 대한 회고 w/피드백
오늘 회고는 어땠나요? 오늘 회고에 대한 자유로운 느낌을 작성해주세요.
다음에 더 나은 회고를 위해 고려하거나 시도해보면 좋을 것들에 대한 피드백도 주시면 좋을 것 같아요~!"
체크아웃(1~10점)
이유
액션플랜
1순위
2순위
3순위