배경 스타일링 CSS 속성 입니다.
background-color : 배경색
background-image : 배경 이미지 | 작성 방법 : url(“이미지주소”)절대경로, 상대경로, 웹주소
속성값 | 설명 |
---|---|
no-repeat | 반복하지 않음 |
repeat | 반복함 |
repeat-x, repeat-y | 가로반복, 세로반복 |
기본 키워드 : top, bottom, left, right, center
폰트에 관련된 CSS 속성 입니다.
단위 | 설명 |
---|---|
px | 고정값, 절대 단위 |
em | 가변 크기(반응형 웹), 상대 단위, 상위 요소의 폰트 사이즈를 상속받음 |
브라우저 디폴트 1em == 16px | |
rem | r은 root, 즉 최상위 요소를font-size 속성 값 의미 |
속성값 | 설명 |
---|---|
normal | 보통 모양입니다. |
italic | 기울임꼴입니다. |
oblique | 기울임꼴입니다. |
initial | 기본값으로 설정합니다. |
inherit | 부모 요소의 속성값을 상속받습니다. |
속성값 | 설명 |
---|---|
normal | 보통 굵기이다. 숫자 400과 같다. |
bold | 굵은 굵기이다. 숫자 700과 같다. |
bolder | 상속된 값보다 굵은 굵기다. |
lighter | 상속된 값보다 얇은 굵기이다. |
number | 100, 200, 300, 400, 500, 600, 700, 800, 900 |
initial | 기본값으로 설정한다. |
inherit | 부모 요소의 값을 상속받는다. |
텍스트 가로 정렬을 위해 사용하는 속성 입니다.
속성값 | 설명 |
---|---|
left | 디폴트값) 왼쪽 정렬 |
right | 오른쪽 정렬 |
center | 가운데 정렬 |
justify | 양쪽 정렬(한글은 잘 작동하지 않음) |
start, end |
HTML의 모든 요소는 box로 표현됩니다.
이 값에 따라 화면에 표시하는 방식이 달라집니다.
속성값 | 설명 |
---|---|
content-box(default) | 오직 content의 크기만 width, height로 지정 |
총 width(height) content 크기(width, height 속성으로 준 값) + padding + border | |
border-box | padding, border를 포함하여 크기 지정 |
총 width(height) = width, height 속성으로 준 값(content, padding, border가 다 포함되어있음) |
테두리 스타일을 지정하는 속성입니다.
속성값 | 설명 |
---|---|
none | hidden 키워드와 마찬가지로 테두리를 표시하지 않습니다.주변 칸이 테두리를 가진다면 테두리를 그립니다. |
hidden | none 키워드와 마찬가지로 테두리를 표시하지 않습니다. 주변 칸이 테두리를 가지더라도 그리지 않습니다. |
dotted | 테두리를 둥근 점 여러개로 그립니다.(점의 반지름은 해당 면 border-width의 절반) |
dashed | 테두리를 직사각형 여러개로 그립니다. |
solid | 테두리를 하나의 직선으로 그립니다. |
double | 테두리를 두 개의 평행한 직선으로 그립니다. |
groove | 테두리가 파인 것처럼 그립니다.ridge의 반대 |
ridge | 테두리가 튀어나온 것처럼 그립니다. groove의 반대 |
inset | 요소가 파인 것처럼 테두리를 그립니다.outset의 반대 |
outset | 요소가 튀어나온 것처럼 그립니다. inset의 반대 |
선의 굵기를 설정하는 속성 입니다.
사용방법
1. 수치 직접 지정하기(px, pt, cm, em …)
2. 미리 지정된 이름 사용하기 (thin, medium, thick)
모든 면의 테두리 색상을 설정하는 속성 입니다.
문법
border-color: red;
모서리를 둥글게 만듭니다.
문법
border-radius: 10px;
border의 shorthand를 주로 사용합니다.
사용방법
예) border: 10px solid red;
boder 외부의 여백 (box model 이미지 참고)
속성 | 설명 |
---|---|
margin-top | 상단 마진 |
margin-bottom | 하단 마진 |
margin-left | 왼쪽 마진 |
margin-right | 오른쪽 마진 |
content를 둘러싸는 여백
속성 | 설명 |
---|---|
padding-top | 상단 패딩 |
padding-bottom | 하단 패딩 |
padding-left | 왼쪽 패딩 |
padding-right | 오른쪽 패딩 |
문법
margin: 10px 400px 10px 400px;
padding: 10px 400px 10px 400px;
/* 순서대로 top right bottom left; */
어떤 HTML 요소에 스타일을 입힐지 지정하기 위해 사용됩니다.
하나의 HTML 파일에서 Selector에 해당하는 모든 요소에 CSS를 적용할 수 있습니다.
Selector {
property1 : value1;
property2 : value2;
}
HTML 요소 이름 기재
어떤 HTML 요소에 스타일을 적용할지 지정
문법
a {
color: red;
}
span {
background-color: DodgerBlue;
color: #ffffff;
}
*
을 사용하여 기재한다.예) div > *
문법
* {
color: red;
}
,
을 사용하여 기재한다.문법
span, p {
color: red;
}
가장 많이 사용하는 선택자 입니다.
숫자로 시작할 수 없습니다.
문법
#id {
color: red;
}
문법
.class-name {
color: red;
}
HTML의 attribute 값으로 특정 요소를 선택할 수 있습니다.
많이 사용하지는 않지만 종종 사용됩니다.
예) a[target] : <a> 태그 중 target 속성을 갖고있는 요소만 선택
예) input[type=”submit”] : <input> 태그 중 type 속성의 값이 submit인 요소만 선택
div p 는 div 안에 있는 모든 p를 선택하여 pink color가 입혀진 모습입니다.
div > p 는 div 안에 있는 직속 자식 p만 선택하여 coral color가 입혀진 모습입니다.
예) span ~ p : span 뒤에 있는 p
div와 같은 레벨에 있는 형제. 즉, p 태그만 선택하여 색상이 입혀진 모습입니다.
예) span + p : span 바로 뒤의 p만 선택
div 바로 뒤에 있는 형제들만 yellowgreen color로 입혀진 모습입니다.
사용자의 동작에 따라 변경 되었을 때, 그에 따라 스타일을 변경할 수 있게 해주는 선택자입니다.
선택자 | 설명 |
---|---|
a:link | 아직 방문한 적이 없는 링크 |
a:visited | 방문한적이 있는 링크 |
:hover | 마우스를 올렸을 때 |
:active | 마우스를 눌러서 활성화되었을 때. 즉, 마우스를 ‘누르는' 순간. 클릭하려고 (아직)누르기만 한 상태 |
:focus | 키보드의 tab키로 특정 요소가 포커싱되었을 때 or input을 입력하기 위해서 클릭했을 때 |
:disabled, :enabled, :checked | input에서 주로 사용 |
:enabled | 활성화된 (일반적인, default) input |
:checked | checkbox, radio 등에서 사용자가 선택한 요소 |
실제로 존재하지 않는 가상의 요소를 추가해서 스타일을 적용합니다.
문법
selector::가상_요소_선택자 { }
가상요소 선택자 | 설명 |
---|---|
::before, ::after | 앞 or 뒤에 가상의 요소를 추가하여 스타일을 적용 |
::first-letter | 첫번째 글자 |
::first-line | (브라우저에서 보이는 기준으로) 첫번째 라인 |
::selection | 마우스로 드래그해서 선택한 영역 |
부모 요소에 적용되는 스타일은 자식 요소로 상속됩니다.
예) body에 font를 적용하면 default로 전체 요소에 적용됩니다. 대부분의 요소가 기본적으로 상속되지만, 일부 속성은 자식에게 상속되지 않습니다. (예 - 배경 색, 배경 이미지, margin, padding 등)
코드 위치 : 제일 마지막에 선언된 코드(CSS rule)이 적용됩니다.
Specificity(명시도) : 적용 범위가 더 구체적일수록 우선적으로 적용된다.
inline요소, block 요소로 변경할 수 있습니다.
속성값
inline
예) <span>, <a>, <img>
block
예) <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>
inline-block
예) input
none
차이점 : 요소의 자리는 그대로 차지함. 즉, 레이아웃은 남아있음
특정 요소를 뜨게 만들어, 별도의 레이어처럼 배치가 가능합니다.
속성값 | 설명 |
---|---|
left | (부모 요소의) 왼쪽에 뜨도록 |
right | (부모 요소의) 오른쪽에 뜨도록 |
none | 디폴트값) 정렬하지 않는다. |
inherit | 부모의 float 값을 상속받음 |
속성값 | 설명 |
---|---|
static | 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. |
relative | 기준을 잡습니다.(absolute와 함께 사용됩니다.) |
absolute | 요소를 일반적인 문서 흐름에서 제거합니다.(가장 가까운 relative로 기준을 잡은 요소로 배치됩니다.) |
sticky | 스크롤 하여도 정해놓은 위치에 고정되어 따라 옵니다. |
fixed | 화면 위치에 고정됩니다. |
여러 요소가 겹칠 때, 어떤 요소가 제일 위로 올지 정하는 속성 입니다.(z축)
사용방법
1. z-index는 position이 지정된 요소에만 동작합니다.
2. 수가 클수록 위로 올라옵니다.
문법
z-index: 9999;
콘텐츠가 요소의 크기보다 커서 넘칠 때, 어떻게 표현할지 정하는 속성입니다.
예) 텍스트가 요소의 크기보다 커서 텍스트가 넘쳐 옆 요소를 가릴 때
속성값 | 설명 |
---|---|
visible | 디폴트 값) 넘치면 깨져서 보입니다. |
hidden | 넘치는 컨텐츠는 안 보이게 가립니다. |
scroll | 넘치는 컨텐츠는 스크롤로 내려서 볼 수 있습니다. |
auto | 브라우저가 알아서 선택합니다. |