오늘은 어제에 이어서 CSS 속성을 비롯한 CSS 심화 학습을 진행했습니다. 분량이 많다 보니 글로 정리하고 틈틈히 복기해야 할 것 같습니다.
CSS 속성
Width & Height
height와 width 속성은 HTML 요소의 높이와 너비를 각각 설정합니다.
이 속성의 기본 설정값은 auto이며, 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이와 너비를 설정해 줍니다.
또한, max-나 min- 접두사를 통해 요소들의 최대/최소 크기를 지정할 수도 있습니다.
CSS 단위
css에서 크기나 길이의 수치를 표현하는 단위에는 여러가지 유형이 있습니다. 그 중 대표적인 것들을 몇 가지 정리해보겠습니다.
백분율(%)
백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정합니다.
픽셀(px)
픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정합니다.
em & rem
em은 보통 배수 단위라고도 칭하며, 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정합니다.
따라서 body 태그에 em 값을 이용해 폰트 크기를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다.
다만, em은 배수로 작용하기 때문에, em만을 사용해서 자식 요소들의 css 단위를 지정하면 점점 커지게 되는 부작용을 낳습니다.
그런 경우에는 rem을 사용할 수 있습니다. rem은 root 요소를 기준으로 em 단위를 설정하겠다는 것으로, 오로지 root 요소의 폰트 크기에만 영향을 받습니다.
vw & vh
vw와 vh는 각각 viewport width와 viewport height를 가리키는 것으로, css가 적용되는 페이지를 실행하는 기기의 크기에 따라 가변적으로 적용됩니다.
다른 상대 단위들은 가장 가까운 부모 요소에 영향을 받는데 반해, vw와 vh는 기기의 크기에 영향을 받으므로 반응형 css를 작성하는데 효과적입니다.
Margin & Padding
margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다.
이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않습니다.
CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정할 수 있습니다.
padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다.
이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다.
CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다.
Border & Border-radius
border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정합니다.
추가적으로 border-style 속성을 통해 테두리의 스타일을 정의할 수 있습니다.
border를 정의할 때에는 아래와 같이 축약형 표현이 가능합니다.
<style>
.box { border: 3px solid teal; }
</style>border-radius는 CSS3에 새롭게 추가된 속성으로, 테두리의 각 모서리에 곡선을 추가할 수 있습니다.
border-radius 속성은 실제로 다음 네 가지 속성의 스타일을 한 줄에 설정한 것입니다.
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
따라서 위 속성들을 각각 사용하면 모서리별로 따로 스타일을 설정할 수 있습니다.
Display
display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다.
이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다.
대부분의 HTML 요소는 display 속성의 기본값으로 block과 inline 중 하나의 값을 가집니다.
블록(block)
display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다.
div, p, ul, h1 등의 태그들이 블록 요소에 해당합니다.
인라인(inline)
display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.
span, a, img 태그 등이 인라인에 해당합니다.
인라인-블록(inline-block)
인라인과 블록 이외에도 display 속성에 자주 사용되는 속성값에는 인라인-블록(inline-block)이 있습니다.
display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작합니다.
하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작합니다.
이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있습니다.
또한, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있게 됩니다.
문자 및 글꼴
color
color 속성은 텍스트의 색상을 설정합니다.
웹 페이지에서 텍스트의 기본 색상은 검정색입니다.
body 태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용됩니다.
하지만 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 body 태그에 명시된 속성값보다 우선 적용됩니다.
text-align
text-align 속성은 텍스트의 수평 방향 정렬을 설정합니다.
text-align 속성으로 설정된 정렬 방향은 text-direction 속성과는 상관없이 우선적으로 적용됩니다.
text-decoration
text-decoration 속성은 텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용합니다.
밑줄(underline), 취소선(line-through)등의 옵션을 제공합니다.
text-indent
text-indent 속성은 단락의 첫 줄에 들여쓰기할지 안 할지를 설정합니다.
웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않습니다.
음수를 지정하여 내여쓰기를 활성화할 수도 있습니다.
배경
background-image
background-image 속성은 해당 HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정합니다.
설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타납니다.
<style>
body { background-image: url("/examples/images/img_background_good.png"); }
</style>background-repeat
배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타납니다.
background-repeat 속성을 이용하면 이러한 배경 이미지를 수평이나 수직 방향으로만 반복되도록 설정할 수 있습니다.
수평(repeat-x), 수직(repeat-y), 반복 없음(no-repeat) 등 다양한 설정이 가능합니다.
<style>
body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-x; }
</style>background-position
background-position 속성은 반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정합니다.
top, bottom, left, right, center 등 모든 방향을 지원합니다. 또한 각각의 방향을 조합하여 세부적인 position 방향을 정할 수 있습니다. (ex. left top)
퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시할 수도 있습니다. 이때 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단(left top)이 됩니다.
background-size
background-size 속성은 배경 이미지의 크기를 설정합니다. CSS3에서는 배경 이미지의 크기를 마음대로 설정할 수 있습니다.
background-size 속성의 문법은 다음과 같습니다.
background-size: 너비 높이 contain|cover ;속성값을 contain으로 설정하면 이미지의 비율은 유지하면서, 크기를 가능한 한 크게 조절합니다.
단, 배경 이미지의 크기가 해당 요소의 내용(content) 영역을 넘지는 않습니다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 되며, 배경 이미지가 요소의 일부분은 가리지 못할 수도 있습니다.
속성값을 cover로 설정하면 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기를 조절합니다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 되며, 배경 이미지의 일부분이 잘릴 수도 있습니다.
background-attachment
background-attachment 속성을 사용하여 위치가 설정된 배경 이미지를 해당 위치에 고정시킬 수도 있습니다. (속성값 fixed)
이렇게 고정된 배경 이미지는 스크롤과는 무관하게 화면의 위치에서 이동하지 않습니다.
배치(position)
position 속성은 HTML 요소가 위치를 결정하는 방식을 설정합니다.
CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 4가지 방식이 있습니다.
- 정적 위치(static position) 지정 방식
- 상대 위치(relative position) 지정 방식
- 고정 위치(fixed position) 지정 방식
- 절대 위치(absolute position) 지정 방식
정적 위치(static position) 지정 방식
HTML 요소의 위치를 결정하는 가장 기본적인 방식은 정적 위치(static position) 지정 방식입니다.
position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않습니다.
정적 위치(static position) 지정 방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식입니다.
모든 요소들의 position 기본값은 static입니다.
상대 위치(relative position) 지정 방식
상대 위치(relative position) 지정 방식은 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식입니다.
HTML 요소의 기본 위치란 해당 요소가 정적 위치(static position) 지정 방식일 때 결정되는 위치를 의미합니다.
고정 위치(fixed position) 지정 방식
고정 위치(fixed position) 지정 방식은 뷰포트(viewport)를 기준으로 위치를 설정하는 방식입니다.
즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 됩니다.
절대 위치(absolute position) 지정 방식
절대 위치(absolute position) 지정 방식은 고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작합니다.
단지 뷰포트(viewport)를 기준으로 하는 것이 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정하게 됩니다.
하지만 위치가 설정된 조상(ancestor) 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 됩니다.
"위치가 설정되었다"라는 것은, 정적 위치(static position) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소라는 뜻입니다.
전환(transition)
CSS3에서는 transition 속성을 사용하여 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있습니다.
전환(transition)을 위해 제공되는 속성은 다음과 같습니다.
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
transition 속성은 다음과 같은 순서로 정의할 수 있습니다.
- 해당 요소에 추가할 CSS 스타일 전환(transition) 효과를 설정합니다.
- 추가할 전환 효과가 지속될 시간을 설정합니다.
<style>
div.keyboard {
width: 100px;
transition: width 1s;
}
div.keyboard:hover { width: 300px; }
</style>위 코드블럭에서, keyboard라는 클래스명을 가진 div 요소는 마우스 커서를 올릴 때, 1초동안 100px의 너비에서 300px로 부드럽게 전환될 것입니다.
변환(transform)
CSS3에서는 transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있습니다.
transform 속성은 HTML 요소에 대해 다음과 같은 동작을 제공합니다.
- 해당 요소를 움직입니다.
- 해당 요소를 회전시킵니다.
- 해당 요소의 크기를 변경합니다.
- 해당 요소를 기울입니다.
- 해당 요소에 위의 네 가지 동작 중 원하는 동작들을 한 번에 적용시킵니다.
CSS3에서는 transform 속성을 사용하여 2D 변형(transform)과 3D 변형(transform)을 모두 제공합니다. 또한 transform 속성을 조작하기 위해, 특수한 메서드들이 제공됩니다.
translate() 메소드
translate() 메소드는 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킵니다.
주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동시킵니다.
<style>
#trans {
transform: translate(100px, 50px);
}
</style>rotate() 메소드
rotate() 메소드는 해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전시킵니다.
주어진 각도가 양수이면 시계 방향으로, 음수이면 반시계 방향으로 회전시킵니다.
<style>
#trans {
transform: rotate(30deg);
}
</style>scale() 메소드
scale() 메소드는 해당 요소의 크기를 주어진 배율만큼 늘리거나 줄입니다.
주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기를 줄입니다.
<style>
#trans {
transform: scale(1.5, 2);
}
</style>scale 메서드에는 인자를 넣어야 하는데, 차례대로 X 배수(너비 배수)와 Y 배수(높이 배수)를 넣어야 합니다.
인자를 하나만 넣는다면, 자동적으로 X, Y 배수가 해당 배수로 통일됩니다.
