TeamPage 프로젝트 하면서 다시 한번 알게 된 점 - 2

오늘 프로젝트를 진행하면서 CSS의 style에 대해서 생각을 해보는 계기가 되었습니다.

style에서 가장 많이 쓰게 된 것은 margin이라는 것이었는데 이것과 padding이 헷갈린 경우가 많았습니다.

padding은 해당 요소의 내부 여백을 조절하는 것이고

margin은 해당 요소의 외부 여백을 조절한다는 것을 확실하게 알게되었습니다.

또한 div를 두줄로 썼을 때 자동으로 줄 바꿈이 되어 세로로 나누어 지는 것을 nav로 감싸거나 div로 감싼 후 display: inline-block을 하면 가로로 나타내어 준 다는 것을 알게 되었습니다.

여기서 또한 float : left와 float : right 의 쓰임에 대해서 알게 되었는데 float은 둥둥 뜬다라는 뜻으로 받아드린다음 만약에 컨테이너 안에 사각형모양의 블록을 놓았을 때 즉, 무언가 안에 있을 때 그 아이의 style에 float을 하면 밖으로 나와져 버립니다.

이 뜻은 부모의 div의 크기를 내가 조절했을 때 자식의 크기에 영향을 가지 않게 각자 크기를 조절할때 float을 두면 되다는 것 입니다.

따라서 float을 쓰면 자식선택자의 높이값이 바뀌어도 부모 선택자의 높이값은 고정되어 틀에서 벗어난 모양이 나온다는 것 입니다.

그러므로 이때 부모의 값에 overflow: hidden;을 넣어주게 된다면 자식선택자의 높이값에 따라 부모선택자 높이값을 만들어 줄 수 있다는 것 입니다.

이럴 때 float을 써서 사각 틀 안에 무언갈 넣고 이쁘게 배치를 하고 싶으면 margin과 padding을 적절히 써야한다는 의미가 됩니다.

margin에서는 중앙에 두기 위해 margin: auto;를 써서 중아에 두려고하는데 여기서 block일 경우에만 적용이 가능하기 때문에 사용법이 다채롭지 않아 잘 쓰지 않게 되었습니다.

 

여기서 float을 쓰면 부모와 자식간의 관계가 끊어지는데 다시 관계를 종속시키기 위해서는 clear라는 함수를 사용합니다.

clear:left (왼쪽으로 배치된 float 속성 상속을 해지한다) 와 같은 것을 자식에다가 넣으면 바로 다시 자식과 부모의 관계가 돌아와 집니다.

 

여기서 제가 오늘 가장 많이 쓰게 된 것은 inline / inline-block 중앙정렬을 많이 썼는데 중앙 정렬을 썼다기 보다는 inline함수를 많이 썼습니다.

여기서 inline을 쓸 때 부모 속성에 가능한 text-aling:center 값을 줘서 중앙 정렬을 줘서 자식선택자가 중앙 정렬이 되길 바래야 하지만 자식이 block 속성일 경우에는 절대 넣어줘서는 안됩니다.

 

여기서 자주나오는 block이라는 말이 나오는데 display: inline-block이라는 것을 자식속성에다가 넣어주면 자식은 가로 정렬을 하게 됩니다. 

div같이 세로로 줄줄이 나오는 것을 미연에 방지할 수 있습니다.

 

마지막으로 <br>을 적으면 한칸이 띄워지기 때문에 자주 사용해서 모양틀을 잡아주기도 할 수 있을 것 같습니다.

 

내일은 파이어베이스에 연동해서 데이터베이스에 값을 넣고 빼서 추가하는 것을 해보도록 하겠습니다.

(로그인 기능을 넣어야 하는데 걱정입니다.)