[배운내용]

(1) 레이아웃 실습

초기화 작업

홈페이지의 레이아웃을 설정하기 위해서 초기화 작업을 해 줄 필요가 있다. ul리스트에서 기본적으로 표시되는 불릿을 없애고, 전체적으로 마진과 패딩값을 0으로 성정한다.

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

ul { 
list-style: none;
margin: 0;
padding: 0;}

a태그에 기본으로 설정된 밑줄 장식도 없애준다.

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

상단리스트(메인메뉴)

1. 메뉴 공간 설정

• 목록을 상단에 가로정렬을 하기 위해서 float: left처리를 해준다.
• 3차원 설정이 되었으므로 ul태그(리스트의 배경)에 배경색을 주어도 보이지 않는다. height값이 0이 되어있기 때문이다. 이때, overflow: hidden 값을 준다.
• border값을 1px로 부여했을 때 각 리스트가 겹치는 부분은 2px이 되므로, border-top/bottom/left 값을 각각 1px씩 부여하고
• 마지막 리스트의 오른쪽 border 값은
  .menu li:last-child{border-right: solid 1px red;} 와 같이 표기할 수 있다.

2. 메뉴 텍스트 설정

• a태그로 인해 텍스트에 적용된 링크를 메뉴버튼 공간에도 적용될 수 있도록, inline요소인 a태그를 block으로 바꿔주기 위해,
  .menu li a{ display: block;} 을 입력해주고,
  text-align: center; 를 입력해 텍스트를 가운데 정렬한다.

• 영역 내 글자를 y축 정렬하는 방법은 두가지가 있다.

  (1) line-height: 50px;
  : 버튼에 높이 값이 있을 때 그 높이값과 같은 값을 준다.
  (2) padding-top: 15px; padding-bottom: 15px;
  : 패딩 top과 bottom에 같은 크기의 padding공간을 준다. 이 때 패딩 값에는 링크가 걸리지 않으며 텍스트를 클릭해야만 링크로 이동할 수 있다.

• 마우스 커서를 올렸을 때 색상이 변경되게 하기 위해 hover값을 입력해 준다.

링크 설정

실습에서 '메뉴버튼 - 카카오 - 네이버'를 입력했다. 이때 버튼을 눌렀을 때 각각의 페이지로 이동할 수 있도록 a href="kakao.html"과 같이 각각 만든 html파일을 입력해 준다.

카카오친구리스트

• 이미지를 왼쪽에 사용자의 이름과 상태메세지를 정렬하기 위해서 , x축 중앙정렬하는 값을 입력해야한다.
  .kakao-lists li img, .kakao-lists li .kakao-info{vertical-align: middle;}

• 이때 기본적으로 적용되는 마진값이 있으므로, 마진값도 0으로 지정해주어야한다.
  .kakao-lists li .kakao-info h3{margin: 0;}

네이버 메인화면

• 네이버메인에 적용된대로 width값을 적용해주고, 영역을 확인하기 위해 색상을 입혔다.
  .living-lists { width: 750px;
  background-color: orange;}

• 영역자체가 a태그 이므로 inline-block으로 속성값을 준다.
  .living-lists .image-link, .living-lists .info-link{
  display: inline-block;
  vertical-align: middle;}

• 네이버 메인의 실제모습대로 각각 margin값과 크기를 적용시켜준다.
  .living-lists .image-link{
  margin-right: 21px;}
  .living-lists .info-link{
  width: 512px;}
  

[어려웠던 점]

실습을 잘 따라했다고 생각했는데, 네이버화면 마지막부분에서 a태그안의 text요소들이 일정거리 떨어져있고 강사님과 다르다는 것을 발견했다. 영상을 계속 돌려보며 빠진부분이 있나 봤는데 없었다.

[해결방법]

강사님이 말씀해주신대로 브라우저에서 검사로 h3와 p에 마진값이 있는 것을 확인하고 아래와 같이 없애주었다.

.living-info h3, p{margin: 0 ;}

[학습소감]

역시 응용이 가장 어려운 것같다. 어떤식으로 이쁘게 웹페이지를 구상하고, 또 알고있는 속성값들을 어떻게 활용하는지에 따라 페이지가 많이 달라지는 것 같다.
역시 연습이 답인듯 하다.