DAY 83. CSS - 레이아웃 스타일

 

 

03. 레이아웃 스타일

기본 스타일

height/width

콘텐츠가 차지하고 있는 영역의 크기를 조절할 수 있는 속성

선택자{width/height:숫자(단위) or auto(default)};

 

** 상대 크기(%)를 입력하면 창 크기에 따라 변경되고, 절대 크기(px)를 입력하면 창 크기에 따른 변화가 없다.

** 실제크기 : (height/width) + padding + margin

 

---

 

블록/인라인 레벨 요소

블록 레벨 요소

한 줄 전체 차지하는 요소(a.k.a 박스 모델) 한 줄에 여러 요소가 올 수 없다. ( 너비가 100% ), 블록간에 겹치는 일이 없다. 자동으로 줄바꿈이된다. EX. <div>, <p>, <hn>, <ul>, <ol>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>

 

인라인 레벨 요소

한 줄에서 일부분만 차지하는 요소, 컨텐츠 영역만큼만 차지한다. 한 줄에 여러 요소가 올 수 있다. 줄바꿈이 생기지 않는다. 만들고 컨텐츠 크기를 지정해주지 않으면 크기가 없다. (margin, height, width 설정이 제대로 설정되지 않는다.) EX. <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>

 

display

화면 배치 방법 변경 속성이다.

블록 레벨과 인라인 레벨 속성을 변경 가능하게 해준다.

• none : 화면에서 표현되지 않고 공간을 차지하지도 않는다.
• block : block 레벨 요소로 변경 —> inline을 block처럼 배치가 가능하다.
• inline : inline 레벨 요소로 변경 —> block을 inline처럼 배치가 가능하다.
• inline-block : 두 가지를 혼합해서 사용한다. inline 레벨이면서 content에는 block에 대한 속성(margin, height, width 설정)이 지정이 가능하다.

 

---

 

테두리 스타일

border-style

테두리 스타일 지정

border-width

테두리의 두께를 정하는 속성

선택자{border[-위치]-width: 숫자(단위) or 속성 값;}

 

border-color

테두리의 색상을 정하는 속성

** 각 테두리 별 설정 가능하다(top, right, bottom, left)

 

border

테두리 두께, 스타일, 색상을 한 번에 지정할 수 있는 속성

** 각 테두리 별 설정 가능하다(top, right, bottom, left)

 

border-radius

박스의 모서리를 둥글게 하는 속성

위치 : top-left, top-right, bottom-left, bottom-right 값 지정 가능, 생략하면 전체 모서리에 대해서 설정한 값만큼 반지름을 가지는 원이 모서리에 그려지고 모서리가 둥글게 변한다.

 

box-shadow

박스 영역에 그림자 효과를 주는 속성

 

수평 거리 + : 오른쪽, - : 왼쪽 수직 거리 + : 아래, - : 위 흐림 정도 : 값이 커지면 부드러운 느낌, 음수 사용 불가 번짐 정도 : 양수면 모든 방향으로 번져 커지고 음수면 축소된다. inset : 안쪽 그림자로 그리는 옵션 선택자{box-shadow: 수평거리 수직거리 흐림정도 번짐정도 색상 [inset];}

 

---

 

여백 스타일

 

✔️ padding

테두리(border)와 콘텐츠 영역 사이의 거리를 조절하는 속성

어떤 요소의 안쪽 여백을 의미

전체 혹은 영역 별로( top, bottom, left, right) 지정도 가능

선택자{padding[-위치]: 숫자(단위);}

 

✔️ margin

box 레벨이나 inline 레벨의 요소들 간의 간격을 조절하는 속성

요소 주변, 요소 간의 간격(여백)

margin 값을 통해 다른 요소와의 간격을 조절할 수 있다.

전체 혹은 영역 별로 ( top, bottom, left, right ) 지정 가능

선택자{margin[-위치]: 숫자(단위);}

** 마진 + 마진 = 상하 관계의 요소들은 마진이 중첩된다. 더 큰 마진의 값으로 합쳐진다. (더해지지 않는다.) / 좌우는 마진이 더해진다.

 

 

포지셔닝

box 모델, inline 모델을 페이지 상에서 배치하는 스타일

즉, 페이지 안 요소들을 원하는 위치에 배치하는 속성

 

position

페이지 요소를 자유롭게 배치하는 속성

 

 

• static : 문서의 흐름에 따라 원래 있어야 하는 위치에 놓이게 하는 것, 위치가 정해져 있기 때문에 offset 값을 준다고 해서 위치가 바뀌지 않는다.
• relative : relative 상태여도 offset 값이 없다면 static 위치랑 다름이 없다. 원래 위치해야 하는 위치(static)에서부터 top, left, right, bottom 으로 위치를 이동하게 지정 가능
• absolute : 문서의 흐름(구조)와 상관없이 내가 원하는 위치에 옮길 수 있다. 단! 부모나 조상의 요소(태그)는 static이 아니여야 배치할 수 있다.→ absolute여도 위치값**(= offset 속성)**을 지정해 주지 않으면 원래 있어야 하는 위치에 있게 된다.
• fixed : 브라우저에 표시되는 영역을 기준으로 표시된다. 반드시 뒤에 offset 값을 적어야 한다.
• sticky : 스크롤을 아래로 내려도 계속해서 따라오는 것처럼 표시된다. offset 값의 위치를 기준으로 해서 밑으로 내려가면 고정 위치에 따라 따라다닌다.

 

