[부스트코스] 5-1 CSS 단위, 배경, 박스모델

5. 단위, 배경, 박스모델

1) 속성-정의와구문

CSS 속성의 정의와 syntax 확인 방법

정의
- 해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악
  - 기본 값
  - 상속 여부
  - 애니메이션 가능 여부
  - 사용 가능한 CSS 버전
문법
- 해당 속성값을 어떤 식으로 나열하여 사용하는지를 파악할 수 있음
속성 값
- 해당 속성이 인식하여 적용할 수 있는 값의 형태나, 키워드 등을 파악할 수 있음
  - initial: 초기값, 즉 속성의 기본값으로 정의 (ie 지원x)
  - inherit: 부모 요소의 해당 속성 값을 적용 (상속 가능할 요소일 경우)
지원 범위
- 해당 속성이 정의에 맞게 동작 가능한 CSS 버전, 브라우저별 저번 확인
  - 어떤 브라우저의 어떤 버전이냐에 따라 같은 값이어도 다르게 렌더링 될 수 있으므로, 현재 프로젝트의 사용자 제공 지원 범위를 잘 확인하고 적용해야 함
예제
- 문법과 속성값을 바탕으로 실제로 속성을 동작하는 예제 코드를 확인할 수 있음
참고 사항
- 해당 속성에 대해 특이사항이나 버그에 대해 확인할 수 있음

https://www.w3.org/
https://www.w3schools.com/
https://developer.mozilla.org/ko/

2) 속성-단위

길이 단위

절대 길이 (고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않음)
- px - pixels(1px = 1/96th of 1in)
  - 장치의 해상도에 따라 상대적
- pt - points(1pt = 1/72 of 1in)
  - windows: 9pt = 12px
  - mac: 9pt = 9px
상대 길이 (다른 요소의 크기나 폰트 크기, 브라우저 등의 크기에 따라 상대적으로 값이 변함
- % - Percentage
  - 부모의 값에 대해서 백분율을 환산한 크기를 갖게 됨
- em - font size of the element
  - font-size를 기준으로 값을 환산함. 소수점 3자리까지 표현 가능
- rem - font size of the root element
  - root의 font-size를 기준으로 값을 환산함
- vw - 1% of viewport's width
  - viewport의 width 값을 기준으로 1%의 값으로 계산됨

<!-- html -->
<div>
  <p class="px">단위 16px로 선언된 텍스트입니다.</p>
  <p class="pt">단위 12pt로 선언된 텍스트입니다.</p>
  <p class="percent">단위 200%로 선언된 텍스트입니다.</p>
  <p class="em">단위 2em로 선언된 텍스트입니다.</p>
</div>

<!-- css -->
div {font-size: 16px}
.px {font-size: 16px}
.pt {font-size: 12pt}
.percent {font-size: 200%}
.em { font-size: 2em}

1em=16px
1.25em=20px

3) 속성-색상

