구글 블로그 만들기

공백이 제대로 처리되지 않는다면 문서가 지저분해 보일 수도 있습니다. 이럴 때 whith-space 속성을 사용하면 텍스트와 함께 연속해 입력된 여러 개의 공백을 어떻게 처리할지 지정할 수 있습니다.

인용문(Blockquote) 스타일링 예제 다음은 인용문을 꾸미는 몇 가지 예제입니다.

인용문의 기호를 바꾸는 방법 <q> 태그는 문단 안에서 사용하는 인용문입니다. 기본 모양은 큰따옴표로 감싸는 것입니다. 간단한 예는 다음과 같습니다.

링크 꾸미기 링크가 걸린 글자 꾸미는 방법은 <a> 태그를 선택하여 꾸밉니다. 예를 들어 아래 코드는 링크의 색을 빨간색으로 만듭니다.

em, rem CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정하는 단위입니다.

짧은 밑줄 만들기 밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다.

::selection 웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다.사용하는 선택자는 가상 요소 ::selection 입니다.

체크박스 꾸미는 방법 체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을 만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질을 이용합니다.

체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 to…

버튼 사이즈 조절하는 방법 기본 네모 박스에 CSS를 추가하여 사이즈를 조절할 수 있습니다. 몇 가지 방법에 대해서 알아보겠습니다.

반응형 레이아웃 모바일 화면을 위해 가로 크기를 100%로 했을 때, 안쪽의 내용이 길어지면 줄바꿈이 되어 크기를 유지하거나 스크롤바가 생깁니다. 하지만 레이아웃이 변경되는 것을 원하지 않을 수도 있습니다. 해결 방법을 아래의 예제를 통해서 살펴보겠습…

동영상을 배경으로 사용하는 방법 동영상을 배경으로 사용하면 좀 더 다이나믹하고 화려하게 웹페이지를 꾸밀 수 있습니다.

세로 가운데 정렬하는 방법 CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다.

다음은 이미지와 텍스트가 있는 간단한 코드입니다. 이미지는 흑백 사진이고, 텍스트의 배경색은 구분하기 쉽도록 노란색으로 했습니다.

calc() calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다.

clip clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. position 속성값이 absolute 또는 fixed일 때만 적용됩니다.

이미지 가운데 정렬하는 방법 이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다.

이미지 비율 맞추기 텍스트는 일반적으로 바뀐 폭에 맞추어 자동으로 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다.

opacity opacity로 투명도를 정할 수 있습니다.