CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성
개요
box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다.
- 기본값 :
content-box - 상속 : No
- 애니메이션 : No
- 버전 : CSS Level 3
문법
box-sizing: content-box | border-box | initial | inherit
content-box: 콘텐트 영역을 기준으로 크기를 정한다.border-box: 테두리를 기준으로 크기를 정한다.initial: 기본값으로 설정한다.inherit: 부모 요소의 속성값을 상속받는다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
margin: 0px;
}
div {
margin: 20px;
padding: 20px;
border: 20px solid #dddddd;
width: 500px;
}
.cb {
box-sizing: content-box;
}
.bb {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="cb">
<p>content-box</p>
</div>
<div class="bb">
<p>border-box</p>
</div>
</body>
</html>
둘 다 width 값을 500px로 정하였으나, box-sizing 속성값에 따라 크기기 달라진다.
첫 번째 박스는 콘텐트 영역이 500px이고 테두리를 포함한 크기는 580px이다.
두 번째 박스는 테두리를 포함한 크기가 500px이고, 콘텐트 영역의 크기는 420px이다.
짧은 밑줄 만들기 밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 그런데 그렇게 만든 밑줄은 선택한 요소 전체에 적용됩니다. 즉, 요소가 길면 밑줄도 길게 만들어지고, 요소가 짧으면 밑줄도 짧게 만들어집니다. 요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다. 예를 들어 h1 요소에 짧은 밑줄을 만들고 싶다면 다음과 ...
CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online
CSS의 Grid는 인터넷 익스플로러에서 작동하지 않습니다. 최신 버전인 IE 11에서도 마찬가지입니다. 예를 들어 아래의 HTML 문서는 크롬이나 엣지 등 웹브라우저에서 의도한 대로 잘 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...
CSS / content / 요소 앞 또는 뒤에 텍스트, 이미지 등 콘텐트 추가하기
content content 속성은 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가한다. 예를 들어 p 요소 앞에 콘텐트를 넣으려면 다음과 같이 하고 p:before { content: xxx; } 뒤에 넣으려면 다음과 같이 한다. p:after { content: xxx; } 텍스트 추가하기 p 요소 앞에 Hello World를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, 다음 두 줄은 같은 결과를 만듭니다. *.abc { color: blue; } .abc { color: blue; } 타입 선택자(Type Selector) 타입 선택자(Type Selector)는 h1, p, ...
display: grid 그리드(grid)는 콘테이너(container)와 아이템(item)으로 구성됩니다. 아래는 그리드를 위한 간단한 HTML 문서입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
CSS / word-wrap / 긴 단어 처리 방법 정하는 속성
개요 word-wrap으로 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정한다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-wrap: normal | break-word | initial | inherit normal : break point에서 줄바꿈한다. break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. word-break 속성의 값이 keep-all이면 단어가, break-all이면 ...
CSS / background-clip / 배경을 어디에 넣을지 정하는 속성
개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...
HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 코드를 만들면...(각 줄 앞에 있는 빈 칸은 모두 탭입니다.) <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <pre> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </pre> </body> </html> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 우선 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성
개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...