🦁_21.11.22 TIL

Bori·2021년 11월 22일

멋쟁이사자처럼_프론트엔드 스쿨 1기

목록 보기

21/60

21년 11월 22일

📝 CSS

📎 CSS 실무 테크닉

CSS Sprite 기법

여러가지의 이미지를 하나의 이미지 파일 안에 배치하여 이미지 로드 부담을 줄이는 방법

Sprite 기법을 사용하지 않는 경우

변경될 수 있는 이미지

Sprite 이미지의 용량이 너무 큰 경우

글씨를 Sprite 이미지로 사용한 이유

아주 일부분에만 사용하는 폰트일 경우, 폰트의 용량을 고려해서 이미지로 대체하여 용량을 줄이기 위해

참고 링크

CSS Sprites Generator

[HTML&CSS] 어제의 나빼고 다 아는 팁 #3 (이미지 스프라이트 기법)

Retina display 대응

Retina : 특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300ppi가 넘을 경우)를 가진 애플 LCD 제품의 브랜드 이름
레티나(고해상도 화면)로 넘어오면서 논리픽셀과 물리픽셀의 차이가 발생
=> 그러나 브라우저는 CSS에서 정의한 픽셀만큼 이미지를 렌더링 해야하기 때문에 원래는 물리픽셀에 맞게 렌더링된 이미지가 논리픽셀 만큼 커지게 된다.

논리픽셀 : CSS에서 표현하는 화소의 기본 단위

물리픽셀 : 디바이스가 실제로 처리할 수 있는 화소의 기본 단위

해결 방법 : 화면에 넣고 싶은 이미지의 사이즈를 2배 크게 준비

📝 Bootstrap

📎 Bootstrap?

부트스트랩은 웹 프레임워크로 반응형 사이트를 구축하기에 최적화 되어있다.
- 프레임워크 : 최소한의 작업으로 빠르게 결과물을 만들 수 있도록 구축해 놓은 종합 공구 세트
유의사항 : 공식 버전 잘 확인하고 개발하기
bootstrap4과 bootstrap5의 가장 큰 차이점은 JQeury가 없어졌다는 점

Bootstrap v.5 - 영문 홈페이지

자세한 내용은 Bootstrap 홈페이지를 참고
=> 실습해보기

Starter template (21년 11월 기준)

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Bootstrap Template

무료 테마 - Start Bootstrap

부트스트랩 테마 구매 사이트

https://themes.getbootstrap.com/

https://wrapbootstrap.com/

https://themeforest.net/search/bootstrap

※ 템플릿 사용시 라이센스 확인!

알아두면 좋은 페이지

서버 유지 - iwinv

Plugin - 텍스트 에디터

https://summernote.org/
(Bootstrap v.5 미지원)

https://ui.toast.com/tui-editor

Plugin - 경고창

sweetalert

Bootstrap-datepicker
=> 사용법 참고 사이트

📝 프론트엔드 개발자로 성장하기 스프린트_2 with 임동준님

체크인 : 6 / 10
액션플랜 점검 : 전체적으로 잘 진행되고 있으나 수면시간 늘리는 것은 어렵다.
그래서 항상 졸린 느낌이지만 3개월 정도 이렇게 지낸다고 큰일나진 않겠지... 싶습니다.
1차 워크샵 복기
1) 첫번째 역량 : 협업능력
- 무엇을 했는가 : 팀원들과 대화 시도
- 무엇을 할 것인가 : 팀원들과 긴 대화 시도
  2) 두번째 역량 : JavaScript, React.js
- 무엇을 했는가 : 아직 아무것도 하지 않았다..
- 무엇을 할 것인가 : 모던 자바스트립트 Dip dive 1회독 하기
  3) 세번째 역량 : 인내심
- 무엇을 했는가 : 아침에 짦은 명상
- 무엇을 할 것인가 : 일단은 아침에 짧은 명상 꾸준히 하기
역량의 네이밍을 조금 더 구체화 할 것은 없는지와 내가 그 역량을 채우기 위해 무엇을 했는지 이야기 해보기
내가 올바른 방향으로 가기 위한 나침반 만들기
- 1순위 역량 : 협업능력
- 점수로 매긴다면? 7점
- 이 점수를 1점 더 올리기 위해 무엇을 할 수 있나요? 꾸준히 지금처럼 하기
과거의 나침반 꺼내보기
- 지금 ‘돌이켜’ 생각해보니 기억에 남고 효과적이었던 강의와 학습 방법(2가지)
  => 같은 내용 여러 강의를 들어본 것
  => 온라인 스터디 참여
  => TIL 작성
- 지금 ‘돌이켜’ 생각해보니 별로 도움이 안됐던 강의와 학습 방법(2가지)
  => 강의가 나랑 맞지 않는다고 해서 내가 적극적으로 공부하지 않는 것
  => 의미없이 무조건 따라하는 것
- 2개의 차이를 만든 키워드 3가지
  => 자기주도, 동기부여, 집중, 뚜렷한 목표
위의 나에게 효과적이었던 학습 방법을 적용해서 액션플랜 작성하기
회고에 대한 회고 with 피드백
체크아웃 : 9 / 10

마무리

내일 천하제일 이력서 만들기 대회를 개최하겠다고 예고를 받았다.
=> 이런 소소한(?) 대회 너무 재미있다. 이번에는 몇 가지 조건이 붙는다는데 궁금하다!
스프린트 회고는 짧은 시간에 꽤 많은 생각을 하게 만든다. 그리고 다른 사람들과 그 생각을 나눌 수 있다는 게 가장 좋게 느껴진다.
=> 조금씩 동기부여도 되면서 나만의 방식을 찾아가는 듯한 느낌
특강이 있는 날은 늦게 끝나서 피곤하면서도 꽤 개운한 느낌이 든다.
=> 이 개운함을 어떻게 표현해야할 지 모르겠다.

Bori

이전 포스트

🦁_21.11.20 / 21.11.21

다음 포스트

🦁_21.11.22 TIL

멋쟁이사자처럼_프론트엔드 스쿨 1기

21년 11월 22일

📝 CSS

📎 CSS 실무 테크닉

CSS Sprite 기법

Sprite 기법을 사용하지 않는 경우

글씨를 Sprite 이미지로 사용한 이유

참고 링크

Retina display 대응

논리픽셀 : CSS에서 표현하는 화소의 기본 단위

물리픽셀 : 디바이스가 실제로 처리할 수 있는 화소의 기본 단위

📝 Bootstrap

📎 Bootstrap?

Bootstrap v.5 - 영문 홈페이지

Starter template (21년 11월 기준)

Bootstrap Template

알아두면 좋은 페이지

📝 프론트엔드 개발자로 성장하기 스프린트_2 with 임동준님

마무리

🦁_21.11.20 / 21.11.21

🦁_21.11.23 TIL

0개의 댓글