Box Model
border-radius 속성
50%를 주면 모서리가 다 깎여서 원이 된다.
border-radius-left 등으로 적용도 가능
Box-type : display
Block : 길을 막는 성질
남는 공간에 아래의 요소가 들어갈 수 있을 것 같지만 block의 기본적인 특성상 불가능하다.
Margin :0 auto;
이 속성을 주면 남은 마진의 좌우를 균등하게 나누어 박스가 가운데에 배치된다.
Inline : 옆으로 흐르는 성질
문서 작성할 때와 마찬가지로 인라인 요소가 늘어서있다가 주어진 width를 넘어서게 되면 아래줄로 옮겨서 다시 늘어서게 된다.
따라서 하기와 같은 속성은 적용이 되지 않는다.
적용은 된 것 같아 보이지만 사실상 텍스트가 밀려나지 않았기 때문에 의미는 없다고 할 수 있다.
inline-block
인라인과 블록의 특성을 둘 다 가지고 있다.
display:inline-block 으로 작성하며 하기와 같이 적용된 것을 볼 수 있다.
Float
가로배치를 위한 속성
What happens?
말 그대로 띄운다는 의미를 가지고 있다.
따라서 특정 요소를 float 하게 되면 하기와 같은 변화가 일어나게 되고 부모요소는 float 된 자식요소와 분리되게 된다.
따라서 빨간 박스가 float 되게 되면 나머지 요소들이 빨간 박스가 있던 공간을 빈 곳으로 인식하게 되고 앞으로 당겨지게 되며 부모요소의 height 도 변하게 된다.
또한 float 을 적용받는 요소는 전부 block 속성을 갖게 된다.
(개발자 도구-computed-에서 display 를 검색하면 확인이 가능)
작성방법
float : left; right; 으로 작성 가능
세 박스를 동일하게 float:left; 주는 경우 이와 같은 결과가 나타나게 된다.
그러나 이렇게 사용하는 경우 레이아웃이 무너지기 쉽다. 박스들은 float 를 보이지 않는 영역으로 인식하지만 텍스트는 하기와 같이 float 를 인식하기 때문이다. 따라서 요즘은 float 를 사용하지 않는 추세이다.
How to fix?
overflow : hidden
부모요소에게 overflow:hidden 속성을 주면 자동으로 정리가 된다.
Clearfix
float 으로 인해 망가진 레이아웃을 고치기 위해 clear : left, right, both속성을 적용
가상요소 만들기
CSS 상 보이지 않는 가상요소를 만들어 레이아웃을 고정시킬 수 있고, 앞 뒤 두 곳에 둘 수 있다.
이런 식으로 작성할 수 있으며 빈칸으로 두더라도content 속성은 필수적이다.
Position
Static
가장 기본적인 상태
Relative
이동의 기준점은 본래 있던 자리. 그러나 float 과 달리 본인이 있던 자리를 기억하므로 부모와 형제요소에게 영향을 끼치지 않는다.
작성방법은 이와 같다.
position:relative;
top : 20px;
bottom : 10px;Absolute
display 값이 자동으로 block으로 변하나 완벽하게 block 을 하지는 못한다.
또한 자식요소에게 position:absolute 를 주게 되면 부모요소는 자식요소가 이탈했다고 생각하고 width 를 변화시킨다.
absolute는 기준점을 선택할 수 있다는 점에서 독특하다.
다만 static 성격을 가진 요소는 기준점이 될 수 없다.
position: absolute를 하게 되면 자신의 부모 요소부터 static 이 아닌 요소를 찾아 기준점을 찾게 되므로 조상요소 중에서 position:ralative 를 주어서 기준점을 잡아주는 것이 좋다.
Fixed
absolute 와 대부분 유사하나 다른점은 기준점이 명확하게 viewport 창이라는 것이다.
작성 방법
4방향을 다 작성하는것이 아니라 top/bottom 중 하나와 right/left 중에 하나를 써주는 것이 편리하다.
Z-index
요소들을 겹치고 싶을때, Z축 값을 적어주어 수직방향의 높이값을 정해 줄 수 있다.
Flex
사용방법
dsplay: flex; flex를 주고자 하는 요소들을 감싸고 있는 부모요소에게 플렉스 값을 선언하고
flex-direction: row; or column;마찬가지로 부모요소에게 정렬 방향을 선언한다.
flex-wrap
Flex axis
main 과 cross axis 방향을 유념할 것.
flex-direction : row; 인 경우의 axis
flex-direction : column; 인 경우의 axis
정렬방법
내가 direction 준 방향에 따라 정렬방법이 달라진다.
main axis 방향으로 정렬하고 싶은 경우 : justify-content
ex)
justify-content: center;
justify-content: end;
justify-content: space-between;
justify-content: space-around;
cross axis 방향으로 정렬하고 싶은 경우 : align-items,
align-content 를 사용한다.
두 속성의 차이는 flex-wrap: 이 wrap 으로 적용되어 있을때 확인할 수 있다. align-items 를 쓰는 경우는 여러줄이 생성될 경우 각 줄의 axis 가 생기기 때문에 정렬이 이상하게 되는 경우가 있다.
이 때 align-content를 사용하면 요소 전체를 한 덩어리로 생각하기 때문에 한번에 같이 정렬이 된다.
order
order: 값을 주면 요소의 정렬 순서도 변경할 수가 있다.
