CSS 문법2

#단위, 속성, 구문

■ 단위

1. 절대길이

고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않음

px ( 1px = 1/96th of 1 inch )

절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적임

2. 상대길이

다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변함

%: 부모의 값에 대해서 백분율로 환산한 크기를 가짐

em: font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능

rem: root의 font-size를 기준으로 값을 환산

vw: viewport의 width값을 기준으로 1%의 값으로 계산

■ color

h1 { color: 색상 값;}

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>color</title>
</head>
<body>
    <h1 style="color: red"> heading </h1>
    <h1 style="color: #ff0000"> heading </h1>
    <h1 style="color: #f00"> heading </h1>
    <h1 style="color: rgb(255,0,0)"> heading </h1>    
    <h1 style="color: rgba(255,0,0, 0.5)"> heading </h1>
</body>
</html>

■ background

background: [-color] [-image] [-repeat] [-attachment] [-position];

▷ background-color : 배경의 색상을 지정

▷ background-image : 배경으로 사용할 이미지의 경로를 지정

▷ background-repeat : 이미지의 반복 여부와 방향을 지정

repeat	x, y축 으로 모두 반복합니다.
repeat-x	x 축 방향으로만 반복합니다.
repeat-y	y 축 방향으로만 반복합니다.
no-repeat	이미지를 반복하지 않습니다.

▷ background-position : 배경 이미지의 위치를 지정

%	기준으로부터 % 만큼 떨어진 지점과 이미지의 % 지점이 일치하는 곳에 위치시킵니다.
px	기준으로부터 px 만큼 떨어진 지점과 이미지의 (0,0) 지점이 일치하는 곳에 위치시킵니다.
키워드	top, left, right, bottom, center 키워드를 사용할 수 있습니다. 키워드는 선언 순서와 관계없이 top, bottom은 y축 기준으로 하며 left, right는 x축을 기준으로 합니다.

▷ background-attachment : 화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정

scroll	배경 이미지는 요소 자체를 기준으로 고정되어 있으며 내용과 함께 스크롤 되지 않습니다.
local	배경 이미지는 요소의 내용을 기준으로 고정되어 있으며 내용과 함께 스크롤 됩니다.
fixed	배경 이미지는 뷰포트를 기준으로 고정되어 있으며 스크롤에 영향을 받지 않습니다.

