<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 리스트 관련속성</title>
<link rel="stylesheet" href="../css/normalize.css">
<style> /*list-style을 none으로 설정하면 글머리 기호 제거*/
#list1 {list-style-type: none; padding: 0}
#list1 li {display: inline-block}
/* bullet 이미지를 사용한 목록*/
/* list-style-image 속성을 사용하면 글머리 기호 대신 이미지를 목록 기호로 사용가능*/
/* list-style-position 속성을 사용하면 글머리 이미지의 위치를 지정할 수 있음*/
#list2 {list-style-image:url('../img/grape.png');
list-style-position: inside }
#list2 li {border:1px solid red; padding: 5px}
/*list-style 속성으로 단축표기 사용*/
#list3 {list-style: none}
#list3 li {list-style: inside url('../img/game.png'); padding: 5px}
</style>
</head>
<body>
<h1>CSS 리스트 관련 속성</h1>
<h2>개요 </h2>
<p>순서 있는(없는) 목록을 스타일링할 때 글머리 기호를 제거하거나 글머리 기호를 이미지로
대체할 수 있음</p>
<ul id="list1">
<li>디아블로</li>
<li>스타크래프트</li>
<li>월드오브워크래프트</li>
</ul>
<ul id="list2">
<li>디아블로</li>
<li>스타크래프트</li>
<li>월드오브워크래프트</li>
</ul>
<h2>단축표기</h2>
<p>list-style 속성의 단축 표기는
'글머리기호 - 기호위치 - 기호이미지' 순으로 작성함</p>
<ul id="list3">
<li>디아블로</li>
<li>스타크래프트</li>
<li>월드오브워크래프트</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 포지션 관련 속성</title>
<link rel="stylesheet" href="../css/normalize.css">
<style>
/*box1, box2, box3는 static position으로 요소 배치*/
/*static은 사용자가 위치 지정 못함, 브라우저가 임의로 배치*/
#box1 {width: 150px; height: 150px;
background: yellow}
#box2 {width: 200px; height: 200px;
background: red}
/*박스 3은 박스 2의 너비 내에 배치됨*/
#box3 {background: greenyellow;
border: 1px solid black;
line-height: 150px}
/*absolute 배치*/
#box4 {width: 250px; height: 250px;
background: cyan; position: absolute;
top:50px; left: 50px; opacity: 0.4 }
#box5 {width: 250px; height: 250px;
background: violet; position: absolute;
bottom:50px; right: 50px; opacity: 0.4 }
#box6 {width: 300px; height: 300px;
border: 1px dashed black;
position: relative} /*박스 7을 자기 안에 위치시킴 - box6이 relative 선언*/
#box7 {width: 150px; height: 150px;
background: gold; top:50px; left:50px;
position: absolute}
/*특정요소가 있던 자리를 기준으로 요소배치*/
#box8 {width: 150px; height: 150px;
background: darkred; } /*static 요소*/
#box9 {width: 150px; height: 150px;
background: olive; position: relative;
top:50px; left: 50px; opacity: 0.5}
/*부모요소 위치 변경되면 자식위치도 따라서 이동*/
#box10 {width: 150px; height: 150px;
background: khaki; margin:100px}
#box11 {width: 150px; height: 150px;
background: skyblue; position: relative;
top:50px; left: 50px;}
/**/
#cart {width: 100px; height: 200px;
background: darkviolet; top:100px; right: 50px;
position: fixed }
/* box15 를 맨뒤로, box13를 맨 앞으로 배치 */
#box12 {width: 500px; height: 500px;
border: 1px dashed black; position: relative}
#box13 {width: 200px; height: 200px;
background: mediumpurple; position: absolute;
top:50px; left:50px; z-index: 3}
#box14 {width: 200px; height: 200px;
background: orange; position: absolute;
top:100px; left:100px; z-index: 5}
#box15 {width: 200px; height: 200px;
background: skyblue; position: absolute;
top:150px; left:150px; z-index: 1}
/*overflow*/
#overflow p {width:100px; height: 150px;
display: inline-block;
border: 3px dashed yellowgreen}
#overflow p:first-child {overflow:hidden}
#overflow p:nth-child(2) {overflow:scroll}
#overflow p:nth-child(3) {overflow:auto}
</style>
</head>
<body>
<h1>CSS 포지션 관련 속성</h1>
<h2>개요</h2>
<p>지금까지는 margin / padding 또는 인라인 / 블록요소의 특성에 의해
부분적으로나마 위치를 지정할 수 있었음</p>
<p>position이라는 속성 이용하면 HTML 요소들의 위치를 좌표등으로 결정</p>
<p>즉, top, left, bottom, right 속성등과 함께 요소의 위치를 정할 수 있음</p>
<h2>static position</h2>
<p>기본적인 요소의 배치순서에 따라 위->아래, 왼->오 로 배치되며,
부모-자식 관계의 요소는 부모요소에 따라 배치됨 </p>
<div id="box1">111</div>
<div id="box2">111
<div id="box3">box#3</div>
</div>
<h2>absolute position</h2>
<p>조상요소(body) 또는 부모요소를 기준으로 top/left/bottom/right 만큼 요소를 이동시켜 배치 </p>
<p>단, 부모요소를 기준으로 요소를 배치하려면 부모요소의 position은 relative여야 함</p>
<div id="box4">box4</div>
<div id="box5">box5</div>
<div id="box6"><div id="box7">box7</div></div>
<h2>relative position</h2>
<p>(static으로 선언된) 요소가 있는 위치를 기준으로
top/left/bottom/right만큼 요소를 이동시켜 배치 </p>
<div id="box8">box8</div>
<div id="box9">box9</div>
<div id="box10">box10
<div id="box11">box11</div></div>
<h2>fixed position</h2>
<p>브라우저의 뷰포트(가시영역)를 기준으로
top/left/bottom/right만큼 요소를 이동시켜 배치 </p>
<p>따라서, 브라우저를 스크롤하더라도 언제나 그 위치에 요소가 배치됨</p>
<div id="cart">cart</div>
<h2>z-index</h2>
<p>요소들을 배치하다보면 위치나 배치방식에 따라 서로 겹칠 수 있음</p>
<p>즉, 먼저 만들어진 요소는 나중에 만들어진 요소보다 뒤에 배치됨</p>
<p>요소들이 쌓이는 순서를 지정하고 싶다면 z-index 속성을 사용함</p>
<p>z-index 속성값이 클수록 앞(위)쪽에 위치함</p>
<div id="box12">
<div id="box13">1</div>
<div id="box14">2</div>
<div id="box15">3</div>
</div>
<h2>overflow</h2>
<p>자식요소가 부모요소를 벗어났을때의 처리방법을 정의</p>
<div id="overflow">
<p>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</p>
<p>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</p>
<p>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</p>
<p>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</p>
</div>
</body>
</html>