[WEB][CSS3] 속성 (1)

css는 직접 실행하면서 공부하는 것을 추천드립니다 ..

박스 속성

width, height: 컨텐츠에 의해 정해짐
- width 디폴트 값: 행 전체
- height 디폴트 값: 컨텐츠 만큼
모든 태그에는 경계선(테두리)이 존재

margin: 테두리와 다른 태그 사이의 테두리 바깥쪽 여백
- margin: [상] [우] [하] [좌]; 🕑
- margin: [상하] [좌우];
padding: 테두리와 글자 사이의 테두리 안쪽 여백, 배경색은 padding 영역까지만 적용
- padding: [상] [우] [하] [좌]; 🕑
- padding: [상하] [좌우];
border: 테두리
- border-radius: [좌상] [우상] [우하] [좌하]; 🕑
- border-width
- boder-style
- border-color
- 각자 써도 되지만 border: 에 최대 3개까지 한 번에 표현 가능 → shorthand 표현법
width: 가로
height: 세로

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>90002</title>
    <style>
      div {
        background-color: darkolivegreen;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>90002</title>
    <style>
      div {
        background-color: darkolivegreen;
        width: 100px;
        height: 100px;
        margin: 30px;
        border: 30px dotted hotpink;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

가시 속성

display
- none: 화면에 보이지 않음
- block: 블록 박스 형식
- inline: 인라인 박스 형식
  - width, height, margin, padding 속성이 지정되지 않아용 💤

- inline-block: 블록과 인라인의 중간 형태
  - width, height, margin, padding 속성 지정 가능! 💨💨💫

배경 속성

background-image
background-size
- background-size: x축 y축
- x축만 지정되었을 때는 y축은 auto
background-repeat
- no-repeat;
- repeat-x; / repeat-y; 특정 방향으로 반복
background-attachment
- scroll; 배경도 함께 스크롤 되게끔!
- fixed; 컨텐츠 스크롤 될 때 배경은 고정!
background-position
- background-position: 키워드(bottom ... );
- background-position: x축 위치 (Y축 위치);
background
- border와 다르게 shorthand로 갯수 제한 없이 표현 가능
- 하지만 길게 하면 가독성이 떨어지므로 적당히!

배경은 부모 영역을 벗어날 수 없다~
배경 이미지는 겹치는 것도 가능! 💌 레이어 💌
배경 이미지는 그 화면을 다 채울 때까지 반복되는 것이 default

padding, margin, backgroud-position 등 값을 지정할 때 음수도 줄 수 있습니다!

저작자표시 변경금지

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

[WEB][CSS3] overflow: hidden이 뭔데.. (2)	2025.03.21
[WEB][CSS3] 속성 (2) (1)	2025.03.12
[WEB][CSS3] 기초 (0)	2025.03.06

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

티스토리툴바