티스토리 뷰
교재 67p
앵커 태그 <a></a>
레이아웃을 바꾸지 않고 개별적으로 태그를 주는 것이 가능.
가장 대표적인 인라인 요소.
+)
<div>
<h1> - <h6>
<p>
대표 블록 태그
+)
<span>
<a>
<img>
대표 인라인 태그
------------------------------------------------------------------------------
b1201
앵커 태그 <a></a>
효과를 주는 것이 아니며 다른 곳으로 옮기는 것
<a href="">
<a href="#"> 값은 있는데 갈 곳 없는 것 #: 부재, *: 다른 것
웹표준에 따라 href 속성값을 입력해야 함. 웹표준을 지키면서 이동하지 않는 태그 만들 때 href="#" 값을 준다.
<a href="www.naver.com"></a>
<a href="test.html"></a>
test.html, sub1.html -> 상대 경로값
h: hyper text
../ 상위폴더 이동
<link rel="stylesheet" href="../css/main.css">
../ b01, b02
앵커태그는 넣어도 구조가 깨지지 않음
--------------------------------------------------------------------------------------
b03
모더나이저, 노멀라이즈 다운
index.html
style.css
script.js
내비게이션!
meta charset은 head 전에 써도 됨
href를 쓰는 것: 앵커태그, 링크태그
<a href=""></a>
<link href="">
멀티 커서 기능
클릭 후 컨트롤키 클릭
<!-- ul(unorder list)-->
단독사용 불가
반드시 자식!이 있어야 함.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- ol(orderlist)-->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!-- dl(definition list)-->
내비게이션 만들 때 사용
*자바스크립트로 css 변경 가능
html에 적은 메뉴 스타일과 css에 적은 스타일이 달라도 css에 적은 것 우선 적용
<ul tyle="square"> 웹 표준 아니야!!!!!!!!!!
css가서 적용해!!!
css에서 제대로 안 치면 ex) 마지막을 ;아니라 :친 경우
기본값(투명원) 나옴
--------------------------------------------------------------------------------------
html
<!DOCTYPE html>
<html lang="ko">
<meta charset="utf-8">
<head>
<title>목록</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- ul(unorder list)
"css"
list-style: disc / circle / square
-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- ol(orderlist)
"css"
list style: 1 / A / a / I / i
-->
<ol>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ol>
<!-- dl(definition list)-->
</body>
</html>
--------------------------------------------------------------------------------------
<css>
@charset "utf-8";
ul {
list-style: square;
}
ol {
list-style-type: decimal-leading-zero;
}
ctrl+스페이스바 치면 예시 나옴
ol {
list-style-type: disc;
background-color: lime;
}
disc 쓰면 검은 원 나옴
--------------------------------------------------------------------------------------
<java>
$(function(){
$('ul').css({
'list-style':'circle'
});
});