CSS 여백, 요소, 배경

모든 HTML 요소는 HTML 문서 안에서 차지하는 영역이 있고,
영역의 끝 부분에 다른 요소와 맞닿는 경계가 있다.

Padding
: 요소 내부 컨텐츠와 경계선 사이의 여백을 패딩(Padding).

Margin
: 경계선에서 다른 HTML 요소, 또는 부모 요소와의 사이에 지정하는 외부 여백을 마진(Margin).

Border
: HTML 요소의 테두리는 보더 또는 테두리라고 하고 요소 경계에 다양한 선 속성을 부여할 수 있다.

각 속성의 사용방법은 4가지 속성을 한번에 적용하는 것으로 코드를 작성했다.
padding, margin, border-width 사용법은 다 동일하다.

div{
    padding: 2px 3px 2px 4px // top → right → bottom → left
}

하지만, border-width을 사용하는 경우보다, 다음과 같이 border 속성을 한꺼번에 적용해서 사용하는 경우가 더 많다고 볼 수 있다.
✓ 이 방식에서는 border 방향 별 테두리 속성은 지정할 수 없다.
→ 방향별 속성을 지정하고 싶다면, border-width, border-style, border-color 속성 3개를 사용해 각 방향별 속성을 각자 부여해야 한다.

border: [테두리 선 너비]px [테두리 선 스타일] [테두리 선 색상];

border: 1px solid #000;

border-width
: 각 방향별 테두리 선 두께를 지정한다.
: 스타일이나 색상이 지정되지 않아 테두리가 보이지 않는 경우 none과 동일, 자리도 차지하지 않는다.
: 테두리 색상, 또는 스타일이 정의되거나 상속되지 않은 경우 테두리 두께를 지정해도 테두리는 표시되지 않는다.

border-width: 1px 2px 3px 4px;

border-color
: 각 방향 별 테두리 선 색상을 지정.
: rgba() 컬러 값 속성을 사용해 반투명 색상을 테두리에 지정 가능.

border-color: #a00 #0a0 #00a #000;

border-style
: 테두리선의 모양을 지정한다.
: 속성은 dotted / dashed / solid / double / groove / ridge / inset / outset / none / hidden 중 한 가지를 사용할 수 있다.
: 테두리 입체 효과를 주는 groove, ridge, inset, outset 스타일은 지정한 컬러 값을 기준으로 어둡고 밝은 색을 조합해 입체 효과를 표현.
__ 검정색의 경우 더 밝거나 어두운 톤을 지정할 수 없기 때문에 입체 효과가 사라짐.

---

요소의 너비와 높이 그리고 차지하는 영역의 크기를 이해하기

너비와 높이 값
반응형 웹이나 가변 레이아웃을 위해 크기 값은 부모 HTML 요소의 크기를 기준으로 퍼센트(%) 값으로 입력할 수 있다.

한 줄로 여러 개의 HTML 요소를 배치해야 하는 경우 여백과 함께 퍼센트 값으로 적절히 요소를 배치할 수 있다.

퍼센트 값으로 숫자가 딱 떨어지지 않는 한 줄에 3개, 7개 아이템 배치와 같은 목록 레이아웃을 구성할 때는 소수점 6자리까지 표시를 해서 100%에 최대한 가깝게 맞춰야 한다.
그렇게 작성해야 소수점 자리 수 값이 누적되면서 픽셀이 밀리는 현상이 생기지 않는다.

너비와 높이 값으로 사용할 수 있는 단위

• auto : 크기 값이 지정되지 않았을 경우 기본값. 브라우저가 요소의 위치에 따라 크기를 자동으로 계산.
• px : 픽셀 값으로 크기를 고정으로 지정. 패딩, 픽셀단위로 전체 HTML 문서의 레이아웃을 그릴 경우 테두리, 마진 값에 따라 차지하는 영역이 커지는 것을 고려해야함.
• % : 퍼센트 값으로 크기를 결정. 부모 요소의 크기를 기준으로 퍼센트 값만큼 크기가 결정.
• initial : 기본값으로 리셋. 브라우저에 정해진 기본값 사용.
• inherit : 부모 요소의 크기 속성을 상속받음.

HTML 요소의 화면 표시와 레이아웃 속성
HTML 요소는 기본 값으로 문서안에 표시되는 것이 기본.

경우에 따라서 표시될 필요가 없는 경우도 있고,
사용자 액션에 반응해서 보이게, 또는 보이지 않게 해야 할 경우도 있다.

inline : <span> 태그처럼 동작. 이어진 여러 요소에 적용하면 한 줄로 요소들이 나열된다.
<span>과 마찬가지로 크기 값을 지정할 수 없다.
요소 안에 들어있는 컨텐츠의 길이나 크기에 따라 줄의 너비가 정해지기 때문에 크기를 제한할 필요가 있는 요소에 적합하지 않음.

 

block : <div>태그처럼 동작. 크기 값을 지정할 수 있다.

 

