CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다.
placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
다음은 placeholder 속성이 있는 꾸미기 전의 input과 textarea입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
box-sizing: border-box;
font-family: Georgia;
}
input {
width: 100%;
padding: 10px 10px;
font-size: 20px;
}
textarea {
width: 100%;
height: 100px;
padding: 10px 10px;
font-size: 20px;
}
</style>
</head>
<body>
<p><input placeholder="This is input. Input some text..."></p>
<textarea placeholder="This is textarea. Input some text..."></textarea>
</body>
</html>
다음은 ::placeholder 선택자로 글자 색과 모양을 바꾼 것입니다.
input::placeholder {
color: red;
font-style: italic;
}
textarea::placeholder {
color: blue;
font-weight: bold;
}
웹브라우저에 따라 모양이 다르게 나올 수 있습니다. 예를 들어 파이어폭스에서는 다음과 같이 나옵니다.
CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법
마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.
CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법
blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.
CSS 강좌 / 작은 학습 사이트를 반응형으로 꾸미는 종합 실습
작은 학습 사이트를 공통 스타일·Flexbox 헤더·유동 제목·Grid 카드 순서로 완성합니다. 전체 파일과 반응형·초점·긴 내용·움직임 감소 점검 방법을 제공합니다.
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다. 표(table) : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬
CSS 강좌 / width, height, min, max, box-sizing으로 크기 조절하기
content-box와 border-box의 너비 계산, 최소·최대 크기, 고정 높이와 내용에 맞는 높이를 비교합니다. 화면과 글자 크기를 바꾸며 넘침을 진단하고 백분율 높이의 조건을 확인합니다.
CSS 강좌 / ::before와 ::after로 가상 요소 꾸미기
::before와 ::after로 HTML을 늘리지 않고 장식용 점과 선을 추가합니다. content·display·currentColor의 역할, 실제 적용 전후 화면, 전체 코드와 가상 요소가 안 보일 때의 점검 방법을 설명합니다.
링크의 기본 밑줄과 방문·호버·활성 상태를 설정하고 키보드 포커스를 표시합니다. 두 파일로 방문 이력과 Tab·Enter 동작을 확인하며 상태 규칙이 겹칠 때의 결과를 설명합니다.
CSS 강좌 / 모바일·큰 화면·확대 보기에서 레이아웃 점검하기
점검용 페이지에서 화면 폭, 확대, 긴 문자열과 키보드 조작을 확인합니다. 가로 넘침과 글자 잘림을 재현하고 원인 확인부터 수정·재점검까지 실습합니다.
테두리와 윤곽선의 차이, 둥근 모서리, 그림자의 이동·흐림·퍼짐을 설명합니다. 원·타원과 부모 영역에서 그림자가 잘리는 상황을 실제 예제로 비교합니다.