분류 전체보기

내 먼지같은 존재

퇴사 선물로 동료에게 받은 책. 사실 류시화 시인이 출간하거나 번역한 책은 거의 다 읽었고, 저 책은 당연히(가장 유명한 책) 읽었다. 그런데 누군가 나를 생각하면서 선물로 건네준 책이니 의미가 달라진다. 아껴주련다. 갑자기 생각이 저 깊은 곳에 미친다. 우리는 세상을 별 생각 없이 살아갈 수도 있다. 사실 어찌보면 그게 속 편하다. 하지만 이 작은 먼지같은 존재도, 찰나같은 삶에 의미를 부여할 수 있다고 믿는다. 그래서 나는 궁금해하며, 책을 읽고, 지식과 지혜를 쫓고, 도전하고, 용기내어 내 자신을 내보이고, 글을 쓰고, 나를 사랑하고, 사람을 사랑하고(하려 노력하고), 사람을 도우려 한다. 이를 누군가는 발버둥이라 할 수 있지만 나에게는 이 작은 존재도 가슴이 뛸 수 있다는 증거다. 당신이 죽은 후..

니가 누구던지 센터로 가버려 - CSS 중앙정렬 4가지 방법

CSS에서의 가운데정렬이란 초심자에게 가장 헷갈리는 컨셉 중 하나이다. 인라인요소/블럭라인 요소에 따라 다르고, 또 같은 속성이라 하더라도 상황에 따라 되는게 있고 안되는게 있다(?) 오늘은 딱, 깔끔하게, 거의 모든 상황에서 먹히는 4가지 중앙정렬 방법을 정리해보려 한다. 이 중에 상황에 따라+선호에 따라 맞춰 사용하면 되겠다. 전제조건 부모 div class="container" 안에 자식 div="box-1"을 만들었다. 정확한 결과를 위해, 적용된 마진 패딩값을 0으로 설정하고, box-sizing: border-box;를 준다. 뷰포트 안 어디라도 이동이 가능하기 위해 부모 cotainer div의 height를 100vh로 설정했다. * { margin: 0; padding: 0; box-si..

Flex 별 거 아냐 - 부모요소 편

들어가기 이전에 부모 div안에 자식div 세 개를 만들어 보자. 시각적 힌트를 위해 색깔과 높이/너비를 주고, 부모 div에 border값을 주겠다. 박스들은 오른쪽 옆 공간을 끝까지 다 자치하기때문에, 우리가 보는 눈으로는 오른쪽 빈 공간이 충분해보임에도 불구하고 다음 행으로 넘어가게 된다. 자 이제 우리가 flex를 사용해서 무엇을 할 수 있는 지 알아보자. 부모에 display:flex를 주자 .parents { display: flex; } 기본값인 가로 메인축을 기준으로 item들이 정렬된 것을 볼 수 있다. Main axis(가로축)와 Cross axis(세로축)는 상대적인 개념이다. justify-content 속성을 통해 *main 축의 item 정렬을 어떻게 해줄 지 정할 수 있다. 속..

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을 만드는 핵심 요소들 - 다른건 몰라도 이건 있..