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의 속성을 제대로 이해하지 못하고 있기 때문에 발생한 것입니다..

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..

미디어 쿼리란? ▶ 미디어 쿼리는 CSS3에 도입된 CSS 기법입니다. ▶ 특정 조건이 참인 경우에만 @media 규칙을 사용하여 CSS 속성 블록을 포함합니다. 1. 미디어 쿼리 문법 (Media Query Syntax) 미디어 쿼리는 미디어 유형으로 구성되며 참 또는 거짓으로 확인되는 식을 하나 이상 포함할 수 있습니다. @media not|only mediatype and (expressions) { CSS-Code; } 지정된 미디어 유형이 문서가 표시되는 장치 유형과 일치하고 미디어 조회의 모든 식이 참이면 조회 결과가 참입니다. 미디어 조회가 참이면 해당 스타일시트 또는 스타일 규칙이 일반 계단식 규칙에 따라 적용됩니다. 연산자를 사용하지 않는 한 미디어 유형은 선택 사항이며 모든 유형이 암시..