▷ background-size : 배경의 임의의 크기 설정(px, %)
▷ background-origin : 배경의 위치 기준을 border, padding, content로 잡을 건지 결정
▷ background-clip : 배경의 넓이 기준을 border, padding, content box로 잡을 건지 결정
▷ background-blend-mode : 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>background</title>
  <style>
    div {
      height: 500px;
      background-color: yellow;
      background-image: url(https://www.w3schools.com/CSSref/img_tree.gif);
      background-repeat: no-repeat;
      background-position: center top;
      /* 축약형 */
      background: yellow url(https://www.w3schools.com/CSSref/img_tree.gif) no-repeat center top;
    }
  </style>
</head>
<body>
    <div> css background 속성 실습 </div>
</body>
</html>

■ boxmodel

content : 글
padding : 콘텐츠와 테두리 사이의 여백
border : 테두리선
margin : 바깥과 테두리선 사이의 여백 (주변의 다른 요소와의 간격의 변화를 주고 싶을 때 변경)

□ border (테두리선)

border: [-width] [-style] [-color];

▷ border-width : 선의 굵기를 지정

border-width: [top] [right] [bottom] [left];

키워드	thin, medium, thick
단위	px, em, rem ... ( % , 정수 단위 사용불가 )

▷ border-style : 선의 모양을 지정 -->none,solid,double,dashed,dotted

border-style: [top] [right] [bottom] [left];

none	border를 표시 하지 않습니다.
solid	border를 실선 모양으로 나타냅니다.
double	border를 이중 실선 모양으로 나타냅니다.
dotted	border를 점선 모양으로 나타냅니다.

▷ border-color : 선의 색상을 지정

border-color: [top] [right] [bottom] [left];

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>border</title>
  <style>
    div {
      border-width: 10px;
      border-style: solid;
      border-color: #000;


      /* 축약형 */
      border: 10px solid #000;
    }
  </style>
</head>
<body>
    <div> css border 속성 실습 </div>
</body>
</html>

□ padding (콘텐츠와 테두리 사이의 여백)

length	고정값으로 지정합니다. (ex. px, em ....)
percent	요소의 width에 상대적인 크기를 지정합니다.

padding-top content : 영역의 위쪽 여백을 지정합니다.
padding-right content : 영역의 오른쪽 여백을 지정합니다.
padding-bottom content : 영역의 아래쪽 여백을 지정합니다.
padding-left content : 영역의 왼쪽 여백을 지정합니다.

* syntax

padding: [-top] [-right] [-bottom] [-left];
                   0      10px     20px      30px   /* 상, 우, 하, 좌 다름 */
                   0      10px     20px                 /* 좌, 우 같음 */
                   0      10px                              /* 상, 하 같음 & 좌, 우 같음 */
                   0                                            /* 상, 우, 하, 좌 모두 같음 */

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>padding</title>
  <style>
    div {
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 40px;
      padding-left: 20px;


      /* 축약형 */
      padding: 10px 20px 40px;
    }
  </style>
</head>
<body>
    <div> css padding 속성 실습 </div>
</body>
</html>

□ margin(바깥과 테두리선 사이의 여백)

length	고정값으로 지정합니다. (ex. px, em ....)
percent	요소의 width에 상대적인 크기를 지정합니다.
auto	브라우저에 의해 계산된 값이 적용 됩니다.

margin-top border : 영역의 위쪽 여백을 지정합니다.
margin-right border : 영역의 오른쪽 여백을 지정합니다.
margin-bottom border : 영역의 아래쪽 여백을 지정합니다.
margin-left border : 영역의 왼쪽 여백을 지정합니다.

* syntax

margin: [-top] [-right] [-bottom] [-left];
                  0      10px     20px      30px   /* 상, 우, 하, 좌 다름 */
                  0      10px     20px                 /* 좌, 우 같음 */
                  0      10px                              /* 상, 하 같음 & 좌, 우 같음 */
                  0                                            /* 상, 우, 하, 좌 모두 같음 */

margin auto

기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가짐. 이를 활용하여 수평 중앙 정렬을 할 수 있음.

margin-left: auto;
margin-right: auto;

- 좌우의 margin이 모두 auto로 적용 되었다면, 브라우저는 요소가 가질수 있는 가로 영역에서 자신의 width를 제외한 나머지 여백에 크기에 대해 균등 분할 하여 적용-> 요소는 수평 중앙 정렬이 됨

- 상하의 경우 수직 중앙 정렬이 되지 않으며, 기본적인 플로우를 벗어나는 상황에 대해서 적용

margin collaspe : 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것

두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합
부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
1. 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합
2. 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합
내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합이 일어납니다.

마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않음
마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 함

□ margin & padding

음수값 사용 가능 여부! 왜 margin은 음수 값 적용이 가능하고, padding은 적용되지 않을까? 예를 들어 생각해보자면, padding은 뼈와 우리 피부 사이의 지방이라고 생각하고, margin은 사람과 사람 사이의 간격->지방은 아무리 뺀다고 해서 피부가 뼈보다 밑으로 갈 수 없을 뿐만 아니라, 0 이하가 될 수 없으므로 양수만 됨. 그러나 사람과 사람 사이는 멀리 떨어질 수도 있지만, 서로 겹쳐서 서 있을 수도 있으므로 음수 값이 가능
%값의 사용과 기준점 %는 요소의 크기를 기준으로 상대적인 값을 결정지음. %는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정됨

* 비교

	+	-	auto	단위
margin	o	o	o	px, % ...
padding	o	x	x	px, % ...

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>margin & padding</title>
  <style>
    div {
      width: 300px;
      height: 100px;
      margin: -10px -10px 20px 30px;
      padding: 10px 20px 30px 40px; /* padding 음수 사용 불가 */
    }
  </style>
</head>
<body>
    <div> css margin & padding 비교 실습 </div>
</body>
</html>

□ width 기본 값 : 0

box값 = padding+border+content 값

auto	브라우저에 의해 자동으로 계산하여 적용합니다. * 요소의 레벨 기본 특성에 따라 다르게 동작합니다.
length	고정값으로 지정합니다. (ex. px, em ....)
percent	부모 요소의 width에 상대적인 크기를 지정합니다.

□ height 기본 값 : 0

auto	브라우저 자동으로 계산하여 적용합니다. * 기본적으로 컨텐츠 영역의 내용만큼 높이를 가집니다.
length	고정값으로 지정합니다. (ex. px, em ....)
percent	부모 요소의 height에 상대적인 크기를 지정합니다. * 단, 부모 요소가 명시적으로 height 값이 있어야 합니다.

★ 정리

1. 박스 모델은 content, padding, border, margin의 총 4가지 영역으로 나누어짐

2. content 영역의 너비는 width, 높이는 height을 통해서 제어 할 수 있으며, width와 height 그리고 padding과 border을 모두 더한 것이 요소의 전체 크기

3. 다른 요소와의 여백은 margin을 이용하여 줄 수 있으며 음수값을 사용할 수 있음

4. margin은 상하 요소 사이의 병합 현상이 일어나고 이때는 큰 값을 기준으로 병합

'온라인 강의 > HTML&CSS(네이버 부스트코스)' 카테고리의 다른 글

CSS 문법4 (0)	2022.07.22
CSS 문법3 (0)	2022.07.21
CSS 문법 (0)	2022.07.19
HTML 문법3 (0)	2022.07.19
HTML 문법2 (0)	2022.07.18

코린이 삐약이의 성장일기

CSS 문법2

#단위, 속성, 구문

'온라인 강의 > HTML&CSS(네이버 부스트코스)' 카테고리의 다른 글

티스토리툴바

CSS 문법2

#단위, 속성, 구문

'온라인 강의 > HTML&CSS(네이버 부스트코스)' 카테고리의 다른 글

'온라인 강의/HTML&CSS(네이버 부스트코스)' Related Articles

티스토리툴바