inline-block : <span> 요소처럼 동작하지만 크기 값을 지정할 수 있다.
이어진 여러 요소에 적용하면 원하는 크기를 가진 요소들을 한 줄로 배치할 수 있다.
배치를 적당히 잘하면 그리드 형태로 배치할 수 있다.

 

flex : box, flexbox로 사용하던 속성 값이 표준화되어, flex로 단일화.
자식 요소들을 가로 또는 세로 방향으로 inline-block 속성처럼 배치해주며, 추가 flex 속성들을 사용해 자식 요소들의 여백과 크기 등을 한번에 설정할 수 있다.
박스 형태의 영역을 가지는 많은 아이템들을 한방향으로 정렬해 배치하기 편리하기 때문에, 반응형 레이아웃을 만드는데 필수 속성.

 

grid : 자식 요소들을 격자 형태로 배치할 수 있도록 해주는 레이아웃 속성이다.
격자들을 병합해서 새로운 구획을 만들 수 있어 다양한 배치 구조를 만들 수 있다.
가장 최신 레이아웃 속성으로, 간편하고 빠른 레이아웃 생성이 최대의 장점.
(...💣 인터넷 익스플로러 호환성 유지하려면 CSS 코드 양이 많아짐.......)

 

contents : 특이한 속성값.
사용하면 해당 요소가 사라지고, 자식 요소들이 부모 요소 DOM의 자식으로 올라가 붙게 된다.
일종의 투명 컨테이너 같은 개념으로 자식 요소들을 하나로 묶어서 관리하기 위한 용도로 사용.

 

절대 위치와 상대위치

 

position : position은 HTML 요소가 부모 요소의 영역안에 위치하는 방식을 결정.
relative, absolute, fixed 가장 많이 사용됨.

 

속성값
relative
: 앞쪽 태그를 기준으로 현재 태그가 위치한 상대 위치가 정해짐.

ex> 블록 요소에 postion: relative 속성을 부여하고 , left: 20px 을 주면 태그가 차지하는 영역이 현재 위치에서 오른쪽으로 20px 이동한다. 이때 영역 크기는 그대로 유지.

static
: 기본값. 태그가 위치한 순서대로 요소가 표시된다. 위치를 임의로 조정할 수 없다.
left, top 등 태그 위치를 지정하는 속성이 적용되지 않는다.

absolute
: 바로 위 부모 요소의 시작 지점을 기준으로 해서 상대 위치가 정해진다.

position: absolute 속성을 주고 left:20px 속성을 같이 주면 부모 태그의 왼쪽 끝에서 20px만큼 이동한 위치에 자리를 잡게 된다.
항상 부모태그의 영역과 왼쪽 위 시작 위치가 기준이 된다는 점을 기억해야 한다.

fixed
: 브라우저 창을 기준으로 고정된 위치를 가진다.
left: 0을 주면 현재 요소는 브라우저 창 왼쪽 끝에 고정된다.

sticky
: 사용자 스크롤에 따라 요소가 같이 스크롤되어 이동한다.
지정된 크기만큼 스크롤될 때까지는 relative처럼 지정된 위치에 고정되어 있다가,
지정한 크기 이상 스크롤되면 fixed 속성처럼 화면 스크롤과 무관하게 특정 위치에 고정되어 보이게 된다.

지정된 화면 스크롤 임계 값을 기준으로 relative 속성과 fixed 속성을 오간다고 이해.
(...💣 인터넷 익스플로러 호환 X ...)

---

배경(background) 속성 기초 배우기

배경 속성의 이해
배경으로 이미지를 배치하면 말그대로 배경이 된다.
HTML요소 안의 컨텐츠들은 이 배경 이미지 위에 표시된다.

배경 이미지로 반투명 png 이미지도 사용할 수 있기 때문에.
중첩된 요소들에 여러 개의 배경 이미지를 잘 사용하면 다양한 이미지 중첩 효과를 만들 수도 있다.

배경 속성값을 지정하는 방법은 크게 2가지로 나뉜다.

1번째 "background" 속성을 사용해 여러가지 배경 속성을 나열해 압축형으로 표현하는 방법이 있다.

background: red url('bg_img.png') no-repeat fixed center;

2번째는 각각의 속성 종류별로 별도의 배경 속성을 사용해 상세하게 표현하는 방법.

종류별 배경 속성
: background-color 속성을 제외한 나머지 속성들은 대부분 배경 이미지를 표시하기 위한 속성들.
개수는 많지만 실제로는 배경 이미지에 부가적으로 사용되는 속성들.

background-color
: 배경색 지정, 웹 표준 컬러코드, 또는 반투명 배경색 지정 가능.

background-color: #f8f8f8;
backgroun-color: rgba(244,196,196,0.3);

background-image
: 배경 이미지 URL 지정.

background-image: url("./bg-img.png");

background-position
: 배경 이미지의 요소 내 시작 위치 지정.
: %, 픽셀 값으로 임의의 고정 위치를 지정하거나 가로, 세로 정렬 값으로 정렬 위치 지정 가능.
가로 위치 - left, center, right
세로 위치 - top, center, bottom

