10월 10일 내마음대로 html css 공부하기

4개의 padding을 가질 때는 top / right / bottom / left 순으로 돌아간다.

3개의 padding을 가질 때는 top / right, left / bottom 순으로 돌아간다.

2개의 padding을 가질 때는 top, bottom / right left 순으로 돌아간다.

1개의 padding을 가질 때는 모든 값이 동일하다.

 

border-width 속성은 테두리의 두께를 설정합니다.

border-color 속성은 테두리의 색깔을 설정합니다.

 

<마진(margin)>

margin 속성은 테두리와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다.

이러한 마진 영역은 패딩 영역과는 달리 background-color 속성의 영향을 받지 않습니다

css에서는 html 요소의 마진 영역을 설정하기 위해 다음과 같은 속성을 제공합니다.

1.margin-top

2.margin-right

3.margin-bottom

4.margin-left

margin 속성값을 음수로 설정하여 해당 요소를 다른 요소 위에 겹치게 할 수 있다.

margin 속성값을 inherit로 설정하면, 부모 요소의 margin 속성값을 그대로 물려받습니다.

margin 속성값에 auto를 사용하면 웹 브라우저가 수평 방향 마진 값을 자동으로 설정한다.

즉 해당 html 요소의 왼쪽과 오른쪽 마진값을 자동으로 설정한다. 그 결과 해당 요소는 그 요소를 포함하고 있는 부모 요소의 정중앙에 위치하게 된다.

 

<display 속성>

display : block;

-> 한 줄을 독차지 합니다. 다른 요소가 같은 줄에 배치 되지 않습니다.

-> 너비와 높이를 설정할 수 있습니다.

-> 기본적으로 부모 요소의 너비와 같다

-> 수직으로 쌓입니다. (다른 블록 요소들이 아래로 배치됨)

ex) div / h / p

 

display : inline;

-> 텍스트나 다른 인라인 요소와 같은 줄에 배치됩니다.

-> 너비와 높이를 직접 설정할 수 없습니다.

->요소 내용의 크기에 맞춰 자동으로 설정됩니다.

-> 마진과 패딩이 있지만 수직 방향의 마진과 패딩은 레이아웃에 영향을 끼치지 않습니다.

 

display : inline-block;

->인라인 요소처럼 한 줄에 다른 요소와 나란히 배치될 수 있습니다.

-> 그러나 블록 요소처럼 너비와 높이를 설정할 수 있습니다.

-> 마진과 패딩을 완전히 적용할 수 있습니다.

->여러 개의 inline-block 요소가 한 줄에 나란히 배치되며, 블록과 인라인의 장점을 결합한 형태입니다.

예시 : 버튼과 아이콘 등을 정렬할 떄 유용

 

display : flex;

-> 레이아웃을 유연하게 만들 수 있는 새로운 방식

-> 주로 수평 및 수직 정렬을 쉽게 제어할 수 있습니다.

-> 부모 요소(flex container)가 자식 요소들의 제어를 배치하며 자식 요소들은 **(flex items)라고 불립니다.

-> 자식 요소의 크기를 자동으로 조절하고 배치를 정렬하거나 공간을 동적으로 분배할 수 있다.

->여러 flex-direction 속성을 통해 수평(row)이나 수직(column)으로 레이아웃 조정할 수 있다.

ex) 네비게이션 바 카드 레이아웃

<참고!!>

Flex container는 자식 요소들을 유연하게 배치하는 부모 요소이다. 이 컨테이너에 display: flex; 속성을 적용하면

자식 요소들이 모두 플렉스 아이템으로 변환되고, 플렉스 박스의 규칙을 따르게 된다,

!! -> 자식 요소들인 flex items의 배치를 제어할 수 있다.

축(axis)를 기준으로  배치가 이루어지며, 기본적으로 가로 방향이 주축(main axis)이다.

속성들

1.flex-direction: 아이템들의 배치 방향을 설정합니다. (수평 또는 수직)

   row : (기본값) 왼쪽에서 오른쪽으로 수평 배치

   column : 위에서 아래로 수직 배치

 

2. justify - content : 주축(main axis)에서 아이템들의 정렬을 설정합니다.

flex - start / flex-end / center / space - between / space - around / space - evenly

 

3. align - items : 교차축에서 아이템들의 정렬을 설정한다.

stretch / flex-start / flex-end / center / baseline

4. flex-wrap: 컨테이너의 너비가 부족할 떄 아이템들이 줄 바꿈을 할지 여부를 결정

 

<flex-direction>의 주요 값들

row(기본값)

아이템들이 수평으로 왼쪽에서 오른쪽으로 배치된다.

주축이 가로방향이고(왼 -> 우) 교차축은 세로 방향이다(위-아래)

row-reverse(반대방향

column(세로축)