CSS - 핵심 속성

쑤·2024년 1월 23일
CSShtml
0

HTML/CSS

목록 보기
5/8
post-thumbnail

CSS Property

1. Color

  • Color 표현 방법

1. 이름

  • 미리 정해진 색상 이름

    • blue, red, yellow, lightblue, cyan …

    • 현업에서는 디자인에서 정확한 색상 코드(16진수)로 주로 넘어오기 때문에 잘 쓰지 않는 방법

color: blue;

2. rgb or rgba값

  • rgb : 0~255까지의 값으로 Red, Green, Blue의 수치를 각각 표현(0은 검은색 ~ f로 갈수록 rgb)

    • a : 투명도. 0~1사이의 값. 소수점 사용. 0이 투명, 1이 불투명

color: rgb(0,200,0);

background-color: rgba(0, 0, 255, 0.1);

3. 16진수 코드(hex, hexadecimal)

  • 16진수란? 수를 0~15까지의 숫자로 표현하는 방법

    • 0~9 + A~F = 16진수

      • 0이 제일 작은 숫자
      • F가 제일 큰 숫자

    • 10->A, 11->B, 12->C, 13->D, 14->E, 15->F

  • 형식 : #[6자리16진수]

    • #000000 ~ #ffffff

    • 두자리씩 각각 R, G, B를 표현

    • #000000 : black / #FFFFFF : white / #FF0000 : Red / #00FF00 : Green / #0000FF : Blue

color: #e25252;

기타 : HSL 등

  • 색을 지정할 수 있는 속성 예시

    • color 속성 : 글자색 지정

    • background-color : 배경 색 지정

    • border-color : 테두리 색 지정

  • 색상 관련 팁

1-1. Opacity

  • 불투명도 설정

  • 기본값: 1

  • 0.0 ~ 1.0이하의 숫자 사용

  • % 사용 가능

  • 0으로 갈수록 투명해짐

opacity: 내부에 있는 모든 요소가 투명/불투명해짐
rgba: 내부에 있는 콘텐츠는 그대로 있고 배경만 투명/불투명해짐

input

html

<div>
	Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque iusto odio fuga dignissimos perferendis. 
</div>
<div class="floating-box">
	안녕하세요~!
</div>

css

.floating-box {
    width: 150px;
    height: 150px;

    position: fixed;
    top: 10px;
    left: 10px;

    background-color: cadetblue;
    opacity: 0.4;
}

2. Background

  • 배경 스타일링 관련된 CSS 속성

1) background-color : 배경색

  • color 값 표현 방법은 이전 강의 참고
  • bg-image보다 뒤에 렌더링 됨
  • .png 파일 같은 경우 이미지 중간에 투명한 부분이 있다면, bgc가 투명한 부분에 보여지게 됨

2) background-image : 배경 이미지

  • 기본 값: none
  • 값 작성 방법 : url(“이미지주소”)
    • 절대경로, 상대경로, 웹주소

input

html

    <div class="floating-box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque perspiciatis ipsum autem saepe soluta quos nulla illo minima aut voluptatum laboriosam iusto aliquid, est, vel explicabo ullam magni laudantium modi.
    </div>

css

.floating-box {
    width: 500px;
    height: 500px;

    position: fixed;
    top: 10px;
    left: 10px;

    background-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png);
    background-color:peachpuff
}

3) background-repeat : 배경 이미지 반복 여부

  • repeat: 요소의 배경 영역을 채울 때까지 이미지를 반복.

    • 마지막 반복 이미지가 넘칠 경우 잘라낸다

  • no-repeat: 이미지를 반복하지 않음

  • repeat-x (가로 반복)

  • repeat-y (세로 반복)

input

html

 <div class="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae optio eveniet illo facilis aliquam neque blanditiis nulla, ut quos aliquid veritatis ullam, expedita officia hic fuga molestiae voluptatibus provident aut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae optio eveniet illo facilis aliquam neque blanditiis nulla, ut quos aliquid veritatis ullam, expedita officia hic fuga molestiae voluptatibus provident aut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae optio eveniet illo facilis aliquam neque blanditiis nulla, ut quos aliquid veritatis ullam, expedita officia hic fuga molestiae voluptatibus provident aut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae optio eveniet illo facilis aliquam neque blanditiis nulla, ut quos aliquid veritatis ullam, expedita officia hic fuga molestiae voluptatibus provident aut.
    </div>

