1. CSS로 제어가 가능한 것들

박스 모델
글꼴, 문자
배경
배치
플렉스(정렬)
전환
변환
띄움
애니메이션
그리드
다단
필터

2. 속성(Properties)

HTML의 속성(Attribute)과 표현이 다르다는 것을 먼저 인지하자.

2-1. 너비 (width, height)

width, height : 요소의 가로, 세로 너비
기본 값 : auto
max-width, max-height : 요소가 커질 수 있는 최대 가로,세로 너비.
해당 값 보다 작아야 (해당 값 >= 쓸 값) 한다.
기본 값 : none (최대 너비 제한 없음)
min-width, min-height : 요소가 작아질 수 있는 최소 가로,세로 너비.
해당 값 보다 커야 (해당 값 =< 쓸 값) 한다.
기본 값 : 0 (최소 너비 제한 없음, 음수 사용 불가).
단위 : px, em, vw 등...

2-2. CSS 표현 단위

px : 픽셀

% : 상대적 백분율

em : 요소의 글꼴 크기

rem : 루트 요소(최상위 요소, html)의 글꼴 크기

vw : 뷰포트 가로 너비의 백분율 (입력 숫자 n/100)

vh : 뷰포트 세로 너비의 백분율 (입력 숫자 n/100)

2-3. margin

margin : 요소의 외부 여백(공간)을 지정하는 단축 속성이다.
기본 값 : 0 (외부 여백 없음), ★ 음수사용 가능
auto : 브라우저가 여백을 계산하며 가운데 정렬에 활용한다.
단위 : px, em, vw 등...
단축 속성 : margin에 값을 넣는 갯수에 따라 변하는 위치가 달라진다.

margin 1px; => 1px : top, bottom, left, right

margin 1px 2px; => 1px : top, bottom / 2px : left, right (십자가 모양 생각)

margin 1px 2px 3px; => 1px : top / 2px : left, right / 3px : bottom (한자 三 모양 생각)

margin 1px 2px 3px; 4px; => 1px : top / 2px : right / 3px : bottom / 4px : left (시계방향으로 돌아감)

margin: auto; => block요소에 가로사이즈가 있는 상태에서만 사용이 가능하며 상하를 제외한 좌우의 기준으로 가운데 정렬이 된다.

margin의 개별 속성들

margin-top

margin-bottom

margin-left

margin-right

margin 중첩(중복)현상

블록 요소는 한 줄에 한 개 밖에 올 수 없다.

<div></div>
<div></div>
<div></div>
<div></div>

<!-- main.css -->
div {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 20px;
}

magin 값이 20px 하나이므로 상하좌우 전부 적용이 되어야 한다.
하지만 결과물을 보면 좌, 우는 적용이 되었는데 상, 하에 적용이 제대로 되지 않는 현상을 발견할 수 있다.

다른 예시로 다음과 같은 코드를 통해 확인할 수 있다.

<div class="parent">
  <div class="child"></div>
</div>

<!--main.css-->
.parent {
  width: 200px;
  height: 200px;
  background-color: aqua;
}

.child {
  width: 100px;
  height: 100px;
  background-color: blanchedalmond;
  margin-top : 20px;
}

여기에서는 부모가 자식요소의 margin-top을 뺐어간 것을 확인할 수가 있다.

이러한 예시들로 확인할 수 있는 이런 현상을 margin 중첨(중복) 현상이라고 한다.

margin 중첩(중복)현상은 좌, 우에서 발생하지 않고 "상, 하"에서만 발생한다.

부모-자식
1-1) 부모의 margin-top과 자식의 margin-top이 만나면(겹친다면) 중첩이 생긴다.
1-2) 부모의 margin-bottom과 자식의 margin-bottom이 만나면 중첩이 생긴다.
이전형제 / 다음형제 끼리 만나면
2-1) 이전 형제의 margin-bottom과 다음 형제의 margin-top이 만나면 중첩이 생긴다.
2-2) 이전 형제의 margin-top과 다음 형제의 margin-bottom이 만나면 중첩이 생긴다.

