211122 오늘공부 - 프론트엔드 스쿨 16일차

zeroto99·2021년 11월 22일
4

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

모든 내용 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 사용해서 대응하기.
  1. 요소의 사이즈에 2배 되는 이미지를 준비한다. (피그마에서 배수로 export, 포토샵 등)

  2. sprite image 생성.

  3. 미디어 쿼리로 레티나 조건에서 sprite image의 size, position 지정
    @media screen and (-webkit-min-device-pixel-ratio :2)

  4. 생성된 이미지 크기를 2로 나눠서 background-size 지정.

  5. 이미지 크기를 절반으로 줄였으니까 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

2. tailwind

오늘의 TIP

  • 참고 링크
    이미지 최적화 - kraken
    bennettfeely - image clip
    toptal - sprite generator
    toast - 텍스트 에디터

  • text image 쓰는 경우
    폰트를 한 요소에서만 쓰는 경우에 폰트 용량을 고려해서 image로 넣는다.

  • 코드 리뷰를 받을 때 어디를 중점적으로 구현했는지, 어디를 리뷰받고 싶은지 콕 집어서 말해주는 게 좋다. 짧은 분량을 핑퐁하듯이 서로 리뷰해줘야 도움이 된다.

새로 알게 된 내용

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

과제

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

  1. 체크인 점수(1~10점)

  2. 액션 플랜 점검 (~19:15)
    이전 액션 플랜이 계획대로 잘 진행됐나요? 잘된점이 있다면 어떻게 진행했는지, 잘 안된점이 있다면 어떤 부분이 지키기 어려웠는지 나눠보고 적어볼게요

  3. 1차 워크샵 복기
    내가 목표로 했던 역량을 지금 잘 키우고 있나요? 1/4지점 동안 그 역량에 대해 노력했거나 진전이 없다면 우선순위가 바뀐걸 수 있어요. 남은 3/4 기간동안 내가 가장 강화하고 싶은 역량을 좀 더 디테일하게 만들어볼게요
    1) 첫번째 역량 (무엇을 했는가, 무엇을 할 것인가)
    2) 두번째 역량 (무엇을 했는가, 무엇을 할 것인가)
    3) 세번째 역량 (무엇을 했는가, 무엇을 할 것인가)

  4. 나침반 만들기
    지난 1순위 역량은 무엇인가.
    과거의 나와 비교해서 역량점수를 매긴다면?
    이 점수를 1점 더 올리기 위해서 무엇을 할 수 있을까요?

  5. 과거의 나침반 꺼내보기
    지금 '돌이켜' 생각해보니 기억에 남고 효과적이었던 강의와 학습 방법
    지금 '돌이켜' 생각해보니 별로 도움이 안됐던 강의와 학습 방법
    2개의 차이를 만든 키워드 3가지

  6. 회고에 대한 회고 w/피드백
    오늘 회고는 어땠나요? 오늘 회고에 대한 자유로운 느낌을 작성해주세요.
    다음에 더 나은 회고를 위해 고려하거나 시도해보면 좋을 것들에 대한 피드백도 주시면 좋을 것 같아요~!"
    체크아웃(1~10점)
    이유

  7. 액션플랜
    1순위
    2순위
    3순위

profile
일단 해버리는 사람 되기~~

0개의 댓글