CSS 배경

background-color

요소의 배경색을 지정한다.

body { background-color: lightblue;}

 

opacity

요소의 불투명도/투명도를 지정

 0.0 - 1.0 사이의 값 지정가능, 낮을수록 더 투명하다.

 

 

background-image

요소의 배경으로 사용할 이미지를 지정합니다.

기본적으로 이미지는 전체 요소를 포함하도록 반복됩니다.(기본기능)

 

일부 이미지는 가로 또는 세로로만 반복되게 할 수 있다.

background-repeat: repeat-x; or repeat-y; no-repeat;

 

이미지의 위치 지정도 가능하다.

background-position: right top;

 

background-attachment

배경 이미지를 스크롤할지 고정할지 지정( background-attachment: fixed; or  background-attachment: scroll;)

 

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

 

Background Shorthand(배경 속기법)

 

color, image, repeat, attachment, position 순으로 기입한다.

background Shorthand(속기법)이 있지만 순서가 있어 실수할 수 있다. 쓰지말자...

 

 

css 테두리

HTML 요소 테두리의 스타일, 너비 및 색상을 지정한다.

 

border-style

테두리 스타일을 지정한다.

  • dotted- 점선 테두리를 정의합니다.
  • dashed- 점선 테두리를 정의합니다.
  • solid- 솔리드 테두리를 정의합니다.
  • double- 이중 테두리를 정의합니다.
  • groove- 3D 그루브 테두리를 정의합니다. 효과는 border-color 값에 따라 다릅니다.
  • ridge- 3D 능선 테두리를 정의합니다. 효과는 border-color 값에 따라 다릅니다.
  • inset- 3D 삽입 테두리를 정의합니다. 효과는 border-color 값에 따라 다릅니다.
  • outset- 3D 아웃셋 테두리를 정의합니다. 효과는 border-color 값에 따라 다릅니다.
  • none- 경계를 정의하지 않음
  • hidden- 숨겨진 테두리를 정의합니다.

border-style속성은 1~4개의 값(위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리)을 가질 수 있습니다.

다양한 보더 스타일

border-width

네 테두리의 너비를 지정합니다.

이 border-width 속성은 1~4개의 값을 가질 수 있습니다

값이 4개면 시계방향순서 top, right, bottom, left 순으로 적용

값이 3개면 top, (right, left 동일 적용), bottom 순으로 적용

값이 2개면 top bottom 순으로 적용

값이 1개면 4개 테두리 동일 적용 

테두리 너비 예시

border-color

네 개의 테두리 색상을 설정하는 데 사용됩니다.

1~4개의 값을 가질 수 있습니다. (위와 동일하게 적용)

border-color 예시

border-radius

요소에 둥근 테두리를 추가하는 데 사용됩니다.

 

border 속기법 

// width, style, color 순으로 기입

p {
  border: 5px solid red;
}

 

css 마진

margin

정의된 테두리 외부의 요소 주위에 공간을 만드는 데 사용됩니다.

 

CSS에는 요소의 각 측면에 대한 여백을 지정하는 속성이 있습니다.

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

 

여백을 지정하는 속성값

  • 자동(auto) - 브라우저가 여백을 계산합니다.
  • 길이 - px, pt, cm 등의 여백을 지정합니다.
  • % - 포함하는 요소 너비의 여백을 %로 지정합니다.
  • 상속(inherit) - 여백이 상위 요소에서 상속되어야 함을 지정합니다.

 

그냥 margin 속성은 1~4개의 값을 가질 수 있다.(위와 규칙 동일) 

 

여백 설정할때 주의할 점

요소의 위쪽 및 아래쪽 여백은 때때로 두 여백 중 가장 큰 여백과 같은 단일 여백으로 축소됩니다. (덮어쓰기)

이것은 왼쪽 및 오른쪽 여백에서 발생하지 않습니다! 상하 여백만 신경써주기!

 

 

콘텐츠 경계 구분 잘하기(완전중요)

 

CSS Padding(패딩)

정의된 테두리 내부의 요소 콘텐츠 주위에 공간을 만드는 데 사용됩니다.

음수 값은 허용되지 않습니다.

 

CSS에는 요소의 각 측면에 대한 패딩을 지정하는 속성이 있습니다.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

모든 패딩 속성은 다음 값을 가질 수 있습니다.

  • 길이 - px, pt, cm 등의 패딩을 지정합니다. (보통 px를 많이 쓴다.)
  • % - 포함하는 요소 너비의 패딩을 %로 지정합니다.
  • inherit - 패딩이 상위 요소에서 상속되어야 함을 지정합니다.