2-4. padding

padding : 요소의 내부 여백(공간)을 지정하는 단축 속성이다.
기본 값 : 0 (내부 여백 없음)
% : 부모 요소의 가로 너비에 대한 비율로 지정
단위 : px, em, vw 등...
요소의 내부의 여백이 추가되는 것이기 때문에 여벽이 추가 된 만큼 요소의 크기가 커진다.
단축 속성 : padding 값을 넣는 갯수에 따라 변하는 위치가 달라진다.
margin과 똑같다!

padding 1px; => 1px : top, bottom, left, right

padding 1px 2px; => 1px : top, bottom / 2px : left, right (십자가 모양 생각)

padding 1px 2px 3px; => 1px : top / 2px : left, right / 3px : bottom (한자 三 모양 생각)

padding 1px 2px 3px; 4px; => 1px : top / 2px : right / 3px : bottom / 4px : left (시계방향으로 돌아감)

padding 개별 속성들

padding-top

padding-bottom

padding-left

padding-right

2-5. border

요소의 테두리 선을 지정하는 단축 속성이다.
작성 순서 -> border: 선-두께 선-종류 선-색상;

border : 요소의 크기가 커진다.

border-width : 선-두께
기본 값 : medium
margin, padding과 같은 단축 속성을 가지고 있다.
단위 : pm, em, % 등

border-style : 선-종류
기본 값 : none(선의 종류가 없어서 출력이 안된다.)
종류 : solid(실선), dashed(파선 - - - -) 등...
margin, padding과 같은 단축 속성을 가지고 있다.

border-color : 선-색상
기본 값 : black
투명색 : transparent

border-radius : 요소의 모서리를 둥글게 깎음
기본 값 : 0 (둥글게 없음)

(그림 출처 : https://heropy.blog/)
반지름 00px로 깎는다는 개념, 1번 방향부터 시계방향으로 적용된다.
단위 : px, em, vw 등
기타 속성들

border-방향
방향 : top, bottom, left, right
border-방향 : 두께 종류 색상
border-방향-속성
속성 : width(두께), style(종류), color(색상)

2-6. 색상 표현

색상 이름 : 브라우저에서 제공하는 색상 이름
ex) red, tomato, royalblue
Hex 색상코드 : 16진수 색상(Hexadecimal Colors)
ex) #000, #FFFFFF
RGB : 빛의 삼원색
ex) rgb(255, 255, 255)
RGBA : 빛의 삼원색 + 투명도
ex) rgba(0, 0, 0, 0.5), 마지막은 투명도, 0~1 : 투명~불투명

2-7. box-sizing

box-sizing : 요소의 크기 계산 기준을 지정한다.
box-sizing: content-box; => 기본 값, 요소의 내용(content)으로 크기 계산
border-box : 요소의 내용 + padding + border로 크기 계산 => 요소의 내용 값으로 적용(width)

2-8. overflow

overflow : 요소의 크기 이상으로 내용이 넘쳐 있을 때, 보여짐을 제어하는 단축 속성
visible: 기본 값, 넘친 내용을 그대로 보여줌
overflow: hidden; => 넘친 내용을 잘라냄
overflow: scroll; => 넘친 내용을 잘라냄, 스크롤바(x축, y축) 생성
overflow: auto; => 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
+) white-space: nowrap; => 글자가 옆으로 길어진다. (옆의 공간이 뚫려있으면 계속 옆으로 늘어난다)
text-overflow: ellipsis => 글자가 넘쳤을 때 ... 처리를 해줌(말 줄임표 처리), text-overflow: ellipsis를 사용하려면 위의 white-space와 overflow를 같이 써줘야 한다.
overflow의 개별 속성들
overflow-x, overflow-y

2-9. display

display : 요소의 화면 출력(보여짐) 특성
각 요소에 이미 지정되어 있는 값

