display:inline 과 display:block의 차이점
display:inline은 텍스트 요소를 말하여 display:block은 박스 영역을 의미합니다.
float:left를 썼을 경우 영역사라짐(height:0)을 방지하는 방법?
float:left를 쓰게 되면 레이아웃이 깨지는 현상이 발생합니다. 즉 하이트 값이 없어짐 -> 영역이 사라지는 현상입니다. 이 현상을 막기위해서는 여러가지 방법이 있는데 현재는 clearfix 방법을 추천합니다.
- 깨지는 영역에 clear:both를 사용하여 영역깨짐 현상을 막을 수 있지만 레이아웃이 복잡한 곳에서는 어디가 깨지는지 알 수 없어 잘 사용하지 않습니다.
- 부모요소에 display:inline-block을 사용하면 되지만 성질을 바꾸어야 하기 때문에 제약이 있어 잘 사용하지 않습니다.
- 부모요소에 overflow: hidden을 사용합니다. 제일 편하게 흔히 사용하는 방법이지만 내가 지정한 영역 외에는 보이지 않기 때문에 못쓰는 경우도 있어 완벽하지는 않습니다.
- float을 사용한 부모 태그한테 clearfix라는 css를 만들어 사용합니다. 현재는 제일 많이 사용하는 방법이며 아직까진 문제점을 가지고 있지 않지만 css를 만들어줘야 하는 번거로움이 있습니다.
/* clearfix */
.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}
컨텐츠 요소를 가운데 오게 하는 방법?
반응형을 작업할 때 어떤 요소를 가운데 오게 하는 방법은 상당히 중요하고 방법도 여러가지가 있습니다.
가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.
- 부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게)
- 요소(블록구조) : margin:0 auto; line-height: (height값과 동일하게)
요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다.
- 부모요소 : display:table;
- 자식요소 : display:table-cell, text-align:center; vertical-align:middle;
절대 요소를 이용한 가운데 정렬방법이며, 제일 흔하게 쓰이지만 단점은 영역이 없어지는 것이 단점이어서 반응형을 할 때 사용하기 불편한 점이 있습니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:50%; left: 50%; margin-top:-(자식 요소 높이값의 반); margin-left:-(자식 요소 가로값의 반);
만약 자식요소의 가로값과 세로 값을 모르고 유동적인 경우에 절대 요소를 사용하여 가운데로 오는 정렬방법입니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%);
절대 요소를 이용한 가운데 정렬 방법이지만 흔하게 쓰이지는 않습니다.
- 부모요소 : position:relative;
- 자식요소 : position:absolute; top:0; left:0; top:0; right:0; margin: auto;
CSS3를 이용한 방법이지만 최신 브라우저 이외에서는 작동하지 않는 단점이 있지만 표준화 된다면 앞으로 많이 쓰일 방법입니다.
- 부모요소 : height 값 설정
- 자식요소 : display: flex; justify-content: center; align-items: center;
::after와 ::before는 언제 사용하는가?
요소에 가상으로 요소를 줄 때 사용합니다. 즉 마크업의 수정없이 또 다른 요소를 줄 때 많이 사용합니다.
CSS 적용 우선순위?
CSS속성이 여러개가 겹쳤을 경우 !important > inline style > id > class > style (작업한 스타일.css 에서 속성이 겹치는 경우는 속성이 아래이 있을 수록 우선순위가 높습니다.)