CSS 원 테두리 글자

CSS 원 문자

CSS로 원 문자를 만드는 방법을 알아본다. 구현 방법은 문자를 포함하는 요소의 테두리선을 원형으로 바꿔주는 것이다. 이를 위해서 border-radius: 50%를 적용하고, 글자들의 위치를 잡아주면 된다.

CSS 초기화 코드

CSS 초기화 코드

CSS 초기화 코드를 제시하고, 왜 이런 초기화 코드를 작성하는지를 예제를 통해서 보입니다. 초기화 코드는 Eric Meyer가 제시한 코드를 기반으로 합니다.

CSS 래퍼 (wrapper, wrap, container)

CSS에서 래퍼(wrapper)란 여러 요소들을 그룹핑하는 요소를 말한다. 래퍼를 사용하는 이유는 내용물에 여백을 주기 위해서이다. 래퍼는 다음과 같은 3가지 기능을 한다: 여백설정, 최대 너비 설정, 가운데 정렬.

CSS로 세모 그리기

CSS만으로 세모를 그릴 수 있다. 기본 원리는 div의 테두리선 모양을 정확히 이해하는 것이다. div를 이용하여 크기가 0인 사각형을 만들고, 한 쪽 모퉁이의 테두리선만 남겨두고 나머지 테두리선을 투명하게 처리하면 삼각형을 만들 수 있다.

【CSS】 아이디 선택자 예제 코드

CSS 아이디 선택자는 특정 id값을 가지는 태그를 선택할 때 사용한다. HTML 규정 상 여러 태그들에 중복으로 같은 id값을 넣을 수 없기 때문에, 단 1개의 태그를 선택할 때 사용된다.

【CSS】 전체 선택자 (*)

전체 선택자 *는 모든 태그들을 선택할 때 사용한다. 자주 사용되지는 않는 선택자이지만, 스타일시트의 초반에 스타일을 초기화할 때 사용하면 유용하다.

CSS 실제 동작하는 버튼, 팝업창 만들기

자바스크립트를 사용하지 않고, CSS만을 이용하여 실제로 동작하는 버튼을 만들 수 있다. 버튼을 클릭시 팝업창을 띄우는 예제를 만들어 봅니다. 버튼 클릭시 checkbox가 체크되고, CSS의 checked 상태 선택자에 의해 팝업창이 보이게 됩니다.

CSS Table로 코드입력창 만들기 예제

table 태그를 이용하여 예쁜 코드창을 직접 만들어 봅니다. 첫 번째열은 줄의 숫자를 넣고, 두 번째 열은 코드를 넣습니다. 간단하면서 깔끔한 코드창을 만들어서 직접 웹사이트에 사용해봐요.