CSS

CSS 로 그림자 효과를 만들면 생각보다 보기좋고 적절한 그림자 효과를 만드는게 그렇게 만만하지 않습니다. 그래서 보통은 잘 만들어진 그림자 효과를 복사해 와서 사용하는 경우가 많습니다. 잘 만들어진 쓸만한 그림자 효과 몇가지를 소개합니다. 복붙해서 사용하면 됩니다. .shadow{ box-shadow: 0 4px 2px -2px rgba(0,0,0,0.7); } .shadow{ box-shadow: 0

CSS를 처음 다루기 시작할 때 가장 많이 부딛히는 문제이며, 문제의 원인에 대한 이해가 없이 요행으로 문제가 해결되고 넘어가면서 같은 문제가 반복됩니다. 다음과 같이 이미지가 들어있는 단순한 블록 태그를 웹 페이지에 표시하면 하단에 다음처럼 여백이 남게 됩니다. 일단 이유를 모르고 이런 저런 속성을 추가하다보면 여백이 사라지고, 다음 번에 같은 문제가 또

HTML 페이지의 기본 하이퍼링크 속성은 스타일이 좋지 않기로 유명합니다. 눈에 잘띄는 목적에는 잘 맞지만, 우리가 만드는 대부분의 웹 페이지에서는 전혀 어울리지 않습니다. 대부분 웹브라우저에서 표현하는 기본 하이퍼링크 스타일은 다음과 같습니다. 하이퍼링크의 기본 색상은 "진파랑", 방문한 링크의 색상은 "진보라" 입니다. 단, 이 값은 구글 크롬을 기준으로 한 것입니다. 웹 표준으로 정해진

여러 개의 글을 목록으로 미리보기를 하거나, 블로그 글 목록, 상품 설명 미리보기 목록, 게시판 글 목록 처럼 글 내용의 일부를 몇 줄 이내로 잘라서 보여줄 때 일정한 줄 수가 유지되도록 레이아웃을 만드는데 유용합니다. 서버 쪽에서 웹 프론트엔드가 전달받는 내용은 대부분 글자 수를 기준으로 내용을 자른 내용일 것이고, 영문, 한글이 혼합된

태그쌍 안의 폼 태그 요소들은 기본적으로 사용자와 상호반응해 입력/선택된 결과값을 서버에 전송해 영구적으로 저장을 하기 위한 태그들입니다.

태그는 폼 안에 포함된 필드 값들을 결국 서버에 있는 어딘가로 전송하기 위한 정보와 처리과정이 반드시 있게 됩니다. 태그의 속성(Attribute)들은 폼안의 어떤 값들을 어떤식으로 어디로 전송하겠다는 내용을 기본적으로 표시해야 합니다. 이런

현재 활성화된 입력 요소, 또는 활성화 된 특정 HTML 태그 요소를 눈에 잘 띄도록 표시해주는 기능으로 포커스 테두리 기능이 있습니다. 포커스는 키보드 탭 키를 이용해 HTML 하이퍼링크, 또는 폼 입력 요소(, )를 이동할 때 현재 활성 상태인(포커스가 위치한) 요소를 알려주는 역할을 하는 속성으로 모든 웹 브라우저에서 기본으로 지원되는 기능입니다.

CSS 테두리 선으로 삼각형 화살표 만들기 내용을 먼저 읽고 보면 이해가 쉽습니다. -> 테두리 선으로 삼각형 화살표 만들기 블록 요소의 테두리 선을 활용해 삼각형을 만들면, 만든 삼각형을 원하는 블록 요소 안에 넣은 후 위치를 잡는 배치 작업을 해야합니다. 원하는 위치를 잡는 과정은 마진(margin)과 "left", "top" 속성 등을 활용해

CSS 트릭을 활용하면 제한적이지만 삼각형 도형을 만들어 활용할 수 있습니다. 삼각형을 만드는 트릭은 두꺼운 상하좌우의 테두리선(border)을 맞붙여서 삼각형 형태를 만드는 것으로 다음과 같은 원리로 만들어집니다. .arrow-up{ width: 0; height: 0; border-left: 20px solid white; border-right: 20px solid white; border-bottom: 20px solid purple; } 위쪽 삼각형 화살표를 만드는 방식은 다음과

플렉스박스는 이름 그대로 레이아웃을 만들 때 아주 유연하고 동적인 구조를 유지할 수 있는 박스 모델입니다. 유연한 레이아웃을 유지하는 플렉스박스의 속성을 잘 활용하면 미디어쿼리 없이도 웹브라우저 너비와 다양한 디바이스에 대응하는 반응형 레이아웃을 만들 수 있습니다. 미디어쿼리를 이용한 CSS 속성 재정의보다 적은 CSS 작성으로 반응형 레이아웃을 만들 수 있기 때문에, 코드 유지보수

CSS 표준화가 어느정도 진행되면서 과거 자바스크립트로만 텍스트 선택 차단(드래그 차단, 더블클릭 차단)이 CSS 만으로도 가능해지게 되었습니다. 벤더 프리픽스(Vendor Prefix) 와 함께 사용하면 웹 브라우저에 무관하게 텍스트 선택을 차단할 수 있습니다. CSS 속성 중 텍스트 선택과 관련된 제어를 하는 속성은 "user-select" 속성입니다. 텍스트 테그에만 속성이 적용되며, 사용 가능한