CSS3 속성 [0509]

왕감자·2024년 5월 9일

KB IT's Your Life

목록 보기

6/177

1. 박스 속성

💡 웹 페이지의 레이아웃 구성할 때 가장 중요

* margin 테두리와 다른 태그 사이의 테두리 바깥쪽 여백
* border 테두리
* padding 테두리와 글자 사이의 테두리 안쪽 여백, 배경색은 padding 영역까지만 적용
* width / height 가로 / 세로

1) 박스 크기와 여백

width / height → inline 태그는 적용 안 됨

태그 전체 크기
- 전체 너비 = width + 2 * (margin + padding + border)
- 전체 너비 = height + 2 * (margin + padding + border)

margin/padding 속성
- (위, 오른, 아래, 왼)
- (위아래, 왼오)
- (위아래왼오)
- auto : margin O , padding X

  <head>
    <title>CSS Property Basic</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: red;
        /* border: (굵기, 스타일, 색상) */
        border: 5px solid blue;
        margin: 100px;
        padding: 30px;
      }
      span {
        width: 100px;
        height: 100px;
        background-color: red;
        border: 5px solid blue;
      }
    </style>
  </head>
  <body>
    <div></div>
    <p><span>여기는inline이지만</span>여기는 아니지롱</p>
  </body>

2) 박스 테두리

상하좌우 속성을 각각 입력할 수 있음 (left, right, top, bottom)

* border-width : 테두리 굵기
* border-style : 테두리 형태
* border-color : 테두리 색상
* border-radius : 테두리 둥글게 - (왼위오른아래, 오른위왼아래) (왼위, 오른위, 오른아래, 왼아래)

  <head>
    <title>Property Basic - Border</title>
    <style>
      .box {
        border-width: thick;
        border-style: dashed;
        border-color: blue;
        border-radius: 10px 40px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h1>Lorem ipsum dolor sit amet.</h1>
    </div>
  </body>

border-width, style, color 속성을 한꺼번에 입력할 수도 있음 (radius x)
<style>
	.box {
  		border: thick dased black;
  	}
</style>

2. 가시 속성

태그가 화면에 보이는 방식 지정
display:

* none : 화면에 보이지 않음
* block : 블록 박스 형식으로 지정
* inline : 인라인 박스 형식으로 지정
* inline-block : 블록과 인라인 중간 형태로 지정

	inline	block	inline-block
기본 넓이	컨텐츠 만큼	부모의 넓이	컨텐츠 만큼
width/height	X	O	O
가로 공간 차지	공유	독점	공유
margin	가로	가로, 세로 (세로 상쇄)	가로, 세로
padding	가로 (세로는 배경색만)	가로, 세로	가로, 세로

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Property Basic - Border</title>
    <style>
      #none {
        display: none;
      }
      #block {
        display: block;
      }
      #inline_block {
        display: inline-block;
        background-color: red;
        margin: 10px;
        padding: 10px;
      }
      /* 인라인은 padding margin -> 가로만 */
      #inline {
        display: inline;
        background-color: green;
        margin: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <span>&lt;span&gt;태그 객체</span>
    <div id="none">lt;div&gt;태그 객체</div>
    <span>&lt;span&gt;태그 객체</span>
    <div>&lt;div&gt;태그 객체</div>
    <span id="block">&lt;span&gt;태그지만 block 적용</span>
    <div id="inline_block">&lt;div&gt;태그지만 inline-block 적용</div>
    <div id="inline">&lt;div&gt;태그지만 inline 적용</div>
  </body>
</html>

3. 배경 속성

* background-image : 배경 이미지 삽입
* background-size : 배경 이미지 크기 (cover: 긴축 기준으로 채우기, contain: 비율 유지하며 채우기)
* background-repeat : 배경 이미지 반복 형태 (repeat(default), no-repeat)
* background-attachment : 배경 이미지 부착 형태 (scroll, fixed)
* background-position : 배경 이미지의 위치 지정
* background : 한 번에 모든 배경 속성 입력

    <style>
      body {
        /* 배경 두개 겹치기 가능 */
        background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
        /* 100%, 250px;라고하면 각 배경에 적용  */
        background-size: 100% 250px;
        /* 배경 반복 X */
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: bottom;
      }
    </style>

