[Web Fe] CSS 정리하기 3

이번 포스팅 역시 CSS학습 내용을 기록을 했습니다.

 

6장 : 박스모델 개념

 

Html요소는 앞선강의에서 언급 했다시피 태그와 컨텐츠로 이루어져있습니다. 그중 우리는 컨텐츠에 집중해볼것입니다. Html의 모든요소가 박스형태를 갖는다는것은 브라우저에서 출력되는 컨텐츠가 사각형의 박스형태를 갖는다는것입니다. 그렇다면 이 박스형태는 어디에 쓰는것일까요. 컨텐츠 배치와 요소박스의 크기를 계산해 출력할수도 있습니다. 그래서 옳은 브라우저에서 출력을 위해 박스모델 개념이해가 중요합니다.

 

 

위의 그림의 박스형태를 가리켜 박스모델입니다.

박스모델은 패딩 보더 마진 컨텐츠의 구성입니다.

먼저 컨텐츠는 이미지나 텍스트같은 우리가 태그사이에 담은 실제 컨텐츠를 담고있는 부분입니다.

보더는 컨텐츠를 감싸고 있는 테두리선입니다. 마진과 패딩은 둘다 여백입니다. 이는 보더를 기준으로 나뉩니다.

패딩은 컨텐츠와 보더사이 여백.

마진은 보더밖에 여백입니다.

 

Border

 

Border는 크게 style width color radius로 나뉩니다.  

 

보더 스타일은 대쉬드 더블 다티드 솔리드 순 칼라는 레드 블루 옐로 그린임을 확인 할 수 있습니다.

적용결과를 보시면 위 오른쪽 아래 왼쪽순으로 적용된 것을 확인할수 있습니다.

첨언하자면 대쉬드는 긴 점선 더블은 두줄 다티드는 짧은 점선 솔리드는 실선입니다.

 

 

 

가장자리를 둥글게 만들고싶다면 border radius를 이용합니다. 이는 반지름의 길이기준 입니다.

 

 

Border & Margin :

 

 

패딩과 마진입니다. 마진은 보더밖의 여백 패딩은 컨텐트와 보더 사이의 여백입니다.

각각 색상으로 칠해져 구분하실수 있으실 겁니다!

 보더는 컨텐트를 감싸는 테두리입니다.

즉 보더를 경계로 안은 패딩 밖은 마진입니다. 이렇듯 비슷한 두요소의 차이는 패딩은 요소내에 포함이고,

마진은 요소내에 포함되지 않습니다.

 

 

마진상쇄입니다. 이는 위에도 20px 아래도 30px주면은 50px을 주어야하는데 30px이 유지될것입니다

.이는 두마진이 공존하지않고 큰 마진을 따라 상쇄된다는걸 보여줍니다.

 

 

Content-box가 일반적인 기본값입니다. 즉 컨텐트의 크기만 포함합니다.

이와달리 border-box는 보더의 두께까지 포함됩니다. 즉 컨텐트의 크기와 패팅 보더까지 합한값입니다.

 

 

마진 80 패딩 20을 주었습니다. 여기서 오버플로우는 넘치는부분입니다. 즉 글씨가 박스안에 전부 안담기고 넘치는 경우가있죠 여기서 제가 사용한 스크롤은 스크롤로 안보이는 부분을 보이게 하겠다. 한것입니다. 그 외에 Hidden등으로 숨길 수도 있습니다!

 

 

 

같은 너비와 높이를 주었는데 컨텐츠박스가 좀더 큰걸 확인할 수 있습니다.

보더 박스는 컨텐츠크기 패딩 보더까지 합하기 때문입니다.

 

7장 : 위치와 관련된 프로퍼티

 

첫번째로 display입니다. Display는 요소가 보여지는 방식을 지정하는데요,

보통 기본값으로 block 또는 inline 을 갖습니다. 따라서 block요소와 inline요소로 나눕니다.

