남이 만든 CSS 수정하기

이용약관과 같은 간단한 css를 수정하는 작업을 하였다.

 

이럴땐 먼저 class 를 체크해 본다. 이전에 작업해 놓은 사람이 정의해둔 class로 인하여 html 문법이 적용되지 않을 수 있다.

 

<li> 태그를 사용하면 앞에 검은색 점이 나와야 하는데 설정값에 아래 블로그에서 출저를 가져온 목록 중 disc가 disabled로 나오지 않았다.

 

목록(list) 관련 스타일 속성(Property)

 

list-style-type

: 목록의 머리 기호를 정한다.

• none : 지정하지 않음
• disc : 검은 원형
• lower-roman : 소문자 로마자
• decimal : 1부터 시작하는 10진수
• upper-alpha : 대문자 알파벳
• circle : 원형
• square : 사각형
• lower-alpha : 소문자 알파벳
• upper-roman : 대문자 로마자

 

예)

css 

.circle {list-style-type: circle}                                                                      .disc {list-style-type: disc}                                                                          .square {list-style-type: square}                                                                      .decimal {list-style-type: decimal}                                                                    .lower-roman {list-style-type: lower-roman}                                                            .upper-roman {list-style-type: upper-roman}                                                            .lower-alpha {list-style-type: lower-alpha}                                                            .upper-alpha {list-style-type: upper-alpha}                                                            .none {list-style-type: none}   Colored by Color Scripter

cs

 

html

<ul>                                                                                                       <li class="circle">circle</li>                                                                         <li class="disc">disc</li>                                                                             <li class="square">square</li>                                                                         <li class="decimal">decimal</li>                                                                       <li class="lower-roman">lower-roman</li>                                                               <li class="upper-roman">upper-roman</li>                                                               <li class="lower-alpha">lower-alpha</li>                                                               <li class="upper-alpha">upper-alpha</li>                                                               <li class="none">none</li>                                                    </ul>  Colored by Color Scripter

cs

• circle
• disc
• square
• decimal
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• none
•  

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=muri1004&logNo=221025461768 

[CSS] 목록 스타일 (list style)

이러한 스타일들을 보고 만약 필요한게 disabled 되어 있다면 새로운 클래스를 만들어서 이름을 달아준다. 

나는 dot 클래스를 새로 달고 disabled 하지 않는 명령어를 두었다. 이렇게 되면 우선순위 처리에 의하여 내가 달아둔 name의 css 클래스가 먼저 적용되게 된다.

 

또한 <p>를 쓰면 단락구분

<ol> 를 쓰고 <li>를쓰면 1,2,3,4,... 순서대로 리스트가 나오게 되고,

<ul>을 쓰고 <li>를 쓰면 정렬되지 않은 상태로 리스트가 나오게 된다.

 

list style을 여기에 넣어주게 되면 로마 문자, 영어 대소문자, 숫자 등으로 바꿀 수도 있어서 이를 이용하여 css를 수정하였다.