4. 글자 속성

* font-size : 글자 크기

p 태그 기본 크기 : 16px

h1 태그 기본 크기 : 32px

* font-family : 컴퓨터에 설치된 글꼴로 변경
* font-style : 스타일 지정 (기울기 등)
* font-weight : 글자 굵기
* text-align : 글자 정렬 (여백이 있어야 의미O, span 태그 적용X)
* text-decoration

1) 크기, 글꼴, 스타일, 굵기, 정렬

  <head>
    <title>Property Basic - Font</title>
    <style>
      .one {
        font-family: '없는 글꼴', serif;
        font-style: italic;
        text-align: right;
      }
      .two {
      }
      .three {
        font-size: 32px;
        font-weight: bold;
      }
      .four {
        font-size: 2em;
        text-align: center;
      }
      .five {
        font-size: large;
      }
      .six {
        font-size: small;
      }
    </style>
  </head>
  <body>
    <h1 class="one">첫 번째 줄입니다 h1 태그 - serif, italic, right</h1>
    <p class="two">두 번째 줄입니다 p 태그 1 - 기본</p>
    <p class="three">세 번째 줄입니다 p 태그 2 - 32px, bold</p>
    <p class="four">네 번째 줄입니다 p 태그 3 - 2em, center</p>
    <p class="five">다섯 번째 줄입니다 p 태그 4 - large</p>
    <p class="six">여섯 번째 줄입니다 p 태그 5 - small</p>
  </body>

수직 중앙 정렬
: line-height와 width 값을 동일하게

  <head>
    <title>Property Basic - Font</title>
    <style>
      .font_big {
        font-size: 2em;
      }
      .font_italic {
        font-style: italic;
      }
      .font_bold {
        font-weight: bold;
      }
      .font_center {
        text-align: center;
      }
      .button {
        width: 150px;
        height: 80px;
        background-color: #ff6a00;
        border: 10px solid black;
        border-radius: 30px;
        box-shadow: 5px 5px 5px #a9a9a9;
      }
      .button > a {
        display: block;
        line-height: 80px;
      }
    </style>
  </head>
  <body>
    <div class="button">
      <a href="#" class="font_big font_italic font_bold font_center">CLICK~★</a>
    </div>
  </body>

2) 링크 글자의 밑줄

text-decoration: none;

      .button > a {
        display: block;
        line-height: 80px;
        text-decoration: none;
        color: green;
      }

5. 위치 속성 ★

절대 좌표 : X, Y 지정

상대 좌표 : 요소를 입력한 순서에 따라서 지정

게임기 등 해상도 고정 → 절대 좌표

스마트폰 애플리케이션 등 → 상대 좌표

position 속성 사용
: position 속성만 사용하면 웹 브라우저마다 출력 형태가 다를 수 있으므로 통일하려면 스타일 속성을 함께 사용

* absolute : 절대 위치 좌표
* fixed : 화면 기준으로 절대 위치 좌표
* relative : 초기 위치에서 상하좌우로 위치 이동
* static : 위쪽에서 아래쪽 순서대로 배치 (default)

z-index 속성
: 배치 순서를 변경, 숫자가 클수록 앞에 위치

우선 순위: position > z-index

1) relative

초기 위치에서 상하좌우로 위치 이동
static으로 배치 되었을 때(원래 위치)가 원점
top, right, bottom, left 속성이 있어야 원래의 위치에서 이동

2) fixed

화면 기준으로 절대 위치 좌표 설정
화면 왼쪽 위(viewport(window 기준))가 원점

3) absolute

