처음 html,css 를 배울 때 웹 페이지 상 요소가 차지하는 공간에 대해 배우게 됩니다. 그렇게 가장 대표적으로 display 적으로 차이가 발생하는 inline 과 block 에 대해서 배우게 되는데, 종종 보이게 되는 inline-block 에 대해서 궁금증이 생겨 비교해보려 합니다. display: inline 처음 크롬창에서 요소 특성에 대해 공부할 때, 태그를 검사해보면 차지하는 공간이 딱 content/text 를 차지한다는 점을 알 수 있습니다. (가장 기본적으로 배웠던..) text 만큼의 공간을 차지하기에, 여러 을 붙이기도, 혹은 한 단락 글 내부에 을 넣어서 넣은 부분의 text 에 효과를 주려고 사용하곤 합니다. 모두다 inline 의 특성을 가지고 있기 때문에 가능합니다. 대표..
크롬에서 웹 페이지 검사를 실행해보면, 각 요소(element)들은 각자의 고유 공간을 차지한다는 것을 알 수 있습니다. 이러한 속성을 인지하여 스타일을 작성할 때 margin, padding 등 차지하는 공간에 변화를 주어 위치를 수정하곤 합니다. 근데, 요소는 각자의 공간을 차지한다 하였지만, 마치 화면에 겹쳐서 표현되어 보이는 사이트들을 너무 쉽게 접할 수 있습니다. 어떻게 표현한 것일까요? 기본적으로 요소들은 자신의 공간이 있기에, 그 공간을 침범하지 않습니다. 속성이 inline 이던 block 이던지 마찬가지입니다. block 역시 차지하는 높이만큼 그 공간 자체를 모두 가지고 있기에, 다음 요소는 그 밑에 위치합니다. 이러한 요소들의 위치를 수정하기 위해서는(보통 간격) 검사 style 창에..
사이트에서 이미지를 넣는 방법은 두가지가 있습니다. 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것입니다. 어떤 차이가 있을까요? 내 쇼핑몰이 먼저 나왔음 좋겠어... 우리들은 항상 매일같이 정보를 얻기 위해 검색을 합니다. 단어 검색 한번에 원하는 모든 정보가 나온다면 그것만큼 편한일이 있을까요? 반대로 이러한 정보를 판매해야 하는 입장에서는, 자신의 정보가 더욱 사용자에게 잘 접근될수록 수익과 연결이 될테니 검색이 잘 되도록 셋팅을 해볼 수 있다면 해야겠죠. (네이버에게 간절하게 바래봅시다..) 방금 전 검색이 잘 되도록 셋팅을 해야 한다고 말씀드렸습니다. 우리가 같은 검색엔진 속에서 블로그나 자신만의 웹사이트 등 자신이 가진 정보를 상대방에게 더 잘 노출되도록 할 수 ..
최근 웹사이트에서 눈의 피로(?)를 줄이기 위한 다크 모드를 쉽게 볼수 있다. 이를 자바스크립트를 통해 구현해보자. 아이콘을 클릭함에 따라 배경화면과 글자색이 변경되도록 구현해야합니다. 이를 구현해주는 자바스크립트 기능을 알아보겠습니다. 1. Toggle 자바스크립트에서는 toggle 이라는 특수한 메서드를 제공합니다. 스위치를 켯다 껏다 반복하는 이미지로 이해하면 훨씬 와닿을겁니다. 직관적으로 보면 그냥 클릭 한번으로 쉽게 구현이 될 것 같지만, toggle을 이용하지 않는다면, 과정 자체는 조금 길어지게 됩니다. body{ background-color: #f3f3fe;; color: #000;; } body.dark-theme{ background-color: #000; /* 검정색 */ color..
