--> 세로 같은 경우는 박스모델을 활용하는 것도 좋으며 규칙적으로 만들어낼 수 있다.
list-style 속성
마커 : 리스트 앞에 붙는 문양, 숫자, 기호
1. list-style-type
- 리스트 앞에 위치하는 숫자나 기호 등을 적용할 때 사용한다.
2. list-style-image
- 자신만의 이미지를 사용하고 싶을 때 쓰는 속성
3. list-style-position
- 리스트 요소의 위치설정
(기본값 : outside / inside)
4. list-style shorthand
단점 : 가독성이 조금 떨어진다.
- tpye | position | image
<style>
#type1{
list-style-type: square;
list-style-type: upper-roman;
list-style-image: url("img/img4.jpg");
}
#type2{
list-style-type: upper-roman;
list-style-type: square;
list-style-position : inside;
}
ul{
background-color: blueviolet;
padding: 15px;
}
li{
background-color: springgreen;
margin: 15px;
display: inline;
list-style-type: none;
}
</style>
<ul id="type1">
<li>테스트를 해봅시다1</li>
<li>테스트를 해봅시다2</li>
<li>테스트를 해봅시다3</li>
<li>테스트를 해봅시다4</li>
</ul>
<ol id="type2">
<li>테스트를 해봅시다1</li>
<li>테스트를 해봅시다2</li>
<li>테스트를 해봅시다3</li>
<li>테스트를 해봅시다4</li>
</ol>
-block, inline, inline-block 속성이 있다.
--> visibility : 요소의 모습을 보이게 할 것인가 말것인가 요소의 랜더링 여부 결정
--> visible : 요소의 랜더링 (해당 요소를 보이게 하는 속성 / 기본값)
--> hidde : 해당 요소를 보이지 않게 한다.
--> collapse : 행이나 열을 보이지 않게 하는 속성 (테이블 전용 속성)
<style>
#h11{
background-color: red;
color: white;
/* visibility: hidden; */
/* display: none; */
/* 스프링에서도 자주 사용하는 것 visibility:hidde,
display:none 차이 알아두기 */
}
#opa{
opacity: 1;
background-color: blue;
transition: opacity 2s;
}
#opa:hover{
opacity: 0;
}
</style>
<h1 id="h11">안녕하세요!</h1>
<h1 id="opa">코딩 공부는 열심히 해야 해요ㅠㅠ</h1>
<h1>요소 공간 테스트</h1>
-->실제 적용해보면 display: none의 경우 #h11 공간이 사라지고
visibility: hidden 의 경우 #h11의 공간은 남고 글자와 색만 사라진다.
#opa에 마우스를 가져다대면 색이 점점 연해지면서 사라진다.
-->메뉴 바를 만들고 hover 설정을 할 경우 display: none 이 더 유용한 것 같다.