210706

JunYeupKwon·2021년 7월 6일

개발일지 대구AI스쿨

대구ai스쿨

목록 보기

8/48

강의

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;}
```
  - 이렇게 해결한다.