허도경, limewhale

CSS 작업에 사용하면 유용한 요소인 속성 선택자를 정리해 봅니다. 💡 [attribute] a[target] { color: red; } a 태그에 target이라는 속성을 가진 요소를 선택합니다. link 선택함 link 선택하지 않음 💡 [attribute=”value”] a[target="_blank"] { color: red; } a 태그에 target=”_blank”라는 속성을 가진 요소를 선택합니다. ※ target이 반드시 _blank인 요소만 선택됩니다.(주의!) link 선택함 link 선택하지 않음 link 선택하지 않음 💡 [attribute~=”value”] div[class~="apple"] { background-color: red; } apple이라는 class를 가진 요소를..

디자이너에게 전달받은 디자인을 GUI 작업을 할 때 많이 사용되는 부분 중 하나가 X(닫기) 버튼입니다. 이걸 모두 이미지로 관리하자니 모양이나 크기만 조금 다를 뿐인데 리소스 관리적인 부분에서 상당히 비효율적인 부분이 발생하게 됩니다. 이때 X(닫기) 버튼을 이미지가 아닌 CSS로 만들어서 관리하면 이슈 대응도 편리하고 리소스적인 부분도 중복되지 않아서 효율적입니다. CSS로 X 버튼을 만드는 방법입니다. 첫 번째 방법 : content: "\00d7"를 활용 가상 선택자(before, after)에 content: "\00d7"; 만 추가해주면 아주 간단하게 X 버튼이 만들어 집니다. 크기는 font-size로 조정하면 되고 크기를 키울수록 굵기가 자동으로 굵어집니다. 다만 이 방법은 굵기의 세밀함을..

CSS 그리드 레이아웃이란? CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 컨트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. Flex와 지금 공부할 Grid의 가장 차이점은 Flex는 한 방향 레이아웃 시스템이고 (1차원) Gri..

요즘 웹 사이트들이 사용자의 편의성을 위해서 웹 화면의 모드 변경(*다크 모드) 기능을 제공하고 있습니다. 또는 하나의 프로토타입 구조에 마크업이나 별도의 구조 변경 없이 컬러 값, 배경색의 변경을 통해서 다양한 테마형태로 전혀 다른 분위기의 화면을 연출하고 싶은 경우도 생기게 됩니다. 이를 CSS로 제어하기 위해서 모든 태그에 적용되는 CSS에 해당 테마에 맞는 컬러 값을 정의하는 것은 매우 힘든 작업이 됩니다. 이를 조금은 효율적으로 활용하기 위한 방법을 공유합니다. 그것은 :root 속성을 활용하는 방법입니다. CSS의 :root는 문서 트리의 루트 요소를 선택합니다. HTML의 루트 요소는 요소 선택자를 나타냅니다. :root { background: yellow; } CSS의 :root 선택자에..

Input 요소나 Textarea에 가이드 텍스트를 제공할 때 아주 손쉽게 사용할 수 있는 게 html5 속성 중 placeholder속성입니다. 아주 예전에는 크로스 브라우징을 위해 스크립트를 이용하여 구현을 많이 했지만 요즘은 placeholder속성을 기본적으로 사용하는것 같습니다. 다만 이렇게 편리한 placeholder기능을 우리가 CSS로 수정하고 싶을 때 CSS에서 요소를 바로 수정해 보면 수정이 되지 않는 걸 알 수 있습니다. placeholder 속성의 컬러값을 바꾸고 싶으면 웹킷 전용 속성을 CSS에 사용해 주어야 하며 placeholder 속성은 IE 9 이상부터 정상적으로 지원합니다. /* 웹킷 전용 속성 */ input::-moz-input-placeholder {} input::..

우리는 CSS의 속성을 이용하여 화면에 특정 영역을 보이지 않게 처리할 때 display:none과 visibility:hidden 속성을 사용하게 됩니다. 두 속성 모두 화면에 정의하면 결과는 똑같이 화면에서 콘텐츠가 사라지게 되지만 이 둘의 속성을 사용하는 목적은 명확하게 다릅니다. 지금부터 이 둘의 차이점을 같이 알아보도록 해요. 1. 영역의 인식 display:none과 visibility:hidden의 속성에서 가장 큰 차이점은 바로 영역의 인식입니다. 두 속성 모두 화면상에서 콘텐츠 영역을 동일하게 숨기는 역할을 하지만 그 둘에는 엄청난 차이가 있습니다. display:none 속성을 이용하면 해당 콘텐츠가 안 보이게 되면서 해당 콘테츠가 가지고 있던 있던 영역 또한 사라지게 됩니다. 하지만 ..

마크업을 하고 UI 개발을 하다 보면 우리는 매번 너무나 익숙하게 습관처럼 사용하는 코드를 사용합니다. 태그도 각각의 태그가 가지고 있는 의미에 맞게 사용하고 보다 좋은 코드는 무엇일까 고민하면서 작업한다면 분명 우리는 어제보다 조금 더 나아진 코드를 마주하게 될 거예요. 평소에 무심코 사용하는 HTML과 CSS의 숨겨졌던 새로운 모습을 정리해보겠습니다. 1. dl 태그는 반드시 와 의 구조로 쌍을 이뤄서만 사용해야 하는 것은 아닙니다. dl (definition list : 정의 목록) 요소 - 블록 레벨 요소로 dt, dd 요소 이외의 요소를 포함할 수 없으며 용어를 설명하는 목록입니다. dt (definition term : 정의 용어) 요소 - 블록 레벨 요소로 용어의 제목을 나타냅니다. dd (..