css

.box {
    height: 500px;
    border: 5px solid red;

    background-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/moon.jpg);

    /* background-repeat: repeat-x; */
    background-repeat: no-repeat;
}

4) background-position : 배경 이미지의 위치 지정

  • 기본 키워드 : top, bottom, left, right, center

  • 퍼센트, 길이 등 지정

    • 예) right 20%, right top, center top

input

html

<div class="box"></div>

css

.box {
    /* width: 300px; */
    height: 500px;

    border: 5px solid red;

    background-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/moon.jpg);
    background-repeat: no-repeat;
    background-position: center;

    /* background-position: 30px 150px; */
    /* background-position: center top; */
    /* 순서 상관 없음 */
    /* background-position: left bottom; */
}

5) background-origin : 배경 이미지의 시작 위치

  • bg-origin 기본값은 padding-box

    • background-origin: padding-box

      • 배경을 padding box에 배치

    • background-origin: border-box

      • 배경을 border box에 배치

    • background-origin: content-box;

      • 배경을 content box에 배치

input

html

<div class="box"></div>

css

.box {
    /* width: 300px; */
    height: 500px;

    border: 30px dashed blue;
    padding: 30px;

    background-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/moon.jpg);
    background-repeat: no-repeat;

    background-origin: content-box;
}

6) background-size : 배경 이미지의 크기

  • 이미지의 크기를 그대로 두거나, 늘리고 줄이거나, 공간에 맞출 수 있다

  • 기본 값: auto

  • background-size: contain;

    • 컨테이너 내에서 이미지 크기를 최대한 크게 조정함

contain / cover : 이미지의 비율을 유지하며 요소의 크기에 맞춰진다

  • background-size: cover

    • 이미지 비율은 유지하면서 가로 길이에 이미지를 맞춤.

    • 상품 카드만들때 뒷배경 보이지 않게 할 때

  • px

    • 하나만 값을 입력하면 width값에 맞춰서 비율이 늘어남

  • %

    • 가로의 값을 설정해주는 것 (cover는 빈공간없이 세로로도 늘어남)

7) background-shorthand

<background-color> 사용

  • background: green;

<bg-image>와 <repeat-style> 사용

  • background: url("test.jpg") repeat-y;

<box>와 <background-color> 사용

  • background: border-box red;

단일 이미지, 중앙 배치 및 크기 조절

  • background: no-repeat center/80% url("../img/image.png");
  • <bg-size> 값은 <position> 바로 뒤에만 위치할 수 있으며 '/' 문자로 구분해야 합니다.
  • <bg-color>는 다른 것들과 함게 사용 시 맨 뒤에 위치 해야함
background:  url("") repeat origin position/size% color

3. Fonts

  • 폰트 관련된 CSS 속성

  • font-size

    • px
      • 고정값, 절대 단위
    • em
      • 가변 크기(반응형 웹), 상대 단위
      • 상위 요소의 폰트 사이즈를 상속받음
      • 1em == 현재 브라우저에서 표시되는 폰트 크기
      • 브라우저의 default 1em == 16px
    • rem

  • font-style

    • normal
    • italic

  • font-weight

    • normal, bold
    • 숫자 값

  • font-family : 글꼴(서체) 지정. 폰트 다운로드 및 적용 방법

    • 기본 font family

      • Serif, Sans-serif, Monospace …

    • 폰트 이름이 한 단어가 아니라 여러 단어라면, 따옴표(“”)로 감싸줘야 함

    • 커스텀 폰트 적용 방법

    • 모든 브라우저에서 잘 호환되는 폰트를 사용하는 것이 안전하다(web safe, 100%는 불가능하겠지만 최대한..!)

