분류 전체보기

7주차 회고 - 멋쟁이 사자처럼 프론트앤드스쿨에서 보낸 첫 주.

멋쟁이 사자처럼 프론트앤드 스쿨에서 받은 1주일동안의 감상 1. 교안이나 수업에 대한 준비가 굉장히 잘 짜여져있다. 그리고 이 프로그램을 운영하고 도와주는 매니저분들과 교육을 맡아서 수업을 진행하는 제주코딩베이스캠프(이하 제코배) 강사분들 모두가 정말 진심으로 수강생들을 위해 노력하시는게 느껴진다. 이하 진심이 느껴진다고 말할 수 있겠다... 난 사실 감동했다. 이유는 차차 읽어보시라. 2. 영상을 보라고 던져주는게 아니라 대부분의 시간이 '실시간 온라인 강의'로 이루어진다. 따라서 질문과 답변도 실시간으로 이루어지며 실제로 정말 많은 티키타카가 오간다. 서로가 생각하지 못했던 부분을 짚어주기도 하고, 모두의 이해를 위해 약간씩 딜레이 되는 시간들을 활발한 이야기와 토론으로(혹은 드립으로) 채우는 것이 ..

5살에게 가르치는 깃 - 깃은 쉽다.

Intro- 나같은 초심자가 깃과 깃험을 처음 배우다가는 홧병나서 몸져 앓아눕기 쉽다. 뭐가 어떻게 돌아가는건지 왜 이게 안되는건지. (에서 왜 이젠 되는게 없는지 까지 간다...) 하지만 이는 처음부터 깃과 깃헙을 비롯한 모든 생태계를 한꺼번에 받아드리려고 해서 오는 부작용이고 깃의 기초 동작 원리만 잘 깨우치면 사실 가지치기 하면서 그 다음의 영역은 어렵지 않게 받아드릴 수 있다. 그래서 내가 답답해서 만들어 본 '5살에게 가르치는 깃' 가끔 이해가 안 될 땐 그냥 외우는것도 능력이다. 하지만 이정도는 이해하고 써야된다. 그래서 5살에게 가르치는 깃이다. 1.1 깃 설치 및 셋팅 전제조건: 깃이 다운받아져 있다는 전제 하에 글을 작성합니다. 내 컴퓨터 스펙: 맥 M1, iTerm2 사용 맥: git이..

점진적 향상기법이란? / 이미지 포맷의 종류

점진적 향상기법 기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법. 예시 작동방법 웹 브라우저가 위에서부터 차례대로 내려오며 지원 가능한 포맷인지 탐색한다. (그래서 맨 위에게 가장 성능이 좋으며 효율적인 최신 기술임) 내려오며 지원 가능한 것을 택한다. 아무것도 지원하지 않을 경우, 기본 이미지를 택한다. (여기서의 babies.jpeg) 때문에 WebP나 AVIF 와 같은 최신 포맷의 이미지를 지원하고 싶다면 크로스브라우징을 위해 요소와 함께 사용 하는것이 좋다. 이미지 포맷의 종류 GIF(Graphics Interchange Format): 256색의 컬러만 표현 가능하기 때문에..

srcset attribute를 이용해서 반응형 이미지 만들기

무엇을? CSS media 쿼리가 아닌 HTML만을 이용하여 반응형 이미지를 만들어 보고 싶다. 일단 부모elements로 picture태그를 사용해준다. 그 밑에 source 태그를 사용하고, 그 안의 attrubute로 srcset으로 사진파일의 이름, media attribut로 min-width를 지정해준다. min-width는 최소 넓이로, 960px로 설정했다면 최소 넓이가 960px에 도달할 때 까지 srcset에 지정해준 사진을 사용해. 라는 뜻 화면 넓이가 960px에 도달할 때 까지는 > 과카몰리_600.JPG 사진이 나온다. 화면을 줄여 넓이가 620px에 닿을 때 까지는 > 과카몰리_400.JPG 사진이 나온다. 620보다 더 작아지면 > 기본 이미지로 설정해 둔 과카몰리_200.J..

How to move bullet points in css?

부딪친 문제 li tag를 사용하여 Bullet이 적용되었는데, 왼쪽으로 치우져져 있었다. 이를 해결하려 css에서 li tag에 padding값을 주었으나, 결과는 Bullet들은 그대로 있고 글만 패딩값이 적용되었다. li { padding-left: 20px; } 해결방법 모든 li tag에 list-style-position Property를 inside로 지정해주었다. 아래는 검색했던 링크. https://stackoverflow.com/questions/49906604/how-to-move-bullet-points-in-css

Grouping Content

HTML 작성시 가장 중요한 것들 중 하나는 항상 그룹핑(박스모델 이라고도 한다.)을 잘 해야 한다는 건다. 이렇게 해야 하는 이유는 크게 두가지 이다. CSS styling시 가장 효율적인 방식으로 작업을 가능하게 하기 위해서. 각 태그가 가진 의미들로, Semantic HTML을 작성하기 위해서. header 보통 해당 페이지에서 가장 중요한 h1태그를 포함하는 경우가 많다. 보통 웹사이트에서 윗부분에 웹사이트의 이름, 검색창, nav 태그들과 함께 들어있다. 네이버로 예를 들면 아래 사진처럼 네이버 로고와 검색창, 아래 메뉴바들을 포함한 곳이 되겠다. nav 보통 웹페이지 header 안에서 메뉴바, 혹은 카테고리를 만들어주는게 가장 흔하게 사용되는 방식이다(이 외에도 여려군데서 쓰임) ul>li ..