먼저 display block 은 항상 새로운 줄에서 시작하며 따로 너비를 지정하지 않아도 width 100%를 기본으로 가집니다. 우리가 자주쓰던 Div h1 등등 태그들이 이에 해당합니다.

 

 

이와 달리 Inline은 블록과 다르게 새로운줄에서 시작하지 않으며, 필요한만큼의 너비를 가집니다. 즉 요소의 컨텐츠만큼 가집니다. <a> <span> <img>등이 해당.

 

이두종류는 서로 가질수있는 요소가 다릅니다. Block은 width.. 모두가능하지만 inline은 위 4개를 지정할수 없습니다.

정리하자면 아래와 같습니다.

 

 

 

이를 보완하기 위해 inline-block은 기본적으로 inline과 같은 성질을 갖고있지만,

width height등 프로퍼티 사용이 가능합니다.

 

 

Position

 

 

우리는 position 프로퍼티를 사용해 요소의 위치를 정의할수 있습니다.

이에 4가지로 나눌수 있습니다.

Position중 static은 기본값입니다.그리고 좌표 프로퍼티를 쓸 수 없습니다.

Relative는 말그래도 상대위치입니다. 기본위치를 기준으로 좌표 프로퍼티를 사용해 위치를 이동합니다.

Absolute는 부모나 조상중 relative,absolute,fixed가 선언된 곳을 기준으로 좌표 프로퍼티 적용합니다. 부모나 조상중 위의 속성이 없다면, body태그를 기준으로 설정이됩니다.

마지막 fixed는 정말쉽습니다. 보이는 화면을 기준으로 좌표 프로퍼티를 이용하여 위치를 고정합니다. Scroll할때 따라다니는 게 이를 활용한것입니다.

 

 

 

먼저 가장 위 스태틱입니다.일단 모든 태그들은 처음에 position: static 상태입니다. (기본적으로 static이라 따로 써주지 않아도 됩니다.) 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다.

 

다음으로 렐러티브입니다. top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능합니다.

각각의 태그가 기존 static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 주어진 픽셀만큼 이동했습니다.#top 태그에 top: 5px를 줬는데 왜 아래로 이동했을 까요? 바로 relative는 각각의 방향을 기준으로 태그 안쪽 방향으로 이동합니다. 바깥쪽으로 이동하게 하고 싶으면 5px 대신 음수 -5px를 주면 됩니다.

 

또한 주목할 것은 #top이 #left보다 위에 있다는 겁니다. 보통 태그는 같은 position이면 나중에 나온 태그가 더 위에 배치됩니다. 하지만 z-index라는 속성을 #top 태그에 더 높게 주었기 때문에 #left태그보다 위로 올라갔습니다. z-index는 태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성입니다. 기본값은 0이고요. #top에 1을 주었기 때문에 다른 태그들보다 높게 위치합니다. 바로 뒤에 z-index 강좌가 나옵니다.

 

다음 앱솔루트입니다. elative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다. 위의 예시를 보면, #absolute는 조상 태그 중 postion: relative인 것이 없기 때문에 body를 기준으로 가장 오른쪽으로 달라붙었습니다. 반면 #child는 조상 태그인 #parent가 position: relative이기 때문에 그것을 기준으로 가장 오른쪽으로 달라붙었습니다. 차이를 아시겠죠?

 

참고로 absolute가 되면 div여도 더는 width: 100%가 아닙니다.

 

픽스드는 스크롤을 내려도 그 자리에 계속 있죠. 바로 포지션이 fixed로 설정되어 있기 때문입니다. fixed도 absolute처럼 더는 div가 width: 100%가 아닙니다.

 

 

Z-index.

앞서말했듯이 태그가 겹칠 때 그 순서를정해줍니다. 이는 숫자값이 클수록 전면에 출현하게 됩니다. 이는 static을 제외한 요소에서 써야합니다. 1 과 2를 쓰면 1층 2층 과같은 개념입니다. 즉 2층이 위에 보일 것 입니다!

 

 

 

 

