CSS

David·2025년 2월 21일
0

html/css/js

목록 보기
2/4

1. list-style

	목록 태그(<ul>, <ol>, <li>)의 점 관련 속성 
    
    선택자 <ul> <li> 상관없이 적용 가능

1) list-style-type

	<ul>, <ol>의 모양 disc, circle, square, none, decimal(1부터 시작하는 10진수)

2) list-style-image

	type 대신 이미지로 대체 
    
    ex) list-style-image: url()

3) list-style-position

	목록 들여쓰기 (점의 위치)
    
    outside: 기본값, li영역 외부
    inside: li영역 내부(왼쪽)

4) list-style (한방 단어)

	list-style: type image position

2. 색 관련 CSS

	기본값: 글자는 검정색, 나머지는 투명(transparent)

1) 속성

	* background-color: 배경색
    
    * color: 배경색을 제외한 모든 파트 관련 색(글자색, 테두리색)
    
    * border-color: 테두리색

2) 속성값

	a) 16진수 표기법: #0~f까지의 방식으로 표기 
    
    				* 6자리 - 두 자리씩 끊어서 빨초파 
                    
                              #ff0000 - 빨간색
                              #00ff00 - 초록색
                              #0000ff - 파란색
                              #ffffff - 흰색
                              #000000 - 검은색
					
                    * 3자리 - 한 자리씩 끊어서 빨초파
                    
                    		  #f00 - 빨간색
                              #0f0 - 초록색
                              #00f - 파란색
                              #fff - 흰색
                              #000 - 검은색
                              
    b) rgb: 0~255까지의 색값으로 표기 
    
    		ex) rgb(빨,초,파)
    
    c) rgba: 0~255까지의 색값으로 표기 
    
    		 ex) rgba(빨,초,파,투명도)
             	 투명도: 기본값=1, 0 ~ 1 사이의 실수
                 
    d) 색이름: red, green, blue

3. 여백

1) margin: 요소의 바깥쪽 영역 여백

       margin-top, right, bottom, left 순          

2) padding: 요소의 안쪽 영역 여백

       padding-top, right, bottom, left 순

4. 테두리

1) border-width: 테두리 선 두께, 단위-px

2) border-style: 선 종류

      solid: 실선

      dashed: 절취선

      dotted: 점선

      double: 이중선

      none: 선 없애기

3) border-color: 테두리 색

4) border (한방 단어)

      border: width style color

5) border-radius (테두리 둥글게 깎기)

      단위 : px, % 

5. background

profile
DONE IS BETTER THAN PERFECT.

0개의 댓글

관련 채용 정보