💻 학습 내용

💡 실습 : 기본레이아웃

⭐️ css 초기화 작업

html, body{
	margin: 0;
	padding: 0;
}

ul{
	list-style: none;
}

a{
	color: #000000;
	text-decoration: none;
}

⭐️ x축으로 메뉴버튼 만들기

1.Display:inline-block;
➡️ 기본적으로 공백값을 가지고 있기 때문에 사용할 수 없다

2. Float:left;

⭐️ 글자 가운데 정렬

1. x축을 기준으로 가운데 글자 정렬

• text-align: center;

2. y축을 기준으로 가운데 글자 정렬

• 버튼의 높이값이 존재 -> line-height: 버튼의 높이값px
  ➡️ 눈대중으로 맞춰야 하는 경우가 생기기도 함

• 버튼의 높이값이 없음 -> li 태그를 기준으로 li태그와 a태그 사이에 위,아래 공백을 똑같은 크기로 생성을 해주면 글자는 y축 중앙 정렬이 될 것임
  

⭐️ 가상 선택자

1. 마우스를 올렸을 때 색이 변경 | hover

.menu li a:hover {
	color: blue; 
}

2. border값 주기 | last-child

.menu li:last-child {
	border-right: solid 1px red;
}

⭐️ a 태그에 페이지 링크 주소, html 문서파일을 속성값으로 전달할 수도 있다

<a href="index.html">메뉴 버튼</a>

➡️ 멀티페이지를 만들 때 유용하게 사용 가능

⭐️ 네이버 실습

.living-lists {
	width: 750px;
	background-color: orange;
}

.living-lists .image-link,
.living-lists .info-link{
	display: inline-block;
	vertical-align: middle;
}

.living-lists .image-link{
	margin-right: 21px;
}


.living-lists .info-link{
	width: 512px;
}

.title-wrap{
	border-top: solid 2px #000000;
	border-bottom: solid 1px #000000;

	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 15px;
	padding-right: 20px;
}

.title-wrap h3{
	margin-bottom: 20px;
}

.title-wrap .btn-wrap{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}

css 레이아웃 공부 사이트

📝 마무리

저번주 부터 이어져오던 레이아웃 강의의 마무리였다.
그 동안 궁금했던 공간 박스들의 위치를 변경하는 방법을 배우게 되었다.
어제 강의에서 알려주셨던 flex를 이용한 공간배치를 직접 실습을 해봤다.
선생님이 알려주신 사이트에서 몇번 클릭을 하니 내가 원하는 코드가 자동으로 만들어졌다. 너무 신기하고 코딩의 세상은 정말 무궁무진하고 도움을 받을 수 있는 많은 학습 자료 들이 있다는 것에 감사함을 느끼게 되었다.

border값이 겹쳐지면 동일한 수치가 적용되지 않기 때문에 border값을 주기 위한 가상 선택자를 이용하는 방법을 배웠다.
오늘 수업도 너무 즐겁고 재미있었다. 결과물이 제대로 나오는 부분이 앞으로 내가 만들 수 있는 무언가에 대한 흥미를 계속 자극해 나간다.