visibility

페이지에 특성 속성을 보이거나 보이지 않게 하는 속성

• visible : default, 요소가 화면에 보임
• hidden : 요소를 화면에 보이지 않게 하지만, 페이지 내에 공간은 차지한다.
• collapse : 표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절한다. 이외의 영역에서는 hidden으로 처리한다.

 

z-index

요소 위에 다른 요소를 쌓을 때 사용하는 속성

속성 값이 크면 가장 위에 있는 요소, 작으면 밑에 있는 요소이다.

작성하지 않으면 가장 먼저 들어오는 요소가 1을 가지게 된다. 따라서 요소가 항상 맨 위에 위치해야 한다면 값을 999 또는 10000등 큰 값으로 설정해야 한다.

 

float

페이지 내 요소의 위치를 왼쪽이나 오른쪽으로 지정하는 속성

• right : 오른쪽 배치
• left : 왼쪽 배치
• none : 배치 값을 설정하지 않음

선택자{float: 속성값;}

 

clear

페이지에 float 설정이 되어 있으면 그 속성이 그대로 그 다음 요소에 영향을 미치는데 이를 초기화 시키는 속성

• right : 오른쪽 배치 취소
• left : 왼쪽 배치 취소
• none : 설정하지 않음, 앞에 내용 그대로 적용
• both : 두 개 다 취소

선택자{clear: 속성값;}

 

---

 

다단 스타일

column-width

단의 너비를 고정하고 다단을 구성한다.

너비를 기준으로 다단의 개수를 나눈다.

선택자{
	-접두사-column-width:숫자(단위) or auto
	column-width:숫자(단위) or auto;
}

 

column-count

단의 개수를 지정하여 다단을 나눈다.

브라우저 창이 크거나 작아지면 다단의 숫자는 일정하고 다단의 크기만 크거나 작아진다.

 

선택자{
	-접두사-column-count:숫자(단위) or auto
	column-count:숫자(단위) or auto;
}

 

column-rule

다단 사이의 효과를 주는 속성

 

column-span

단을 합치는 속성

• 1 : default, 합치지 않은 것과 동일
• all : 전체를 합치는 것과 같음

 

---

 

표 스타일

caption-side

테이블 캡션에 대한 위치를 지정하는 속성

선택자{caption-side: top or bottom;}

 

width/height

표 높이와 너비를 지정하는 속성

테이블에 지정하면 테이블의 전체 크기, <td>에 지정하면 컬럼의 너비/높이 표시

 

border

테이블의 테두리 스타일을 지정하는 스타일

 

border-collapse

테이블 테두리 스타일을 변경하는 속성

테두리를 두 개로 표시할 지, 한 개로 표시할 지 결정

• separate : 테이블 테두리를 따로 표시 ( = 두 개로 표시)
• collapse : 테이블 테두리를 합쳐서 표시 ( = 한 개로 표시)

 

border-spacing

테두리를 두 개로 표현할 경우(separate), 가까운 쪽의 테두리 사이, 거리 지정 속성

가로 세로 하나만 지정하면 같은 값으로 동일하게 두 개 한꺼번에 변경

선택자{border-spacing: 가로 세로;}

 

empty-cells

테두리 스타일 두 개로 표시할 때(separate) 빈 셀에 대해 표시할 지 하지 않을 지 결정하는 속성

• show : default, 빈 셀 표시
• hide : 표시하지 않음

 

table-layout

셀의 내용에 따라서 셀의 너비를 변하게 할 지 고정할 지 결정하는 속성

<td>의 너비를 width로 지정해도 셀의 내용이 길어지면 자동으로 길어지고, table의 width 지정 값에 따라 안의 셀들이 조절되는데 <td>의 크기를 width로 고정하는 속성이다. 선택자{table-layout: fixed or auto;} ** 속성 값 auto는 default 값이다. ** fixed로 <td>를 고정한 상태에서 <td> 안의 내용이 넘어가면 <td>를 벗어나서 작성이 된다. 따라서, <td> 안에 작성되게 하려면 word-break: break-all; 을 추가하고 너비가 고정이 되면 작성 내용 길이에 따라 변경될 수 없기 때문에 자동으로 늘어날 수 있게 height 값을 auto로 정해준다. height: auto;

 

text-align

<td> 안의 텍스트를 수평으로 정렬하는 속성

선택자{text-align: left | center | right;}

 

vertical-align

<td> 안의 텍스트를 수직으로 정렬하는 속성, 기본 = middle

선택자{vertical-align: top | bottom | middle;}