body {color: black} /* By color names */
body {color: #000000} /* Hexadecimal colors 16진수 */
body {color: #000} /*Hexadecimal colors */
body {color: rgb(0,0,0)} /* As RGB values (red, green, blue / 0~255) */
body {color: rgba(0,0,0,1)} /* (red,green,blue,aplpah / 0~255, 0 or 1) */

16진수
- 검정: #000000
- 흰색: #ffffff
- 숫자 0~9 / 알파벳 a~f

<html>
  <style>
    div {height:50px; width:100%;}
  </style>
  
  <body>
    <h1>Colors can be set using hexadecimal values</h1>
    <div style="background-color:#ff0000"></div>
    <div style="background-color:#00ff00"></div>
    <div style="background-color:#0000ff"></div>
  </body>
</html>

RGB
- 0,0,0 - 검정
- 255,255,255 - 하양

<html>
  <style>
    div {height:50px; width:100%;}
  </style>
  
  <body>
    <h1>Colors can be set using hexadecimal values</h1>
    <div style="background-color:rgb(255,0,0)"></div>
    <div style="background-color:rgb(0,255,0)"></div>
    <div style="background-color:rgb(0,0,255)"></div>
  </body>
</html>

rgba = 투명도
- 0~1

<html>
  <style>
    div {height:50px; width:100%;}
  </style>
  
  <body>
    <h1>Colors can be set using RGB values</h1>
    <div style="background-color:rgba(255,0,0,0.5)"></div>
    <div style="background-color:rgba(0,255,0,0.5)"></div>
    <div style="background-color:rgba(0,0,255,0.5)"></div>
  </body>
</html>

4) 속성-background

background-color
background-image
background-repeat
background-position
background-attachment

/* 속성 */
background-color: green;
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;

/* 축약형 */
background: green url("img_tree.gif") no-repeat fixed center;

<!-- html -->
<div>배경에 대해서 알아볼까요?</div>
<span>배경에 대해서 알아볼까요?</span>

<!-- css -->
div {
  background-color: pink;
}
span {
  background-color: pink;
}

<!-- html -->
<div>배경에 대해서 알아볼까요?</div>

<!-- css -->
div {
  height: 200px;
  color: white;
  background-color: pink;
  background-image: url(https://images.unsplash.com/photo-1645886702060-518fd85a9886?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDExfGhtZW52UWhVbXhNfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60)
}

<!-- html -->
<div>배경에 대해서 알아볼까요?</div>

<!-- css -->
div {
  height: 200px;
  color: white;
  background-color: pink;
  background-image: url(https://images.unsplash.com/photo-1645886702060-518fd85a9886?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDExfGhtZW52UWhVbXhNfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60);
  background-repeat: no-repeat; --★
}

이미지 반복 여부와 방향 지정
- repeat: x,y축으로 모두 반복
- repeat-x: x축 방향으로만 반복
- repeat-y: y축 방향으로만 반복
- no-repeat: 이미지 반복 no

<!-- html -->
<div>배경에 대해서 알아볼까요?</div>

<!-- css -->
div {
  height: 200px;
  color: white;
  background-color: pink;
  background-image: url(https://images.unsplash.com/photo-1645886702060-518fd85a9886?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDExfGhtZW52UWhVbXhNfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60);
  background-repeat: no-repeat;
  background-position: center; --★
}

위치 지정
- %, px
- top left right bottom center
- top bottom은 y축 기준, left, right은 x축 기준

background-attachment: 기본 값 scroll 화면 스크롤에 따른 배경 이미지의 움직임 여부 지정
- scroll: 배경 이미지는 요소 자체를 기준으로 고정. 내용과 함께 스크롤 되지 않음
- local: 배경 이미지는 요소의 내용을 기준으로 고정. 내용과 함께 스크롤
- fixed: 배경 이미지는 뷰포트를 기준으로 고정되어 있으며 스크롤에 영향을 받지 않음
  - 뷰포트: 사용자가 시각적으로 볼 수 있는 웹페이지 영역을 의미
    컴퓨터나 휴대폰관 같은 장치에 Display 요소가 표현되는 영역을 말함

5) 속성-boxmodel

content 영역
- 요소의 실제 내용을 포함하는 영역
border 영역
- content 영역을 감싸는 테두리 선
padding 영역
- content 영역과 테두리 사이의 여백
margin 영역
- border 바깥쪽 영역

<!-- css -->
div {
  border: 10px solid #000; --★
}
      
<!-- html -->
<div>
  Box Model을 알아볼까요?
</div>

padding: 30px; --★
border: 10px solid #000;

margin: 50px; --★
padding: 30px;
border: 10px solid #000;

부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록

'LEARN > HTML | CSS' 카테고리의 다른 글

[부스트코스] 6-1 CSS 폰트, 텍스트 (0)	2022.03.19
[부스트코스] 5-2 CSS 단위, 배경, 박스모델 (0)	2022.03.18
[부스트코스] 4-2 CSS 이해하기 (0)	2022.03.16
[부스트코스] 4-1 CSS 이해하기 (0)	2022.03.15
[부스트코스] 3 HTML 콘텐츠모델, 시멘틱마크업, 블록 (0)	2022.03.14

JeLog

[부스트코스] 5-1 CSS 단위, 배경, 박스모델

5. 단위, 배경, 박스모델

1) 속성-정의와구문

CSS 속성의 정의와 syntax 확인 방법

2) 속성-단위

길이 단위

3) 속성-색상

4) 속성-background

5) 속성-boxmodel

'LEARN > HTML | CSS' 카테고리의 다른 글

티스토리툴바

[부스트코스] 5-1 CSS 단위, 배경, 박스모델

5. 단위, 배경, 박스모델

1) 속성-정의와구문

CSS 속성의 정의와 syntax 확인 방법

2) 속성-단위

길이 단위

3) 속성-색상

4) 속성-background

5) 속성-boxmodel

'LEARN > HTML | CSS' 카테고리의 다른 글

관련글

티스토리툴바