body {margin:0; padding:0;}
ul.a {list-style:inside url("../../img/sqpurple.gif"); margin:0 50px;}
ul.b {list-style-position: inside;} /*marker가 존재해야만 사용가능*/
/* ul.b {list-style-type: none; padding:0;} */
ul.c {list-style-type: none; margin: 0; list-style-position: inside;}
/* list-style-type:마커 모양(ul, ol) 변경 속성.
list-style-position : 마커 들여쓰기 속성. 기본값(디폴트):outside
**inside속성은 list-style-type: none; 일때는 적용되지 않는다.
list-style-image:마커 스타일을 이미지로 사용할 수 있는 속성.
list-style :shorthand표현. 마커모양 들여쓰기 속성 이미지 사용 속성 값 같이 사용 가능
*/
<!DOCTYPE html>
<html>
<head>
<title>css list속성 및 외부 스타일시트 참조</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/a_list.css"> -->
<!-- -rel : 문서와의 관계를 명시하는 속성
-type : 링크된 문서의 MIME타입을 정의하는 속성(type생략가능)
**MIME(Multipurpose Internet Mail Extensions : 다목적의 인터넷 메일 확장자)
: 웹을 통해 여러 형태의 파일을 전달하는데 사용하는 속성.
이메일과 함께 동봉할 파일을 텍스트 문자로 전환해서
이메일 시스템을 통해 전달하기 위해 개발되어
Internet Mail Extenstions라 불리기 시작함. -->
<!-- @import 시스템코드는 일부 브라우저에서 적용이 안 될 수 있다. -->
<style>
@import url("../css/a_list.css");
</style>
</head>
<body>
<h2>list-style property</h2>
<ul>
<li>Coffee</li><li>Tea</li><li>Coca Cola</li>
</ul>
<ul class="a">
<li>Coffee</li><li>Tea</li><li>Coca Cola</li>
</ul>
<ul class="b">
<li>Apple</li><li>Lemon</li><li>Orange</li>
</ul>
<ul class="c">
<li>Red</li><li>Green</li><li>Blue</li>
</ul>
<br><br><br><br>
</body>
</html>
aa
/* b_display01.html관련 css */
div {
border: 1px solid #000000;
border-radius: 5px;
/* padding: 10px; */
}
h1 {
margin-top: 0;
}
a{
text-decoration:none;
font-weight:bolder;
color:white;
padding-right:50px;
}
#ust {
list-style-type : none;
background-color: black;
border-radius: 0 0 3px 3px;
margin : 0;
padding : 10px;
}
#ust {
padding : 0;
}
/* inline width 100% */
/* #ust>li {display: inline;
width : 400px;
height: 100px;} */
/* li {display: inline-block; width:400px; height:100px;} */
/* li {display: inline-block; margin:50px;} */
span.spst{display: block; background-color: red; padding:50px; margin:10px;}
/* span.spst{dispaly: block; background-color: red; margin:100px;} */
/* b_display02.html관련 css */
#imgNone>img, #imgHidden>img {width:200px; height:100px;}
div#imgNone:hover img {display:none;}
div#imgHidden:hover img {visibility : visible;}
#imgHidden img {visibility : hidden;}
span#ibspan {display: inline-block; width: 200px; height: 200px; background-color: red; margin:10px;}
/* .ibspan{display:inline-block; width: 200px; height: 200px; background-color: red; margin: 10px;} */
/* 참고:
display: block;
요소를 블럭 레벨 요소로 변경해주는 속성.
블럭 속성을 적용할 수 있도록 해준다.
display: inline;
요소를 인라인 레벨 요소로 변경해주는 속성.
인라인 속성을 적용할 수 있또록 해준다.
display: inside-block;
인라인 요소 : 인라인 속성을 유지하면서 블럭 속성의 일부 속성을 사용할 수 있도록 해준다.
블럭 요소 : 블럭 레벨 속성을 유지하면서 인라인의 일부 속성을 사용할 수 있도록 해준다. */
<!DOCTYPE html>
<html>
<head>
<title>css display</title>
<link rel="stylesheet" href="../css/b_display01.css">
<!-- <style>
@import url("../css/b_display01.css");
</style> -->
</head>
<body>
<div>
<h1>display: inline | inline-block ; 속성</h1>
<d1>
<dt>display : inline-block;</dt>
<!-- dd왼쪽에 margin 존재 -->
<dd>요소의 폭과 높이를 설정할 수 있다.</dd>
<dd>
상단 및 하단 margin/padding이 적용되지만 display:inline; 속성은 그렇지
않다.
</dd>
<dd>
요소 뒤에 줄 바꿈을 추가하지 않기 때문에 다른 요소 옆에 올 수 있다.
</dd>
</d1>
<ul id="ust">
<li><a href="https://www.naver.com" target="_blank">네이버</a></li>
<li><a href="https://www.daum.net" target="_blank">다음</a></li>
<li><a href="https://www.google.com" target="_blank">구글</a></li>
</ul>
</div>
<br><br>
<div>
<h1>display: block; 속성</h1>
<span class="spst">인라인 요소인 span엘리먼트를 블럭요소를 만든다.</span>
<span class="spst">인라인 요소인 span엘리먼트를 블럭요소를 만든다.</span>
<br>
<span class="spst">
인라인 요소인 span엘리먼트를 블럭요소를 만든다.
인라인 요소인 span엘리먼트를 블럭요소를 만든다.
인라인 요소인 span엘리먼트를 블럭요소를 만든다.
인라인 요소인 span엘리먼트를 블럭요소를 만든다.
인라인 요소인 span엘리먼트를 블럭요소를 만든다.
인라인 요소인 span엘리먼트를 블럭요소를 만든다.
인라인 요소인 span엘리먼트를 블럭요소를 만든다.
</span>
</div>
</body>
</html>