background-position: 100px 100px;
background-position: center;

background-position: left top;
/* 요소의 왼쪽 상단 모서리에서 시작하도록 설정 */

background-size
: 배경 이미지 크기 지정
: % 값으로 전체 배경을 비율로 채울 수 있음. 100%을 주면 전체 영역을 채운다.
auto : 배경 이미지 크기 1:1 출력.

cover : 배경을 다 채우도록 배경 이미지 크기 조절. 배경 이미지 크기가 요소보다 크거나 같음.
HTML 문서 상단이나 전체 배경으로 많이 사용됨.

contain : 배경 이미지가 다 보이도록 배경 이미지 크기 조절, 배경 이미지 크기가 요소보다 작거나 같음.

픽셀 : 이미지 크기를 고정된 픽셀 크기 값으로 고정.

% : 요소 크기를 기준으로 % 비율로 크기 가변 지정, 요소 크기 값에 따라 자동 변경됨.

background-size: 100px 100px;
background-size: 100%;
background-size: cover;

background-repeat
: 배경 이미지 반복 여부 지정.
가로, 세로, 가로/세로 모두로 구분해 반복 설정 가능.

repeat : 가로/세로 반복
no-repeat : 반복 없음
repeat-x : 가로 방향 반복
repeat-y : 세로 방향 반복
space : 가로/세로 방향으로 반복하지만 이미지가 잘리지 않는 개수까지 반복하고 남은 공간은 여백으로 분배해서 배경 이미지들 사이를 띄운다.
round : 가로/세로 방향으로 반복하지만 이미지가 잘리지 않는 개수까지 반복하고 남는 공간은 배경 이미지들을 키워서 채움.

background-repeat: no-repeat;
background-repeat: repeat-y;

background-origin
배경 이미지가 표시되는 왼쪽 위 끝 원점 위치를 지정.

padding-box : 안쪽 여백(패딩) 영역 왼쪽 위 모서리가 원점이 된다.
border-box : 테두리선 영역 왼쪽 위 모서리가 원점이 된다.
content-box : 내용 표시영역 왼쪽 위 모서리가 원점이 된다.

background-clip
배경색이나 배경 이미지가 표시될 수 있는 요소 안의 최대 영역 한계를 지정.
background-origin 과 같은 속성 값을 사용한다.

padding-box : 안쪽 여백(패딩) 영역까지 배경 이미지가 표시됨.
border-box : 테두리선 영역 까지만 배경 이미지가 표시됨.
content-box : 내용 표시영역 안쪽에만 배경 이미지가 표시됨.

background-attachment
배경 이미지 위치를 고정할지 화면 스크롤에 따라 스크롤할지를 지정.
화면 스크롤에 따라 큰 배경 이미지가 스크롤 되도록 해 동적인 효과를 줄 때 사용.
scroll : 페이지 스크롤에 따라 배경 이미지가 함께 스크롤 됨.
fixed : 배경 이미지 위치 고정.
local : 컨텐츠 내용을 스크롤바로 스크롤할 수 있는 경우 내용과 함께 배경 이미지가 스크롤됨.

이러한 background 속성 하나로 압축형으로 쓰는 것이 코드량이나 효율면에서는 훨씬 좋겠지만,
속성 값을 다 외우고 있는 것이 아닌 이상 초보자에게는 쉽지 않은 접근이다.

CSS 가독성이 떨어지기 때문에 CSS을 다른 이용자가 보거나 수정할 경우를 고려해야 하는 상황이라면 압축형 보다는 개별 배경 속성 종류로 구분해 작성하는 것이 좋다.
개별 속성과 축약 속성을 함께 사용할 수도 있다.

축약형

background: red url("./bg_img.png") no-repeat fixed center;

축약형+개별형

background: url('./bg_img.png');
background-color: red;
background-size: 300px 300px;

배경색을 표시하는 방법

배경색은 background-color 혹은 background 로 지정한다.

#f8f8f8 과 같은 표준 웹 컬러 코드 값이나 rgb(), rgba() 로 지정할 수도 있다.

 

반투명 컬러를 사용하려면 "rgba()"을 사용해 투명도를 4번째 파라미터로 추가로 지정하면 된다.

rgba() 컬러 값은 rgba(red, green, blue, alpha) 포맷으로 작성.

rgba(0, 0, 0, 0.5) 이렇게 작성할 경우 검정색은 50% 투명도를 가진다.

 

밑에 레이어나 배경 이미지가 있을 경우 50% 투명한 검정색 뒤로 뒤에 있는 레이어 내용이나,
배경 이미지가 반투명으로 비쳐 보이게 된다.

반투명 컬러를 이용하면 이미지나 레이어를 여러 개 겹쳐서 다양한 화면효과를 줄 수 있으며,
배경 이미지와 조합하면 이미지에 다양한 필터 효과를 만들 수 있다.

See the Pen Untitled by JHKIMS (@jhkims) on CodePen.