4. Text-align

  • text-align : 텍스트의 가로 정렬을 위해 사용하는 속성

    • left (default)
    • right
    • center
    • justify : 양쪽 정렬
      • 영문 글(뉴스, 논문 등)에서 자주 볼 수 있는 정렬
      • 주의 : 한글은 이대로하면 잘 작동하지 않음
        • text-justify: inter-cluster; 추가
    • start, end

  • text-align-last : 텍스트의 마지막줄의 text-align을 지정

5. Box model, border

5-1. Box model

  • 모든 HTML 요소는 box로 표현된다.

    • 즉 모든 요소는 네모이다. 세모, ㄱ, ㄴ 등의 모양을 갖는 요소는 없다.

  • 아래 4가지로 구성되어 있음

    • 실제 content : width, height 속성으로 크기 조절

      • 주의! width, height 속성은 자식 요소에게 상속되지 않음

    • border : 테두리

    • padding : border 내부의 여백 (content 주위를 둘러싸는 여백)

    • margin : border 외부의 여백(요소와 요소 사이의 여백)

  • 요소의 총 크기 계산

    • 디자인을 정확하게 적용하기위해 반드시 알아둬야 함

    • 총 크기 = content 크기(width, height 속성) + 사방 border + 사방 padding

    • box-sizing 속성 : 이 값을 어떻게 주느냐에 따라, 요소(박스)의 총 크기를 화면에 표시하는 방식이 달라짐

      • content-box(default) : 오직 content의 크기만 width, height로 지정

        • 총 width(height) = content 크기(width, height 속성으로 준 값) + padding + border

      • border-box : padding, border를 포함하여 크기 지정. simple!

        • 총 width(height) = width, height 속성으로 준 값(content, padding, border가 다 포함되어있음)

        • (각 조직마다 다르지만) 최근에는 개발자가 디자인에 맞춰서 코드를 작성하고 계산하기 편하기 때문에, 거의 필수로 border-box로 지정해주는 경우가 많음

5-2. Border

  • 테두리 스타일 지정

  • border-style : dotted, dashed, solid(실선) 등

  • border-width

    • 수치 직접 지정(px, pt, cm, em …)

    • 미리 지정된 이름 : thin, medium, thick

  • border-color

  • border-radius

    • 모서리를 둥글게 표현할 수 있음

    • 수치가 커질수록 둥글다

  • border의 shorthand를 자주 사용함

    • 순서대로 border-width -> border-style -> border-color
border: 10px solid red;

  • 사방 중 하나를 지정하여 border 스타일을 지정할 수 있음

    • border-right, border-left, border-bottom, border-top

6. Margin, Padding

6-1. Margin

  • margin : border 외부의 여백(요소와 요소 사이의 여백)

  • 사방 중 하나를 지정해서 줄 수 있음 : margin-top, margin-bottom, margin-left, margin-right

  • margin 속성에 들어가는 값

    • 수치(length) : px, em, rem, pt, cm …

      • 기본값은 0 : margin을 아무것도 지정하지 않았을 때
      • 양수, 음수 모두 사용 가능

    • 퍼센트(%) : 감싸고 있는 컨테이너(부모 컨테이너)의 width 대비 몇%인지

    • auto : 브라우저가 계산한 값 자동 적용 (대부분 균등하게 분배)

  • 참고 : margin collapse

6-2. Padding

  • padding : border 내부 여백(content 주위를 둘러싸는 여백)

  • 사방 중 하나를 지정해서 줄 수 있음 : padding-top, padding-bottom, padding-left, padding-right

  • padding 속성에 들어가는 값

    • 수치(length)

      • 음수 X. 양수만

    • 퍼센트(%)

  • ⭐️ margin, padding의 shorthand는 자주 사용하므로 순서를 외워두는 것이 좋음

    • top right bottom left
      margin: 10px 400px 10px 400px;

    • 값을 하나만 적으면? 네 면 모두 적용
      margin: 10px;

    • 두 개 적으면 : 위아래, 양옆
      margin: 10px 200px; margin: 0 auto;

    • 세 개 적으면 : 위, 양옆, 아래
      margin: 10px 200px 10px;

profile
쑤
프론트엔드로 남들보다 앞서갑니다
이전 포스트

CSS Basic

다음 포스트

CSS - Selector

0개의 댓글