HTML, CSS 복습

p {
	/* color 777 사용하지 마라*/
	color : #767676;
	font-size : 12px; /* 본문 글자  14~16px */
}
	
	/* font-family -> noto-sans를 최우선으로 사용하되 없으면 뒤에꺼 써라 */
p {
	font-family: 'noto-sans' , 맑은 고딕, 나눔스퀘어
}

a:link {color:styblue}; // 기본
a:visited {color: orange}; // 방문한 곳
a:hover {color: red}; // 마우스 올렸을 때
a:active {color: yellow}; /* 계속 누르고 있을 때*/

주로 사용하는 것은 2번 / 1번은 그냥 a 와 동일해서 굳이 사용할 필요 X

요즘은 width 값을 크게 잡는다.

전과 달리 화면을 꽉 채우는 것이 인기

.wrap {height: 100px} // body 값과 같이 가로 1920px (예시)를 그대로 갖는다.

.header {height: 200px}
.content {width: 1200px; margin: 0px auto; height: 200px;}

Float 속성 레이아웃

<aside> 💡 알고 이해하고 있으면 되는 레이아웃, 요즘은 flex, grid가 더 효율적

</aside>

기본 div 속성은 위에서 아래로 수직적으로 쌓이지만

float 속성을 적용한 박스 들 끼리 좌우 정렬이 되고 나머지는 밑에 쌓인다.

(밑에 쌓이는 것은 default 기능)

#sidebar { float:left; }
#contents { float:left;}

// 현재 화면에서 푸터가 옆에 있는 이유는 **clear : both** 를 입력하지 않았기 때문이다.

float 사용 시 clear:both , overflow : hidden 사용하는 이유