block : 상자(레이아웃)요소
ex) 인라인 요소(a, span 태그)에 가로 너비를 지정하기 위해 display: block을 사용한다.
inline : 글자 요소
ex) 블록 요소(div 태그)를 인라인요소의 특성 사용을 위해 display: inline을 사용한다.
inline-block : 글자 + 상자 요소
따로 지정해서 사용하는 값

flex : 플렉스 박스(1차원 레이아웃)
grid : 그리드(2차원 레이아웃)
none: 보여짐 특성 없음, 화면에서 사라짐

2-10. opacity(투명도)

opacity : 요소 투명도
opacity: 1; => 기본 값, 불투명
opacity: 0~1; => 0부터 1 사이의 소수점 숫자, 숫자를 조절해 투명도 조절이 가능하다.
소수점 작성 시 앞에 0을 생략해서 사용이 가능하다. ex) .5, .07
0 : 투명

2-11. 글꼴

font-style : 글자의 기울기
기본 값 : normal(기울기 없음)
italic : 이텔릭 체

font-weight : 글자의 두께(가중치)
기본 값 : normal, 400 기본 두께
bold, 700 : 두껍게

font-size : 글자의 크기
기본 값 : 16px
단위 : px, em, rem 등

line-height : 한 줄의 높이, 행간과 유사
기본 값 : normal(브라우저의 기본 정의를 사용)
숫자(요소의 글꼴 크기의 배수로 지정) - 사용 권장 ex) 1.4, 2
단위 : px, em, rem 등

font-family: 글꼴1, "글꼴2",...글꼴계열;
글꼴1,2 : 글꼴(서체)지정
띄어쓰기 등 특수문자가 포함된 글꼴의 이름은 큰 따옴표로 묶어야 한다.
글꼴 여러개를 사용하여 후보로 넣을 수 있다. (못 쓸수 있는 환경이 나올수 있기 때문이다.)
글꼴계열은 필수로 작성해야 한다!

2-12. 문자

color : 글자의 색상
기본 값 : rgb(0, 0, 0)
★ 단일로만 사용! 키워드가 앞에 붙는 개념이 아니다!
text-align : 문자의 정렬 방식
기본 값 : left (왼쪽 정렬)
right(오른쪽 정렬), center(가운데 정렬)
text-decoration : 문자의 장식(선)
기본 값 : none (장식 없음)
underline(밑줄), line-through(중앙 선)
text-indent : 문자 첫 줄의 들여쓰기
기본 값 : 들여쓰기 없음
음수 사용 가능! 반대는 내어쓰기(outdent)
단위 : px, em, rem 등

+) letter-spacing : 자간
+) word-spacing : 단어 사이의 간격

2-13. 배경

background-color : 요소의 배경 색상
기본 값 : transparent(투명함)
색상 : 지정 가능한 색상
background-image : 요소의 배경 이미지 삽입
기본 값 : none(이미지 없음)
url("경로") : 이미지 경로
background-repeat : 요소의 배경 이미지 반복
기본 값 : repeat(이미지를 수직, 수평 반복)
repeat-x : 이미지를 수평 반복
repeat-y : 이미지를 수직 반복
no-repeat : 반복 없음
background-position : 요소의 배경 이미지 위치
기본 값 : 0% 0%(0%~100%)사이 값
방향 : top, bottom, left, right, center 방향 (방향1, 방향2)
단위 : px, em, rem 등 (x축, y축)
backgeound-size : 요소의 배경 이미지 크기
기본 값 : auto(이미지의 실제 크기)
cover : 비율을 유지, 요소의 더 넓은 너비(가로, 세로)에 맞춤
contain : 비율을 유지, 요소의 더 짧은 너비(가로, 세로)에 맞춤
단위 : px, em, rem 등

background-attachment : 요소의 배경 이미지 스크롤 특성
기본 값 : scroll(이미지가 요소를 따라서 같이 스크롤)
fixed : 이미지가 뷰포트에 고정, 스크롤할 때 같이 내려가고 올라가지 않는다.

Author And Source

이 문제에 관하여(8일차 CSS 특성(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@toffg6450/8일차-CSS-특성

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

8일차 CSS 특성(1)