[CSS] margin, overflow, display:none, 코드 기본 정리

margin, padding은 시계 방향으로 위치 지정이 가능한다.

margin : 15px(위) 20px(오른쪽) 15(아래) 20px(왼쪽)

그리고 직접 값을 부여하지 않은 곳은 반대편에 지정한 값을 따른다.

예) padding : 15px 20px 15px (오른쪽 20px 값을 따름)

 

overflow:hidden을 사용하면 요소에서 넘치는 부분을 가려 줄 수 있다.

display:none을 사용하면 필요 없는 요소를 숨길 수 있다.

 

공통된 코드들은 한 곳에 묶어서 처리하면 좋다고 한다.

	ul>li::after {
		content: '';
		display: block;
		width: 1px;
		height: 15px;
		background-color: gray;
		position: absolute;
		border-radius: 5px;
	}
	ul>li:first-child::after {
		left: 55px;
		top: 5px;
	}
	ul>li:nth-child(2)::after {
		left: 71px;
		top: 5px;
    }