CSS / columns / 다단으로 만들기
columns
- columns는 다단으로 만드는 속성입니다.
- 단의 최소 가로 크기와 단의 최대 개수가 속성의 값입니다. 기본값은 auto로, 값을 입력하지 않으면 auto로 처리합니다.
- IE는 버전 10 이상을 지원합니다.
예제 1
- 문단을 3단으로 만듭니다.
- 단의 최소 가로 크기가 설정되지 않았으므로 균등한 크기로 단이 만들어집니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb {
columns : 3;
}
</style>
</head>
<body>
<p class="jb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
</body>
</html>
예제 2
- 단의 최소 가로 크기를 200px로 하면, 균등한 크기로 분할했을 때 200px 보다 크면서 200px에 가장 가까운 가로 크기를 갖도록 단의 개수가 정해집니다.
- 웹브라우저의 가로 크기를 늘리면 단의 개수가 늘어납니다.
.jb {
columns : 200px;
}
예제 3
- 단의 최소 가로 크기를 100px, 단의 최대 개수를 10개로 정했습니다.
- 웹브라우저의 가로 크기를 늘리면 단의 개수가 늘어나지만, 10개를 넘지는 않습니다.
.jb {
columns : 100px 10;
}
HTML에 CSS를 적용시키는 방법은 세가지가 있다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선태한다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결한다. 보통 여러 문서에 적용되는 스타일은 Linking Style Sheet으로 만들고, 특정 ...
CSS / IE에서 표의 셀 안의 이미지 크기 설정하는 방법
표의 셀 안에 200x200 크기의 이미지를 넣고, 셀의 가로 크기를 100px로 정해도, 이미지는 200x200 크기로 나옵니다. 셀의 크기에 맞게 이미지가 줄어들게 하는 방법은 두가지가 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { ...
개요 border는 다음의 속성을 포함하는 단축 속성으로, 테두리를 만든다. border-width border-style border-color 문법 border: border-width border-style border-color | initial | inherit border-width : 테두리의 두께를 정한다. 기본값은 medium이다. border-style : 테두리의 모양을 정한다. 기본값은 none이다. border-color : 테두리의 색을 정한다. 기본값은 선택한 요소의 색이다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. border-width에는 다음의 값을 넣을 수 있다. medium | thick ...
CSS / clip / 요소의 특정 부분만 보이게 하는 속성
개요 clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2 문법 clip: auto | shape | initial | inherit auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 ...
구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다. 웹폰트 선택하기 웹브라우저로 Google Fonts에 접속한다. 왼쪽에서 적절히 필터한다. 한글 글꼴이 필요하다면 Language를 Korean으로 한다. 원하는 글꼴을 클릭한다. 사용할 스타일을 선택한다. 오른쪽에 선택한 글꼴과 스타일이 나오고, 웹폰트를 사용하기 위한 코드 예시가 나온다. 여러 글꼴과 스타일을 선택할 수도 있다. 웹폰트 사용하기 예를 들어 Noto Sans Korean 100과 400을 ...
CSS / IE8 이하에서 border-radius, box-shadow 적용시키는 방법
CSS3에서 많은 속성이 추가되었습니다. 그 중에서 개인적으로 가장 많이 사용하는 것이 border-radius입니다. 테두리를 둥글게 만들거나 이미지를 원으로 만들 때 이미지 편집 프로그램을 사용할 필요가 없기 때문입니다. 하지만 문제가 있습니다. IE8 이하에서는 적용되지 않는다는 것이죠. 이 문제를 해결해주는 것이 PIE입니다. 간단한 코드 한 줄로 IE8 이하에서도 border-radius를 적용시킬 수 있습니다. PIE 다운로드 다음 링크에서 PIE를 다운로드 받습니다. http://css3pie.com/download/ 업로드 압축을 풀면 ...
CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성
text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p { font-size: 20px; ...
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 우선 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기
엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다. 예를 들어 다음과 같은 표가 있다고 하자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
그리드에서 열 개수는 grid-template-columns로 정합니다. 그 개수를 넘어가면 행이 바뀌죠. 그리고 높이는 행마다 다르게 정해집니다. 예를 들어 다음과 같은 HTML 문서가 있을 때, 첫번째 행의 높이와 다른 행의 높이는 다릅니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...