Front-End Developer
Let's Conquer CSS Margin Collapse
마진 병합현상 (Margin Collapsing) 인접하는 블록요소의 상 하단의 마진이 한쪽으로 병합되는 현상이다.(상쇄,겹침 등등 다양하게 불린다.) 때문에 마진 10+10이 =10이 되거나, 15+10은 15가 되는(더 큰 쪽의 마진값으로 병합) 원치 않는 상황이 발생된다. 하지만 알고보면 마진병합현상은 CSS가 의도적으로 만든 기능이다. 상하단 마진이 병합되지 않고 둘 다 적용이 된다면 상대적으로 다른곳들에 비해 그 부분만 마진이 너무 두꺼워지기 때문에, 디자인이 더 안정적으로 보일 수 있도록 설계된 것이다. 일단은, 마진 병합은 우리를 도와주는 이로운 현상이다라고 이해하자. 마진병합현상이 일어날 수 있는 조건 인접해있는 block 요소끼리만 일어난다. 상하단만 해당사항이다. 일단 아래와 인접해있는..
HTML과 CSS로 감성달력 만들기.
URL https://koreanhamster.github.io/calendar/4:5/index.html 소스코드 https://github.com/Koreanhamster/calendar HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 9..
5살에게 가르치는 안헷갈리는 HTML table
목차 intro- table을 만들기 전에.. 1. tabel을 만드는 핵심 요소들 - 다른건 몰라도 이건 있어야 해 2.1 Table을 Semantic하게 만드는 요소 1 2.2 Table을 Semantic하게 만드는 요소 2 2.3 Table을 Semantic하게 만드는 요소 3 3. 헷갈리는 표 병합. 이것만 생각하자 4. 열 그룹을 묶기 위해 존재하는 태그 5. 이 밖의 이런저런 팁들 table을 만들기 전에... 은 표가 들어갈 '컨테이너'요소다. 그렇기 때문에 당신이 일단 표를 만들기로 마음을 먹었다면 table태그를 열고, 테이블을 만드는 여러 자식요소들을 담아주고, table을 닫아주면 된다. 일단 table을 열고 시작하자. 1. tabel을 만드는 핵심 요소들 - 다른건 몰라도 이건 있..
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..