본문 바로가기
반응형

HTML&CSS

쓸만한 CSS 그림자 효과들 0 2020. 12. 5. CSS 로 그림자 효과를 만들면 생각보다 보기좋고 적절한 그림자 효과를 만드는게 그렇게 만만하지 않습니다. 그래서 보통은 잘 만들어진 그림자 효과를 복사해 와서 사용하는 경우가 많습니다. 잘 만들어진 쓸만한 그림자 효과 몇가지를 소개합니다. 복붙해서 사용하면 됩니다. .shadow{ box-shadow: 0 4px 2px -2px rgba(0,0,0,0.7); } .shadow{ box-shadow: 0 4px 5px rgba(0, 0, 0, 0.6); } .shadow{ box-shadow: 0 5px 18px -7px rgba(0,0,0,1); } .shadow{ box-shadow: 0 17px 20px -18px rgba(0, 0, 0, 1); }
블록 태그 안의 이미지 밑에 여백이 남는 이유 0 2020. 12. 4. CSS를 처음 다루기 시작할 때 가장 많이 부딛히는 문제이며, 문제의 원인에 대한 이해가 없이 요행으로 문제가 해결되고 넘어가면서 같은 문제가 반복됩니다. 다음과 같이 이미지가 들어있는 단순한 블록 태그를 웹 페이지에 표시하면 하단에 다음처럼 여백이 남게 됩니다. 일단 이유를 모르고 이런 저런 속성을 추가하다보면 여백이 사라지고, 다음 번에 같은 문제가 또 생길 때 까지는 잊혀지게 됩니다. 원인을 먼저 설명합니다. 인라인(inline) 속성으로 표시되는 텍스트, 또는 이미지 컨텐츠는 컨텐츠 들이 정렬되는 기준 선이 있습니다. 인라인 요소의 기본 설정 기준선 값은 베이스라인(baseline) 입니다. 베이스라인은 다음처럼 텍스트를 표시할 때 문자(알파벳 기준)가 얹혀지는 기준 바닥(baseline)을 말합..
CSS 로 하이퍼링크 기본 스타일 초기화 하기 0 2020. 12. 4. HTML 페이지의 기본 하이퍼링크 속성은 스타일이 좋지 않기로 유명합니다. 눈에 잘띄는 목적에는 잘 맞지만, 우리가 만드는 대부분의 웹 페이지에서는 전혀 어울리지 않습니다. 대부분 웹브라우저에서 표현하는 기본 하이퍼링크 스타일은 다음과 같습니다. 하이퍼링크의 기본 색상은 "진파랑", 방문한 링크의 색상은 "진보라" 입니다. 단, 이 값은 구글 크롬을 기준으로 한 것입니다. 웹 표준으로 정해진 것이 아니라 웹 브라우저에서 기본 값으로 제공되는 것이기 때문에 웹 브라우저에 따라서는 색상이 약간씩 다를 수 있으므로 불변하는 절대 색상이 아닙니다. :link { color: #0000EE; } :visited { color: #551A8B; } 이 두 가상 클래스를 제외한 "hover", "active" 가상 ..
CSS로 글의 내용 표시 행 수를 제한하기 0 2020. 12. 4. 여러 개의 글을 목록으로 미리보기를 하거나, 블로그 글 목록, 상품 설명 미리보기 목록, 게시판 글 목록 처럼 글 내용의 일부를 몇 줄 이내로 잘라서 보여줄 때 일정한 줄 수가 유지되도록 레이아웃을 만드는데 유용합니다. 서버 쪽에서 웹 프론트엔드가 전달받는 내용은 대부분 글자 수를 기준으로 내용을 자른 내용일 것이고, 영문, 한글이 혼합된 경우가 많습니다. 미리보기 내용을 2줄로 출력할 경우 글자 수가 같아도 어떤 경우에는 2줄, 어떤 경우에는 3줄이 되기도 하고, 4줄이 될 때도 있습니다. 줄 수가 들쑥 날쑥한 것을 그대로 출력하면 레이아웃이 순차적으로 밀리거나, 하단에 일정하지 않는 여백이 남는 그다지 보기좋지 않은 웹 페이지를 보여주게 됩니다. CSS의 텍스트 속성들을 잘 사용하면 일정한 줄 수로 ..
CSS로 요소(Element)의 포커스 테두리 없애기 0 2020. 12. 4. 현재 활성화된 입력 요소, 또는 활성화 된 특정 HTML 태그 요소를 눈에 잘 띄도록 표시해주는 기능으로 포커스 테두리 기능이 있습니다. 포커스는 키보드 탭 키를 이용해 HTML 하이퍼링크, 또는 폼 입력 요소(, )를 이동할 때 현재 활성 상태인(포커스가 위치한) 요소를 알려주는 역할을 하는 속성으로 모든 웹 브라우저에서 기본으로 지원되는 기능입니다. 해당 요소에 포커스가 위치하면 요소를 활성 상태로 표시하기 위해 "outline" 속성이 기본 적용됩니다. "outline" 속성은 테두리 속성(border)와 같은 속성을 가지지만, 테두리 선 외곽에 위치하며, 자리를 차지하지 않습니다. "outline" 기본 속성 값은 CSS로 커스터마이징 할 수 있습니다. 사용자 가이드 기능으로 필수인 기능이지만, ..
CSS 가상 요소를 활용해 삼각형 화살표 만들기 0 2020. 12. 3. CSS 테두리 선으로 삼각형 화살표 만들기 내용을 먼저 읽고 보면 이해가 쉽습니다. -> 테두리 선으로 삼각형 화살표 만들기 블록 요소의 테두리 선을 활용해 삼각형을 만들면, 만든 삼각형을 원하는 블록 요소 안에 넣은 후 위치를 잡는 배치 작업을 해야합니다. 원하는 위치를 잡는 과정은 마진(margin)과 "left", "top" 속성 등을 활용해 어렵지 않게 붙일 수 있지만, HTML에 태그가 추가되고, 위치를 잡는데 필요한 CSS를 더 작성해서 관리를 해야 합니다. 가상 요소(Pseudo Element) 를 활용하면 별도의 태그 추가 없이도 삼각형을 부착하고 싶은 대상에 바로 붙일 수 있기 때문에 여러가지 번거로운 작업을 줄일 수 있습니다. 가상 요소를 활용해 삼각형 화살표를 만드는 원리는 다음과 같..
CSS 테두리 선으로 삼각형 화살표 만들기 0 2020. 12. 3. CSS 트릭을 활용하면 제한적이지만 삼각형 도형을 만들어 활용할 수 있습니다. 삼각형을 만드는 트릭은 두꺼운 상하좌우의 테두리선(border)을 맞붙여서 삼각형 형태를 만드는 것으로 다음과 같은 원리로 만들어집니다. .arrow-up{ width: 0; height: 0; border-left: 20px solid white; border-right: 20px solid white; border-bottom: 20px solid purple; } 위쪽 삼각형 화살표를 만드는 방식은 다음과 같습니다. 상단 화살표 외에 각 방향으로 화살표를 만들어 사용할 수 있습니다. .arrow-up{ width: 0; height: 0; border-bottom: 20px solid purple;/* 화살표 */ bor..
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 속성의 완벽 이해 2 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;"를 선언한 요소를 플렉스박스, 또는 플렉스박스 컨테이너 라고 하며, 플렉스박스 요소들을 담는 그릇의 역할을 합니다. 플렉..
반응형
✖️닫기

티스토리툴바