기존의 display나 position등을 통한 웹의 레이아웃개발은 생각할 부분들이 많고 한계가 어느정도 존재하기때문에 개발하기가 어려웠습니다. 하지만 이를 쉽게하기 위해서 flexbox가 css에서 추가되었습니다. Flexbox는 크기가 불분명한 요소들에 대해서도 효율적으로 동작하기때문에 자주이용됩니다. 특별한 계산없이 정렬이 쉽게할수있단 얘기입니다.

Flex container 부모요소와 flex item 자식요소로 구성되어있습니다. 이를 사용하기위햐선 정렬하고자하는 요소의 부모요소에 display:flex; 를 추가하면됩니다.

 

 

부모요소 플렉스 컨테이너와 자식요소 플렉스 아이템에 각각쓸수있는 프로퍼티가 다음과같이 다릅니다.

 

 

 

 

 

이 그림이 flexbox의 핵심입니다. 즉 가로든 세로든 정해진 순서의 방향으로 프로퍼티를 정렬합니다. 이를 통해 웬만한 웹 레이아웃을 재현합니다

 

 

 

가장 먼저 부모요소 flex container 프로퍼티중 flex-directio입니다. Flex컨테이너 안의 item들의 방향을 정합니다. 기본은 row 즉 정방향입니다. Row reverse는 오른쪽에서 왼쪽

column은 위에서 아래 column-reverse는 아래에서 위입니다.

실습으로 값들을 확인해봅시다. ->flex-direction.html

먼저 row를 기입했을때는 정방향

로우리벌스는 오른쪽에서 왼쪽 칼럼은 위에서 아래 칼럼리버스는 아래에서 위입니다.

 

 

 

.

플렉스 랩은 Flex 아이템이 컨테이너를 벗어났을때 줄을 바꾸는 속성입니다.

 

 

 

Flex-directio으로 정해진 방향을 기준으로 수평으로 item을 정렬하는 방법을 정합니다.

여기서 수평방향은 위에 같은 방향 즉 row라면 가로 column이라면 세로 입니다.

 

 

 

 

 

justify-content 입니다.

Flexstart center flexend는 순서대로 왼쪽끝 가운데 오른쪽끝을 기준으로 정렬합니다.

Spacebetween은 시작과 끝을 기준으로 동일한간격으로 아이템을 배치

시작과 끝에 시작과 끝에 아이템을 하나씩두고 그사이에 남은공간을 동일한간격으로 아이템을 배치합니다

 

 

 

 

 

 

 

 

 

스트레치가 기본값입니다. 지정이없는경우 아이템을 늘려서 맞춰줍니다.

Flexstart는 수직시작부터 end는 끝 center는 가운데입니다.

Baseline은 안드로이드와 같습니다 글꼴기준입니다.

 

 

 

얼라인 컨텐츠는 Flex-directio으로 정해진방향을 기준으로 수직으로 여러줄인 item을 정렬하는 방법을 정합니다.

 

 

 

 

이제 자식요소flex item입니다.

먼저 flex-grow입니다. Flex grow는 flew아이템의 확장과 관련된 속성입니다. 단위없는 숫자값을 사용하구요 0이 기본입니다.

0일경우 flex 컨테이너가 커져도 아이템의 크기는 그대로입니다.

1이상의 값을가질경우 플렉스아이템의 원래크기와는 상관없이 컨테이너 크기를 채우기위해 커집니다.

다음 다른값의 두 아이템을 적용하면 다음과같습니다. 0일경우 컨테이너 크기와상관없이 아이템크기는 그대로 하나가 1일경우 1인부분이 맞춰커지고 마지막 더큰숫자가 더큰공간을 먹게됩니다.

예시봅시다

 

 

 

다음은 flex-shrink입니다.

Flex아이템의 축소와 관련된속성이구요 0과 1등 정수를 사용합니다. 기본은 1입니다.

속성값이 0일경우 컨테이너크기가 줄어들때 아이템은 컨테이너 크기에 영향받지 않고 원래크기를 유지합니다.

1 이상일 일경우 컨테이너 크기가 작아질때 아이템크기가 맞춰 줄어듭니다.