본문 바로가기
반응형

분류 전체보기

CSS 텍스트영역(<textarea>) 크기 조절 차단하기 0 2020. 12. 3. 입력 폼 필드 중 텍스트영역()은 자동 크기 조절 속성이 있기 때문에 웹페이지에서 텍스트영역의 크기를 사용자가 조정할 수 있습니다. 기본 크기가 너무 작거나, 입력할 내용이 많아서 큰 텍스트 영역을 필요하면 마우스 드래그로 오른쪽 아래의 컨트롤을 당겨서 크기를 더 늘릴 수 있습니다. 텍스트영역() 의 크기 조절이 되지 않도록 막으려면 다음처럼 텍스트영역에 "resize" 속성을 부여하면 됩니다. textarea{ resize: none; } "none" 속성을 부여한 텍스트영역은 영역 오른쪽 하단의 크기 조절 컨트롤이 사라지고 처음 정해진 크기로만 표시됩니다. "resize" 속성 값은 "both", "horizontal", "vertical", "none" 4가지가 가능하며, 속성 값 그대로 양방향 크..
CSS 플레이스홀더(placeholder) 스타일 정의하기 0 2020. 12. 3. 입력 가능한 필드, 또는 선택 가능한 폼 요소에 가이드 텍스트를 표시하는 플레이스홀더(Placeholder) 는 HTML 에서는 태그 속성으로 표현을 하지만, CSS 입장에서는 가상 요소(Pseudo Element) 입니다. 따라서 CSS에서 플레이스홀더에 접근하려면 가상 요소 선택자를 이용해 접근해야 합니다. 다음과 같은 입력 요소의 플레이스홀더에 접근하려면 다음처럼 가상 요소 선택자를 이용해 접근할 수 있습니다. 가상 요소 선택자로 선택한 플레이스홀더는 HTML 텍스트에 적용하는 텍스트 스타일 속성을 그대로 사용할 수 있습니다. input[name=userid]::-ms-input-placeholder { /* 인터넷 익스플로러 */ color: #a00; font-size: 0.9375em; } i..
CSS 텍스트 선택 차단하기 0 2020. 12. 3. CSS 표준화가 어느정도 진행되면서 과거 자바스크립트로만 텍스트 선택 차단(드래그 차단, 더블클릭 차단)이 CSS 만으로도 가능해지게 되었습니다. 벤더 프리픽스(Vendor Prefix) 와 함께 사용하면 웹 브라우저에 무관하게 텍스트 선택을 차단할 수 있습니다. CSS 속성 중 텍스트 선택과 관련된 제어를 하는 속성은 "user-select" 속성입니다. 텍스트 테그에만 속성이 적용되며, 사용 가능한 속성 값은 다음과 같습니다. 참고로 사용자가 텍스트 선택을 위해 할 수 있는 "텍스트 선택 동작"은 마우스 드래그, 마우스 더블 클릭, 마우스 트리플 클릭, 컨텍스트 선택(마우스 오른쪽 버튼 클릭으로 선택 영역 선택), 키보드 "Ctrl + A" 동작입니다. 속성 값 설명 none 요소 안의 텍스트 내용과..
CSS 플렉스박스(flex) flex-grow와 flex-shrink 속성의 완벽 이해 0 2020. 12. 2. 플렉스박스의 유연한 레이아웃을 가능하게 하는 가장 중요한 속성 2가지가 "flex-grow" 와 "flex-shrink" 입니다. 두 속성은 "flex-basis" 속성으로 정한 플렉스박스 아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능을 합니다. 두 속성이 빈 여백, 또는 넘친 아이템 영역을 분배해서 레이아웃 영역 안에 아이템들이 배치되도록 하는 방식에 대해서 알아보겠습니다. flex-grow 속성이 남는 행 여백을 분배해서 채우는 방법 flex-grow 속성이 적용되지 않거나, 속성 값이 "0" 인 경우 레이아웃 너비보다 아이템들의 너비 합이 더 작으면 아이템 오른쪽 끝에 여백이 남게 됩니다. 다음과 같..
CSS 플렉스박스(flex)로 반응형 레이아웃 만들기 0 2020. 12. 2. 플렉스박스는 이름 그대로 레이아웃을 만들 때 아주 유연하고 동적인 구조를 유지할 수 있는 박스 모델입니다. 유연한 레이아웃을 유지하는 플렉스박스의 속성을 잘 활용하면 미디어쿼리 없이도 웹브라우저 너비와 다양한 디바이스에 대응하는 반응형 레이아웃을 만들 수 있습니다. 미디어쿼리를 이용한 CSS 속성 재정의보다 적은 CSS 작성으로 반응형 레이아웃을 만들 수 있기 때문에, 코드 유지보수 또한 더 단순하고 효율적으로 할 수 있습니다. 플렉스박스로 레이아웃을 만들기 위해서는 몇 가지 중요한 플렉스박스 속성에 대해 알아야 합니다. 레이아웃을 만드는 플렉스박스 속성들 "display: flex;"를 선언한 요소를 플렉스박스, 또는 플렉스박스 컨테이너 라고 하며, 플렉스박스 요소들을 담는 그릇의 역할을 합니다. 플렉..
클라우스탈러 무알콜 맥주 시음기 1 2020. 11. 29. 집안 대대로 대먹던 칭따오 무알콜이 바닥이 나서 쿠팡에 재주문을 하려고 했는데... 클라우스탈러가 눈에 띄었습니다. 판매지수도 높고 리뷰도 비교적 좋아서 5천원이나 더 비싼 가격에도 불구하고 칭따오를 배신하고 주문... 24개 기준이니까 개당 200원 정도 더 비쌉니다. 24팩 박스 기준 3만원 정도입니다. 가격 자체가 비싼게 아니라 수입 과정에서 운송비가 더 붙은 거라고 봐야 할 것 같습니다. 독일에서 오냐 중국에서 오냐 차이 정도... 이틀만에 한박스 도착! 독일 맥주라고 어찌나 자랑질?을 하고 싶었는지 캔에다 "IMPORTED FROM GERMANY" 라고 인쇄까지 해놨습니다. 디자인은 솔직히 좀 후졌습니다. 시원한 청량감 같은건 전혀 느껴지지 않는... 갬성 같은건 일도 느껴지지 않는 후진 독일 ..
배경에 적용한 svg 이미지가 CSS background-size 속성이 적용되지 않을 때 해결하는 방법 0 2020. 11. 29. 배경 이미지를 영역 크기에 맞춰 전체 영역을 채울 때는 background-size: 100% 100%; 속성을 태그에 부여하면 됩니다. 영역 크기와 배경에 적용한 이미지의 종횡비(Aspect ratio)가 맞지 않는 경우 이미지의 종횡비를 무시하고 이미지를 늘려서 채우지만, SVG 이미지는 비트맵 이미지와 달리 이미지가 늘어나지 않습니다. SVG 이미지는 기본 설정으로 종횡비가 유지되도록 되어있기 때문에 그래픽 프로그램에서 저장한 SVG 이미지를 태그 배경 이미지로 붙이면 "background-size" 속성이 적용되지 않고 종횡비가 그대로 유지됩니다. SVG 이미지의 종횡비가 무시되도록 하려면 SVG 이미지를 텍스트 편집기에서 연 후 preserveAspectRatio="none" 속성을 태그 안에 ..
CSS 플렉스박스(flex)와 마진(margin)으로 반응형 메뉴 만들기 0 2020. 11. 28. CSS 속성 중 블록 요소에 여백을 추가하는 속성은 패딩(padding) 과 마진(margin) 이 있습니다. 그중 마진(margin) 속성은 요소의 외곽에 여백을 설정하는 속성입니다. 그리고, 마진(margin) 속성에는 패딩(padding) 속성에는 없는 "auto" 속성 값 추가로 있습니다. 이 "auto" 속성 값이 레이아웃을 배치하는데 여러가지 마법을 만들어 냅니다. 특히 상하좌우에 남는 공간이 자동으로 배분되기 때문에 "auto" 속성은 레이아웃을 만드는 복잡한 과정을 단순화 해주는 장점이 있습니다. 마진 속성을 사용해 메뉴에 여백을 배치하는 방법을 먼저 알아 보겠습니다. 마진으로 플렉스박스 아이템 여백 배분하기 "auto" 속성 값은 동위 요소들에 부여된 "auto" 갯수만큼 남는 여백을 배..
HTML 속성으로 네이티브 이미지 지연 로딩(Lazy loading) 하기 0 2020. 11. 27. 이미지 지연 로딩, 또는 레이지 로딩(Lazy loading)이라고 하는 웹 기술은 웹의 반응성과 검색 최적화를 위한 최신 기법 중의 하나입니다. 지연 로딩은 웹 페이지에 포함된 이미지가 웹 브라우저 뷰포트 안에 표시되기 시작하는 시점에 로딩(네트워크를 통해 이미지를 가져옴)하는 기법을 말합니다. 특히 웹 페이지 안에 이미지 갯수가 많거나 용량이 큰 이미지를 로딩해야 하는 경우 지연 로딩이 없으면, 이미지가 모두 로딩 완료될 때까지 웹페이지는 로딩 상태로 표시되며, 사용자 인터렉션도 되지 않습니다. 이미지 로딩이 완료되지 않는 시간동안 사용자는 웹페이지에 조작을 할 수 없기 때문에 하염없이 기다리게 되고, 방문자가 이탈하는 주요 원인이 되기도 합니다. 이미지 지연 로딩을 하는 방법은 크기 자바스크립트를 ..
CSS 버튼 애니메이션 만들기 0 2020. 11. 26. 폼에 사용하는 버튼들 중 가장 대표적인 것은 "저장", "취소" 같은 선택 버튼입니다. 밋밋한 버튼보다는 마우스 호버(hover)시에 버튼이 활성화 되는 효과를 주면 보기에도 좋고, 사용자에게 누를 수 있는 버튼이라는 것을 알려주는 안내 역할을 하기도 합니다. 간단한 트랜지션 애니메이션 효과로 마우스호버 효과를 적용할 수 있습니다. 먼저 버튼 2개를 만듭니다. 저장 취소 ".btn" 클래스로 버튼 디자인을 입힙니다. .btn{ background-color: #f8f8f8; color: #888; border: 1px solid #e8e8e8; font-size: 1.125em; letter-spacing: 0px; padding: 10px 60px; cursor: pointer; display: inl..
반응형
닫기

티스토리툴바