<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul#menu{
--ul태그의 menu 아이디를 찾아가서 그 태그에 대한 속성값을 지정한 것
padding : 5; /* 안쪽여백 */
}
ul#menu li{
--ul태그의 menu 아이디를 찾고 태그 안에 있는 li 태그의 속성값을 지정해준 것
display: inline;
--기본값으로,요소를 inline 요소처럼 표시 , 앞뒤로 줄바꿈이 안된다.
display : 이 속성은 어떻게 표시할지 나타냄
visibility : 이 속성은 요소를 보일지 말지 결정
inline : 한 줄 요소 특정문자열을 선택 할 때 사용, 줄바꿈 x
block : 좀 더 넓은 범위를 지정(박스형태로 지정), 이 속성을 사용하면 가로로 100% 차지하기 떄문에 줄바꿈 o
none: 박스가 생성 x 공간 차지 x
inline-block : 블록을 한 줄로 나열 할때
사용 형태
display : inline
display : block
display : none
display : inline-block
}
ul#menu li a{
--<a herf > </a> URL 을 가져올 때 사용하는 태그
--<a>태그 에 css 속성값을 주는 것
background-color: #000000;
--배경색 #000000
color: white;
--font 색
padding: 10px 20px;
--안쪽 여백
text-decoration: none;
--font 꾸미기 x
border-radius: 4px 4px 0 0;
--border-radius속성은 요소의 모서리 반경을 정의합니다.
4 가지 값 - 경계선 반경 : 15px 50px 30px 5px; 첫 번째 값은 왼쪽 위 모서리에 적용되고 두 번째 값은 오른쪽 상단 모서리에 적용되고 세 번째 값은 오른쪽 하단 모서리에 적용되고 네 번째 값은 왼쪽 하단 모서리에 적용됩니다.
3 가지 값 - 경계선 반경 : 15px 50px 30px; 첫 번째 값은 왼쪽 위 모서리에 적용되고 두 번째 값은 오른쪽 상단 및 왼쪽 하단 모서리에 적용되고 세 번째 값은 오른쪽 하단 모서리에 적용됩니다.
1 가지 값 - 경계선 반경 : 15px; (이 값은 네 모퉁이에 동일하게 반올림 됨)
px수가 클수록 더 둥근 면적이 늘어난다
}
ul#menu li a:hover { /* 링크걸렸을 때 마우스 올리면 색 바꾸는 것 */
background-color: red;
}
</style>
</head>
<body>
<ul id ="menu">
<li><a href = "http://www.naver.com">Naver</a></li>
<li><a href = "http://www.google.com">Google</a></li>
<li><a href = "http://www.daum.net">Daum</a></li>
</ul>
</body>
</html>
'HTML,CSS' 카테고리의 다른 글
| HTML(11)+CSS (0) | 2018.07.29 |
|---|---|
| HTML(10)+CSS 파일 불러오기 (0) | 2018.07.29 |
| HTML(8) + CSS ul,li,ol,dl,dt,dd (0) | 2018.07.28 |
| HTML(7)+CSS ,전체에 style주기 (0) | 2018.07.28 |
| HTML(6) table, caption,tr,td,th,colspan,rowspan (0) | 2018.07.28 |