절대 위치 좌표 설정
부모 태그가 원점 ⇨ 부모 태그 위치가 바뀌면 원점도 바뀜
자손 position 속성에 absolute 적용하려면 부모 position 속성에 relative 적용
부모 영역 벗어나는 경우 ⇨ overflow 지정 (hidden / scroll)

    <style>
      .box {
        width: 100px;
        height: 100px;
        position: absolute;
      }
      .box:nth-child(1) {
        background-color: red;
      	left: 90px;
        top: 90px;
      	z-index: 100;
      }
      .box:nth-child(2) {
        background-color: green;
      	left: 90px;
        top: 90px;
      	z-index: 10;
      }
      .box:nth-child(3) {
        background-color: blue;
     	left: 90px;
        top: 90px;
      	z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </body>

위치 속성 공식
- 자손 absoulte → 부모 height & relative

    <style>
      .box {
        width: 100px;
        height: 100px;
        position: absolute;
      }
      .box:nth-child(1) {
        background-color: red;
        left: 10px;
        top: 10px;
        z-index: 100;
      }
      .box:nth-child(2) {
        background-color: green;
        left: 50px;
        top: 50px;
        z-index: 10;
      }
      .box:nth-child(3) {
        background-color: blue;
        left: 90px;
        top: 90px;
        z-index: 1;
      }
      /* 부모 태그 영역 - 상자들의 부모 */
      body > div {
        width: 400px;
      	/*부모 height*/
        height: 100px;
        border: 3px solid black;
      	/*부모 relative*/
        position: relative;
      }
    </style>
  </head>
  <body>
    <h1>Lorem ipsum dolor sit</h1>
    <div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <h1>Lorem ipsum dolor sit</h1>
  </body>

요소 크기를 벗어난 내용 처리 → overflow

키워드 설명
hidden 영역을 벗어나는 부분 감춤
scroll 영역을 벗어나는 부분 스크롤로 만듦

키워드	설명
hidden	영역을 벗어나는 부분 감춤
scroll	영역을 벗어나는 부분 스크롤로 만듦

      body > div {
        width: 400px;
        height: 100px;
        border: 3px solid black;
        position: relative;
        /* overflow: hidden; */
        overflow: scroll;

6. 유동 속성

float : 원래 유동적인 대상 만들려고 개발, 현대에는 웹 페이지의 레이아웃 잡을 때 더 많이 사용

float
* left : 태그를 왼쪽에 붙임
* right : 태그를 오른쪽에 붙임

  <head>
    <title>Property Basic - Float</title>
    <style>
      img {
        float: left;
      }
    </style>
  </head>
  <body>
    <img
      src="https://www.popco.net/zboard/data/com_freeboard/2023/07/06/85288230064a6b88aab7f2.jpg"
      alt="똥강아지"
      height="100px"
    />
    <p>
      Lorem ipsum dolor
    </p>
    <p>
      Lorem ipsum dolor 
    </p>
  </body>

수평 정렬

  <head>
    <title>Property Basic - Float</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        padding: 10px;
        margin: 10px;
        float: left;
        color: white;
      }
      body {
        width: 600px;
        height: 150px;
        border: solid black 3px;
      }
    </style>
  </head>
  <body>
    <div class="box">1</div>
    <div class="box">2</div>
  </body>

7. 그림자 / 그레이디언트 속성

* text-shadow : 글자에 그림자 부여
* box-shadow : 박스에 그림자 부여

1) 그림자 속성

  <head>
    <title>Property Basic - Shadow</title>
    <style>
      div {
        border: solid black 3px;
        box-shadow: 5px 5px 5px pink;
      	/* 중첩 가능 */
        text-shadow: -35px 5px 5px pink, 10px 10px 10px blue;
        color: green;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Lorem ipsum dolor sit amet.</h1>
    </div>
  </body>

2) 그레이디언트 속성

크레이디언트: 두 가지 이상의 색상을 혼합하는 채색 기능

https://www.colorzilla.com/gradient-editor/

    <style>
      div {
        border: solid black 3px;
        box-shadow: 5px 5px 5px pink;
        /* 중첩 가능 */
        text-shadow: -35px 5px 3px pink, 10px 10px 1px black;
        color: white;
        background: linear-gradient(
          to bottom,
          #ff3232 0%,
          #ffa528 15%,
          #ffe928 32%,
          #1fc443 50%,
          #2989d8 68%,
          #1e4ea0 85%,
          #ca23e0 100%
        );
      }
    </style>