리스트 만드는 태그인 <ul> <li> 를 이용하여 메뉴 만들어보기전 해본 것
전체
<style>
div{
width:200px;
height:200px;
color:white;
/*내용 수평 가운데*/
text-align: center;
/*내용이 한줄인 경우 수직 가운데 : 높이와 동일한 줄 간격*/
line-height: 200px;
/*상자가 아래로 있었는데 오른쪽으로 나열됨-> 마진이 없어졌기 때문?*/
display : inline-block;
}
#red{
background-color: red;
}
#red:hover{
font-size: 2em;
color:palevioletred;
border-bottom: 10px solid orange;
cursor: pointer;
}
#green{
background-color: green;
margin-left: -6px;
}
#blue{
background-color: blue;
margin-left: -6px;
}
/*각 div에 마우스가 호버되면 다른 디자인을 적용 */
</style>
</head>
<body>
<div id ="red">A</div>
<div id="green">B</div>
<div id="blue">C</div>
</body>
div
<body>부분에 각각 A B C 를 <div>로 엮어서 선택자를 각각 색깔로 지정해줬다
div{} 에는 내용을 가운데로 오게 하기 위해 text-align: center; 을 사용했고
inline-block
원래 div정렬이 아래로 나열되어있는데 오른쪽으로 나란히 나열되게 하기 위해
display : inline-block; 를 넣어줬다
귤색 부분이 margin인데
인라인블럭 적용x 일때는 margin(빈공간)이 존재해서 아래로나열되지만
적용o 일때는 margin이 없어서 빈공간을 채우기 위해 아래 있던 div가 위로 올라와 오른쪽으로 나열됐다
떨어져있는 공간 붙이기
아무것도 설정 안했을 경우 왼쪽처럼 div간 간격이 존재해서
margin-left : -? px 로 간격을 줄여주었다
hover
hover는 마우스를 가져다댔을때 변경된 디자인을 적용할 수 있다
폰트사이즈 , 색깔, 아래쪽 라인, 마우스 커서 올렸을때 포인터 모양
혼자 만들어본 상단 메뉴
<style>
li{
display:inline-block;
background-color: mistyrose;
width:120px;
height: 35px;
line-height: 35px;
font-size: 1.3em ;
font-weight: bold;
text-align: center;
border-radius:35px;
}
li:hover{
background-color: darksalmon;
color:whitesmoke;
border-bottom: 3px solid grey;
cursor:pointer;
}
</style>
</head>
<body>
<ul>
<li>인사말</li>
<li>회사소개</li>
<li>사업분야</li>
<li >QnA</li>
<li>자유게시판</li>
</ul>
</body>
<ul> <li> 를 이용해 만든 상단메뉴
display : inline-block - 아래정렬 오른쪽으로 정렬하기
높이와 너비 설정하고 height 와 line-height 는 똑같이 지정해줘야 가운데정렬!
border-radius - 테두리 동그랗게
hover에는 마우스 커서 올렸을때 변경될 디자인을 적용했다
완성 !!
각 메뉴에 <a>적용해서 자기소개서 만들때 활용해도 되겠다!