CSS Core-Note

#CSS Core-Note

• CSS에서 헷갈리는 부분이나 어려운 부분을 간단하게 나마 정리를 해보았다.

초기 CSS 설정

초기에 설정을 할경우 margin까지를 box의 영역으로 설정해주는 방법이다.

*{
	Box-sizing : border-box;
	Margin : 0;
	Padding: 0;
	}

Margin 상쇄를 없애는 방법

overflow를 사용한다.

overflow: auto;

2개의 요소중에 1개만 float를 설정하였을 때 margin이 사라지는 문제

float가 선언이 안된 영역에 overflow: hidden; 을 하면 사라진 margin이 나타난다.

overflow: hidden;

overflow: hidden; 프로퍼티는 자식 요소가 부모 요소의 영역보다 클 경우 넘치는 부분을 안보이게 해주는 역할을 하는데
여기서는 float 프로퍼티가 없어서 제대로 표현되지 못하는 요소를 제대로 출력해준다.

input 간격 줄이는 방법

방법1) input과 버튼에 float 을 주고 부모요소에 float해제

방법2) input과 버튼 부모요소에 font-size: 0; 을 주고 input 과 버튼에 font-size 제 선언

방법3) 부모요소에 display: flex

inline-block에서 4px의 영역이 발생한다.

감싸고 있는 요소의 font-size를 0으로 변경하여서 요소간의 4px간격을 없애줘야한다.

.wrapper {
  font-size: 0; /*요소간 간격을 제거*/
}

float 프로퍼티를 가진 자식 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않는 문제

부모요소에 clearfix를 설정해주면 부모의 높이가 제대로 반영이된다.

.clearfix::after {
	content = “”;
	display = block;
	clear = both;
}