Code Master: Query

CSS에서 width & height 설정 방법 width 속성과 height 속성의 기본값(default)은 auto입니다. 이 말인 즉, 기본적으로 width: auto; height: auto;라는 뜻이고, 각 속성들은 부모의 크기를 기준으로 결정된다는 뜻입니다. 이해를 돕기 위해 구체적인 예시를 들어보겠습니다. 웹사이트 배경화면으로 특정 이미지를 삽입하려고 한다고 가정해보겠습니다. 만약 위의 예시처럼, 빈 div에 높이 설정을 안 해준다면 화면에 사진은커녕 아무것도 보이지 않게 됩니다. 이 문제를 해결하고, 배경화면에 이미지가 드러나도록 하기 위해 클래스가 cover인 div태그의 높이를 100%;로 설정하고, 그 부모 요소인 html 태그와 body 태그에 각각 { height:100%; }을 ..

CSS 높이 속성의 원리 (height property) CSS를 배워서 작업을 하다 보면 누구나 한 번쯤은 다음과 같은 상황을 겪기 마련입니다. 배경 사진이나 배경 색상을 화면에 꽉 차도록 설정하고 싶은데 혹은, footer가 화면 중앙으로 말려 올라오는 상황을 방지하고 싶어서, 해당 div의 height 속성 값을 100%로 설정하는 일 말입니다. 하지만 결과물을 보곤 금세 당황하며 고개를 갸웃거리게 될 것입니다. 그리곤 선택자(selector)를 잘못 설정했나? 스스로를 의심하며 id 선택자(#)와 class 선택자(.)를 재확인해볼 것입니다. 그래도 이상한 것을 발견하지 못하곤 결국 구글링을 시작할 것입니다. 이 모든 과정은 height의 속성을 제대로 이해하지 못하고 있기 때문에 발생한 것입니다..

부트스트랩(bootstrap4 & bootstrap5)에는 inline, inline-block, inline-table, and table cell 요소일 때, 수직 정렬(vertical alignment)을 손쉽게 바꿀 수 있는 기능이 있습니다. 대표적인 inline 요소로는 span 태그가 있습니다. 필자는 테이블 작업을 할 때, vertical alignment를 자주 사용합니다. 특히, 테이블의 셀(cell)에 담긴 글자(text)나 숫자, 그림(image) 등이 셀의 중앙이 아닌 위쪽에 배치되는 경우 요긴하게 사용할 수 있습니다. 단, vertical alignment는 block 요소에는 적용되지 않습니다. 대표적인 block 요소로는 div 태그 등의 시멘틱(semantic) 태그들이 있으..

HTML 작업을 하다 보면 너무 자주 사용해서 전부 아는 것 같지만, 막상 각 태그들의 정확한 사용 시점이 헷갈리는 순간들이 생기곤 합니다. 그래서 이번에 마음먹고, 자주 헷갈리는 HTML 태그들을 묶어서 비교/정리해보았습니다. vs. 먼저 시멘틱(sementic) 태그인 섹션(section) 태그와 아티클(article) 태그에 대해서 알아보도록 하겠습니다. 먼저 article 태그의 경우, 블로그를 예로 들자면, 블로그에 있는 수많은 포스트들 중, 포스트 하나. 신문 기사를 예로 들자면, 수많은 신문 기사들 중 기사 하나를 규정할 때 사용합니다. article 태그는 그 자체로 독립성을 갖기 때문에 article 태그 부분만 덩그러니 다른 페이지에 노출시켜도..

CSS: 스크롤 스냅이란? CSS: Scroll Snap 얼마 전 CSS에 새롭게 추가된 기능인 스크롤 스냅에 대해 알아보겠습니다. 스크롤 스냅이 무슨 기능이냐 하면, 제목에서도 유추해볼 수 있듯, 마우스를 스크롤링해서 화면을 위/아래로 올리고 내릴 때, 현재 화면과 다음 화면 사이의 절대 비율이 50%를 넘어갈 경우, 비율이 높은 쪽으로 자석처럼 스냅! 딱 달라붙는 효과를 구현해주는 기능입니다. 즉, CSS 스크롤 스냅이란, 웹사이트의 스크롤을 어떤 방식으로 작동시키고 구현할지 결정하는 역할을 합니다. 예전에는 자바스크립트(JavaScript)를 사용해야지만 구현할 수 있었던 기능이지만, 이제는 CSS를 이용해, 그것도 딱 두 줄의 코드만 추가하면 해결할 수 있게 됐습니다. 다음 예시를 통해 CSS 스..

CSS 기본값 리셋하는 방법 CSS Tools: Reset CSS CSS에는 기본적으로 적용돼 있는 기본값들이 존재하는데, CSS 작업을 하다 보면 이런 기본값들 때문에 원하는 결과물을 곧바로 얻어내지 못하곤 한다. 그럼 프로젝트마다 매번 필요 없는 기본값들을 일일이 리셋해주어야만 하는 불편함을 겪어야 한다. 그런 불편함을 덜어주기 위해 다음 사이트에서 리셋 CSS를 제공한다. 해당 내용을 복사해 reset.css 파일로 만들어준 뒤, html문서로 불러와 연결해주기만 하면 번거로운 작업을 줄여줘 훨씬 수월하게 작업할 수 있다. https://meyerweb.com/eric/tools/css/reset/index.html CSS Tools: Reset CSS CSS Tools: Reset CSS The ..

부트스트랩 없이 반응형 Navbar 완전정복 CSS: Responsive Navbar 부트스트랩을 사용하지 않고, HTML와 CSS, JavaScript만을 사용해서 반응형 Navbar를 제작해보도록 하겠습니다. 화면 크기가 768px보다 작을 땐, 웹사이트 로고와 상호명을 제외한 나머지 메뉴에 대해서는 햄버거 모양(三)의 버튼으로 감춰지게끔 만들어보겠습니다. 햄버거 버튼을 누르면, 감춰졌던 메뉴바가 아래로 펼쳐지는 방식입니다. 모바일 버전으로 제작되는 거의 대부분의 웹사이트들에서 사용하고 있는 방식이기도 합니다. ▶ HTML 파일의 예시입니다. amazon Menu Menu Menu Menu Menu ▶ CSS 파일의 예시입니다. :root { --text-color: #f0f4f5; --backgro..

CSS: Flexbox 완벽정리 Flexbox가 개발되기 이전에는 Position / Float / Table 을 이용해서 레이아웃을 만들곤 했습니다. 하지만 이러한 방법은 복잡해서 시간이 많이 걸리고, 또 이 방법만으로는 완벽하게 구현하지 못하는 기능들이 있었습니다. 그래서 등장한 것이 바로 Flexbox입니다. Flexbox는 컨테이너 박스와 그 안에 있는 아이템들을 행과 열에 자유자재로 배치 시킬 수 있게 해주는 유용한 도구입니다. Flexbox를 잘 이해하면 웹사이트의 레이아웃을 아주 쉽게 구성할 수 있습니다. *** 참고: Float *** float는 원래 이미지와 텍스트가 공존하는 경우, "이미지"와 "텍스트"의 관계를 어떻게 규정하고 배치할지 결정하기 위해 만들어졌습니다. 예를 들어 flo..

기본 Footer 템플릿 © Company's Name {% now "Y" %} ※ 참고 사항 ※ Footer 하단 고정 방법 HEADER CONTENT ▶ 단, 이 방법은 Bootstrap4 혹은 Bootstrap5를 사용할 때 가능합니다.

1. 장고 웹사이트 제작을 위한 기본 base.html 템플릿 {% load static %} {% include 'navbar.html' %} {% block content %} {% endblock content %} {% include 'footer.html' %} ▶ 장고의 기본 base.html 템플릿입니다. - 반응형 설정 태그가 포함돼 있습니다. - 웹사이트 설명 태그가 포함돼 있습니다. - 오픈그래프 메타 태그가 포함돼 있습니다. - 선호 URL 지정 태그가 포함돼 있습니다. - Bootstrap5의 CSS & JavaScript CDN이 포함돼 있습니다. - main.css 링크가 포함돼 있습니다. - 구글 애드센스 섹션과 구글 애널리틱스 섹션이 구분돼 있습니다. - 네이버 서치어드바이저..