목록Front-end/HTML,CSS (40)
NULL
float으로 태그를 지정하면 인라인과 인라인 블록은 들어오지 못한다. float으로 지정한게 이미지라고 한다면 글자는 이미지안에 들어갈수없다는 말과 같다. 이런 용도로 많이 사용한다고 한다.
Absolute 포지션 가장 가까운 포지셔닝이 된 조상요소가 기준 쉽게 이해하자면 상위 태그에 포지셔닝이 된것을 기준으로 적용한다.
fixed 포지션 브라우저 기준으로 움직인다. fixed는 고정을 뜻한다. 스크롤을 내려도 fixed적용한 요소는 그대로 페이지에 고정된다. 웹사이트 상담톡같은 기능처럼 웹페이지에 항상 고정되있다. fixed는 네비게이션바같은 곳에 자주 사용된다.
원래 있던 위치를 기준으로 한다. 공간을 준다고 하면 position:relative; top: 30px; 하게 되면 포지션을 적용한 태그기준으로 탑에 여백30px이 생기면서 포지션을 적용한 태그는 아래로 내려가는 효과를 갖는다. margin-top:30px;이랑 얼핏 비슷하다. 차이점이 있다면 마진은 여백을 주는 과정에서 다른 내용들의 위치까지 영향을 주지만 relative포지션은 적용한 태그 이외에 다른 태그들의 위치에 영향을 주지않는다. 한마디로, 포지션은 적용된 태그만 움직이게 되고 주변 글자들은 움직이지않고 제자리에 있다. relative를 써서 움직이게 되면 전에 있던 자리는 공백처리된다. 요소들이 겹치는 레이아웃을 할때 사용하면 유용하다.
모든 요소의 가운데를 맞추고 싶다면 모든요소에 vertical-align: middle; 사용 예를 들어 text-align:center; 또는 margin-left:auto; margin-right:auto; 들이 가운데 정렬이라면 vertical-align: middle;은 세로 정렬이다. 이 가운데 정렬이라면 세로 가운데 정렬이다.
inline또는 inline-block이면 부모태그에 text-align:center;쓰면 된다. inline은 글자로 인식 block이면 margin-left:auto; margin-right:auto; 를 사용한다. block은 div처럼 줄바꿈과 공간을 차지한다. 크기조정가능 inline-block은 글자로 인식하면서 크기조정도 가능하다. inline과 block의 장점들을 합쳐논 느낌이다.
만약 inline 요소처럼 다른 요소들과 같은 줄에 머무르면서 block 요소처럼 가로, 세로 길이도 설정해주고 싶으면 그 둘을 섞어놓은 inline-block을 사용한다. 선언법 display: inline-block;
display의 종류 모든 요소는 딱 한개의 display값을 가지고 있다. 가질수있는 display종류는 inline block inline-block flex list-item none 등등 여러가지가 있는데 대부분은 inline과 block 중 한 가지이다. block는 독립적으로 줄바꿈을 하고 그 줄 공간을 다 차지한다. inline은 같은 줄에 머무르려고 하는 성향과 필요한 만큼 가로길이를 차지한다. 다음 요소들은 기본 display 값이 inline이다. display 바꾸기 1. display: block; // inline을 block으로 바꿈 2. display: inline; //block을 inline으로 바꿈
css 다양한 단위정리
css에선 px,rem,em,%등 여러단위가 존재한다. 폰트크기 뿐만 아니라 padding,margin,width등 다양한 속성들에 단위를 사용할수있다. px는 절대적인 값이다. 다른요소의 값에 영향을 받지않는다. rem은 상대적인 값이라서 html태그에만 영향받는다. 2rem은 html태그의 font-size의 2배 크기다. em도 rem과 같이 상대적인 값이다. em은 자기자신의 font-size를 기준으로 한다. 2em은 자기자신의 font-size의 2배 크기다. 자기 자신의 font-size를 따로 정해두지 않았다면 상위요소에서 상속받은값을 기준으로 한다. 만약 자기자신에게 폰트크기값이 있다면 그값이 em기준이다. 퍼센트(%)도 마찬가지로 상대값이다. 어느것에 쓰냐에 따라서 다른 기준이 적용된다..