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로 링크의 기본·방문·마우스·활성 상태를 구분하고, 키보드 초점까지 보이게 만드는 방법을 설명합니다. 밑줄과 색 대비를 유지하면서 직접 확인할 수 있는 예제를 제공합니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
CSS / Tutorial / 선택자(Selector)
CSS의 요소·클래스·ID·속성 선택자가 어떤 HTML 요소를 고르는지 예제로 설명합니다. 여러 클래스를 가진 요소, 선택자가 일치하지 않을 때, ID와 클래스의 사용 기준도 다룹니다.
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.
CSS / Tutorial / CSS를 HTML에 적용시키는 방법
외부 CSS 파일, 문서 안의 style 요소, 인라인 스타일을 HTML에 적용하는 방법을 예제로 비교합니다. 파일 경로와 규칙이 겹칠 때의 확인 방법도 설명합니다.
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
CSS / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. 이를 반응형으로 만들고 싶다면 아래처럼 합니다.
테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.
CSS / Tutorial / ul, ol 가운데 정렬하는 방법
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.