✔ TODAY

오늘은 layout마지막 수업. 이때까지 배운 관련 속성들로 실습을 하였다.

✔ 학습한 내용

메뉴페이지

메뉴페이지html
관련 html코드는 위의 깃허브링크에 걸어두었다.

1) 기본 초기화 작업

html,body{margin: 0;
	padding: 0;}
ul{list-style: none;
   margin: 0;
   padding: 0;}
a{color: #000000;
  text-decoration: none;}

위의 css코드는 항상 기본으로 작성해 놓는다.

2) 리스트 관련

.menu ul{
	overflow: hidden;
	background-color: pink;}

• ul는 block, 3차원임으로, 자식의 값이 부모에게 영향을 줄 수 가 없다. 화면에 표기가 안되는 걸 보이게 해서 부모의 높이값을 인식가능하게 하기 위해서
  overflow: hidden를 넣는다.

.menu li{
	/*display: inline-block;*/
	float: left;

• block요소의 li를 x축으로 놓기위한 방법 2가지
  1) display: inline-block
  2) float: left;
  display는 태생적인 사이의 간격이 있어서 추천하지 않는다.

/*border: solid 1px red;*/
	border-top: solid 1px red;
	border-bottom: solid 1px red;
	border-left: solid 1px red;

• border: solid 1px red; 를 그냥 사용하면 왼우 서로 겹쳐서 사이 경계선이 굵어지게 된디다.

(그냥 border: 를 선택하게 되면 상하좌우 모두 선택하게게 되는 것.)

• 그냥 border를 사용하는 것보다 아래의 코드로 작성하는 것이 좋다.

    border-top: solid 1px red;
    border-bottom: solid 1px red;
 	border-left: solid 1px red; 
    마지막은 가상선택자로 설정
    .menu li:last-child{
	border-right: solid 1px red;}

• 메뉴리스트내 문자를 정가운데에 놓는 방법은 아래의 2가지가 있다.

- 버튼의 높이가 정해져 있는 경우
line-height: 50px;
- 버튼의 높이가 정해져 있지않는 경우
padding-top: 15px;
padding-bottom: 15px;

• 메뉴버튼 전체의 링크영역으로 설정하는 방법

.menu li a{
	display: block;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
    a의 영역을 넓히는 방법이다.

카카오친구목록

카카오친구html
관련 html코드는 위의 깃허브링크에 걸어두었다.

margin과 padding를 잘 설정하기

✨하이라이트!✨

.kakao-lists li img,
.kakao-lists li .kakao-info{
	vertical-align: middle;}

이미지 자체가 inline-block. kakao-info를 dispaly:inline-block으로 하여 가능.

네이버페이지

네이버페이지html
관련 html코드는 위의 깃허브링크에 걸어두었다.

💖tip
브라우저마다 설정이 달라 간혹 출력값이 다르게 나올 수 도 있다. 그럴때는 '크롬-검사'로 margin과 padding값을 확인한다.

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

뉴스 상단의 css속성
flexbox
위의 링크의 내용을 참고하여 작성할 수 있다.

상위html문서들의 css
상위 html문서들의 css코드는 깃허브링크를 참조.

---

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

• flex와 inline-block를 속성을 개념이해를 확실히 못한걸 파악함.
• 속성값 하나하나를 알아도 전체적인 틀에서는 적용이 아직 부족함.

---

✔ 해결방법작성

• 전체적인 css복습하기
• layout 개념을 중심으로 웹페이지 제작하기

---

✔ 학습 소감

개념을 실제 적용에 부족함이 있다는 것을 파악했다. 결국은 공부가 부족했다는 뜻... 더 뒤쳐지기 전에 전반적인 복습이 필요함을 절실하게 느꼈다.