그냥 padding 속성은 1~4개의 값을 가질 수 있다.(위와 규칙 동일) 

 

높이와 너비(height와 width)

height및 width속성은 다음 값을 가질 수 있습니다.

  • auto- 기본값입니다. 브라우저는 높이와 너비를 계산합니다.
  • 길이- 높이/너비를 px, cm 등으로 정의합니다.
  • %- 컨테이닝 블록의 백분율로 높이/너비를 정의합니다.
  • initial(초기값)- 높이/너비를 기본값으로 설정합니다.
  • inherit- 높이/너비는 부모 값에서 상속됩니다.

outline

요소의 경계 외부에 그려진 선

 

outline-style

윤곽선의 스타일을 지정하며 다음 값 중 하나를 가질 수 있습니다.

outline-style 예시

outline-width

외곽선의 너비를 지정하며 다음 값 중 하나를 가질 수 있습니다.

보통 px로 지정한다.

outline-color

외곽선의 색상을 설정하는 데 사용됩니다.

outline-offset

outline 과 요소의 border 사이에 공간을 추가합니다.

 

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;  // outline 속기법 순서 상관은 없음
  outline-offset: 15px;
}

 

outline 속기법

순서 상관이 없다.

 

 

css 텍스트

color 속성

텍스트의 색상을 설정하는 데 사용한다.

(그냥 color키워드만 쓴다.)

 

텍스트 정렬

text-align

텍스트의 가로 정렬을 설정하는 데 사용한다.

왼쪽 또는 오른쪽 정렬, 가운데 정렬 또는 양쪽 맞춤이 가능합니다.

속성값 (left;, right;, center;, justify;)

 

텍스트 방향이 왼쪽에서 오른쪽인 경우 왼쪽 정렬이 기본값이고 

텍스트 방향이 오른쪽에서 왼쪽인 경우 오른쪽 정렬이 기본값이다.

 

text-align-last

텍스트의 마지막 줄을 정렬하는 방법을 지정합니다.

속성값 (left;, right;, center;, justify;)

 

direction및 unicode-bidi

요소의 텍스트 방향을 변경할 수 있습니다 .

속성값 : rtl; 오른쪽에서 왼쪽으로 / bidi-override; 거꾸로 

 

vertical-align

요소의 수직 정렬을 설정합니다.

속성값 : baseline; text-top; text-bottom; sub; super; 등이 있다.

텍스트 장식

text-decoration-line

텍스트에 장식선을 추가하는 데 사용됩니다.

overline; line-through; underline; overline underline; none; 의 속성값이 있다.

 

text-decoration-color

데코레이션 라인의 색상을 설정하는 데 사용됩니다.

 

text-decoration-style

데코레이션 라인의 스타일을 설정하는 데 사용됩니다.

solid; double; dotted; dashed; wavy;등 속성값이 있다.

 

text-decoration-thickness

데코레이션 라인의 두께를 설정하는 데 사용됩니다.

auto; px; %; 등의 속성값이 있다.

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

 

텍스트 변환

text-transform

텍스트에서 대문자와 소문자를 지정하는 데 사용됩니다 .

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

//첫 글자를 대문자
p.capitalize {   
  text-transform: capitalize;
}

 

 

텍스트 간격

 text-indent

텍스트 첫 줄의 들여쓰기를 지정하는 데 사용됩니다. px단위 많이씀

 

letter-spacing

텍스트에서 문자 사이의 간격을 지정하는 데 사용됩니다. px단위 많이씀

 

line-height

줄 사이의 간격(세로)을 지정하는 데 사용됩니다.

 

word-spacing

텍스트에서 단어 사이의 간격을 지정하는 데 사용됩니다.

 

white-space

요소 내부의 공백을 처리하는 방법을 지정합니다.

 

text-shadow

텍스트에 그림자를 추가한다.

text-shadow : 수평그림자, 수직그림자, 흐림효과, 그림자 색상; 순으로 기입한다. 

 

'Web > CSS' 카테고리의 다른 글

CSS 아이콘, 부트 스트랩 아이콘, 구글 아이콘 사용방법  (0) 2023.01.27
Google Fonts (구글 글꼴)  (0) 2023.01.27
CSS selector  (0) 2023.01.06
CSS 기본 기능 정리 2 (글꼴)  (0) 2023.01.05
CSS 개념  (0) 2023.01.02

+ Recent posts

티스토리툴바