CSS list와 display

다람·2022년 6월 25일
0

CSS

목록 보기
5/8

list

  • 메뉴 바 만들 때 참고하면 좋다.
  • div로 메뉴를 만들 때는 가독성이 떨어지는 단점이 있다.
  • ul같은 경우는 태그를 많이 써야 한다. a태그를 사용해야 하기 때문이다.
  • a 태그만을 사용한다면 선택자를 잘 활용해야 한다.

--> 세로 같은 경우는 박스모델을 활용하는 것도 좋으며 규칙적으로 만들어낼 수 있다.

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>

display

-block, inline, inline-block 속성이 있다.
--> visibility : 요소의 모습을 보이게 할 것인가 말것인가 요소의 랜더링 여부 결정
--> visible : 요소의 랜더링 (해당 요소를 보이게 하는 속성 / 기본값)
--> hidde : 해당 요소를 보이지 않게 한다.
--> collapse : 행이나 열을 보이지 않게 하는 속성 (테이블 전용 속성)

요소를 숨길 수 있는 방법

  1. visibility : hidden
  2. display: none
  3. opacity

visibility vs display (요소를 숨길 때 기준)

  • display는 해당 요소의 공간까지 모두 사라지지만 visivility는 해당 요소의 공간은 남는다.
  • opacity의 요소는 투명도를 조절하는 속성
    --> 설정값은 0~1까지 (단위는 소수점 1자리)
 <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 이 더 유용한 것 같다.

profile
안녕

0개의 댓글