CSS

플렉스박스의 유연한 레이아웃을 가능하게 하는 가장 중요한 속성 2가지가 "flex-grow" 와 "flex-shrink" 입니다. 두 속성은 "flex-basis" 속성으로 정한 플렉스박스 아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능을 합니다. 두 속성이 빈 여백, 또는 넘친 아이템 영역을 분배해서 레이아웃 영역 안에 아이템들이 배치되도록

입력 가능한 필드, 또는 선택 가능한 폼 요소에 가이드 텍스트를 표시하는 플레이스홀더(Placeholder) 는 HTML 에서는 태그 속성으로 표현을 하지만, CSS 입장에서는 가상 요소(Pseudo Element) 입니다. 따라서 CSS에서 플레이스홀더에 접근하려면 가상 요소 선택자를 이용해 접근해야 합니다. 다음과 같은 입력 요소의 플레이스홀더에 접근하려면 다음처럼 가상 요소 선택자를 이용해 접근할 수

배경 이미지를 영역 크기에 맞춰 전체 영역을 채울 때는 background-size: 100% 100%; 속성을 태그에 부여하면 됩니다. 영역 크기와 배경에 적용한 이미지의 종횡비(Aspect ratio)가 맞지 않는 경우 이미지의 종횡비를 무시하고 이미지를 늘려서 채우지만, SVG 이미지는 비트맵 이미지와 달리 이미지가 늘어나지 않습니다. SVG 이미지는 기본 설정으로 종횡비가 유지되도록 되어있기 때문에

사용빈도가 낮은 태그 고급 속성들 특정 타입(type) 전용으로만 사용하는 속성(attribute)들과, HTML5 표준 속성으로 정의되어 있지만 실무에서는 많이 사용하지 않는 속성들입니다. 초보자라면 참고삼아 이해정도만하고 일단 넘어가고 사용할 일이 있을 때나 해당 속성을 보게되면 참조삼아 아래표를 봐가면서 사용하면 됩니다. 속성  사용값  설명  accept audio/*,  video/*,  image/*,  .gif, .jpg, .png,

CSS 속성 중 블록 요소에 여백을 추가하는 속성은 패딩(padding) 과 마진(margin) 이 있습니다. 그중 마진(margin) 속성은 요소의 외곽에 여백을 설정하는 속성입니다. 그리고,  마진(margin) 속성에는 패딩(padding) 속성에는 없는 "auto" 속성 값 추가로 있습니다. 이 "auto" 속성 값이 레이아웃을 배치하는데 여러가지 마법을 만들어 냅니다. 특히 상하좌우에 남는

이미지 지연 로딩, 또는 레이지 로딩(Lazy loading)이라고 하는 웹 기술은 웹의 반응성과 검색 최적화를 위한 최신 기법 중의 하나입니다. 지연 로딩은 웹 페이지에 포함된 이미지가 웹 브라우저 뷰포트 안에 표시되기 시작하는 시점에 로딩(네트워크를 통해 이미지를 가져옴)하는 기법을 말합니다. 특히 웹 페이지 안에 이미지 갯수가 많거나 용량이

폼에 사용하는 버튼들 중 가장 대표적인 것은 "저장", "취소" 같은 선택 버튼입니다. 밋밋한 버튼보다는 마우스 호버(hover)시에 버튼이 활성화 되는 효과를 주면 보기에도 좋고, 사용자에게 누를 수 있는 버튼이라는 것을 알려주는 안내 역할을 하기도 합니다. 간단한 트랜지션 애니메이션 효과로 마우스호버 효과를 적용할 수 있습니다. 먼저 버튼 2개를 만듭니다.

CSS 에는 꽤 많은 유닛 단위가 사용됩니다. 모바일 기기, 또는 레티나(Retina) 디스플레이와 같은 고해상도 기기가 나오기 전에는 웹의 세상은 픽셀(px) 단위를 사용하는 것이 기본이었습니다. 그리고 CSS 규격에는 96ppi(Pixel per inch) 라는 실제 크기에 대한 픽셀의 갯수도 정해져 있었습니다. 우리가 사용하는 픽셀 단위의 CSS 크기 단위는 1인치 너비에

CSS 초기화를 하는 이유 모든 웹 브라우저에는 기본 설정값이라고 하는 미리 정해둔 CSS 기본 속성 값들이 있습니다. 아무런 CSS 속성을 사용하지 않아도 HTML 태그만으로 표시할 때 이 기본 값 속성들이 적용됩니다. 우리가 아는 대부분의 데스크탑 웹 브라우저는 기본 글자 크기를 "16px" 로 사용하고 있고, 글자색은 검정색, "" 태그에는 "8px"의 마진(

인터넷 익스플로러 호환성 이슈로 사용빈도가 낮은 속성 중에는 이미지나 요소를 정렬하고 배치하는 과정을 극단적으로 쉽게 해주는 속성들이 여러 개 있습니다. 그중 이미지나 비디오를 영역 안에 적절하게 정렬해서 배치하는 속성으로 "object-fit" 과 "object-position" 이 있습니다. 이미지와 비디오에 동일한 배치 속성이 적용되며, 이미지를 배치하는 방법으로 알아보겠습니다. 이미지를 영역 안에 배치하는 모든 배치