강의

• 2:46:04부터

1. 실습

1. 메뉴 만들어보기

	<nav class="menu">
	<ul>
		<li>
			<a href="#">메뉴 버튼</a>
		</li>
		<li>
			<a href="#">카카오</a>
		</li>
		<li>
			<a href="#">다음</a>
		</li>
	</ul>
	</nav>

• 기본적인CSS

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

• ul앞에 점 없애기

  ul{
  	list-style: none;}

• a에 언더라인없애고 색지우기

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

• ul,li정렬하기

  	.menu ul{
  	overflow: hidden;
  	background-color: pink;}
  	.menu li{
  	/*display: inline-block;*/
  	float: left;
  	width: 100px;
  	height: 50px;
  	background-color: yellow;
  	border: solid 1px red;

  • display:inline-block을 사용하면 중간중간 공백이생김
    그 공백을 없애기위해서 float로 정렬
  • ul 에 background-color만 넣으면 자식값이 float로 인해서 3차원값이라 height를 못땡겨옴 그래서 overflow:hidden으로 해결
    • 이부분에 관해서 이해안됨,
    • 박용대표님의 답변: 긴글을 숨긴다기보다는 기능을 안에서만 작동하게 한다고 생각해보시면 이해가 가실까요? float속성이 밖에 영향을 못미치게해서 가능하다고 이해하시면 될 것 같아요. 하지만 이런 방법들은 현재로 해결방법이 없을 때 사용하는 일종의 트릭이라 꼭 논리적인 이유가 있지는 않습니다 :)
  • 그렇게되면 ul이 height의 50px과 border값 2px을 가져와서 52px이됨
• li에 추가 css

  text-align: center;
  line-height: 50px;

  • text-align으로 x축 기준 중앙으로 텍스트를 넣음
  • y축은 line-heigt를 사용하는 보통 height랑 동일값을 넣으면 가운데로감, 폰트에 따라 다를수도있는데 이건 눈대중으로
• 만약 height의 값이 없는경우엔 어떻게 하느냐

  padding-top: 15px;
  padding-bottom: 15px;

  • 이렇게 직접 padding을 이용해서 위아래에 공간을 만들어준다.
• 이상태면 박스안에 빈칸에 마우스를 올려도 a태그가 작동을 안하니까 작동을 시킬려면

  .menu li a{
  	display: block;
  	text-align: center;
  	padding-top: 15px;
  	padding-bottom: 15px;}

  • a를 지정해서 display를 block으로 해준다.
  • 이때 나머지 값 text-align,padding은 위에서 지우고 여기에 넣는다.
• 마우스오버시 색변경

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

• ul부분에서 겹치는 border부분 해결해보기

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

  • border를 한번만 쓰지말고 top,bottom,left`를 각각 지정해준다.
  • 마지막칸 오른쪽부분은

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

    • 이렇게 해결한다.

2. 카카오, 네이버

• Git 링크
  로 대체,

3. CSS레이아웃 복습

• https://ko.learnlayout.com/

2.어려웠던부분

• 중간에 나왔던 overflow:hidden부분
• 아직까지 어떤부분에 멀써야하는지 헷갈림

3.해결

• 다른분이 이미 거기에 의문의 가지고 질문을 해서 거기에 있던 답변을 참고함
• 계속 해보면 어떤거에 어떤걸 써야하는지 잘알게되지않을까

4.소감

• 레이아웃 부분이 끝낫는데,, 먼가 쉬우면서도 정렬이나 하는방법이 여러갈래로 나뉘고 그부분에서 어떤걸 써야하고 상황따라 다르고 하니 헷갈리는 부분이 많은거같다.