CSS
1. 목록의 종류 ul > li 순서없는 목록 o 목록1 o 목록2 ol > li 순서 있는 목록 1. 목록1 2, 목록2 dl > dt / dd 들여쓰기를 사용하는 목록 목록1 목록1이란~ 목록2 목록2란~ 2. 목록 관련 스타일 스타일 이름 내용 표현자 종류 표현법 결과 list-style-type 불릿기호 변경 스타일 1) 순서 없는 목록(ul) list-style-type : disc 꽉 찬 원 모양 list-style-type : circle 빈 원 모양 list-style-type : square 사각 모양 none 없음 2) 순서 있는 목록(ol) list-style-type : decimal 1/2/3.... list-style-type : decimal-lending-zero 01/02/..
1. 목록의 종류 ul > li 순서없는 목록 o 목록1 o 목록2 ol > li 순서 있는 목록 1. 목록1 2, 목록2 dl > dt / dd 들여쓰기를 사용하는 목록 목록1 목록1이란~ 목록2 목록2란~ 2. 목록 관련 스타일 스타일 이름 내용 표현자 종류 표현법 결과 list-style-type 불릿기호 변경 스타일 1) 순서 없는 목록(ul) list-style-type : disc 꽉 찬 원 모양 list-style-type : circle 빈 원 모양 list-style-type : square 사각 모양 none 없음 2) 순서 있는 목록(ol) list-style-type : decimal 1/2/3.... list-style-type : decimal-lending-zero 01/02/..
color 텍스트의 색상을 지정 색상명/16진수/ rgb(x,x,x)/ rgba(x,x,x,x)/ hsl(x,x,x)/ hsla(x,x,x,x) text- decoration 텍스트에 줄을 긋거나 없앨 때 사용 none underline 텍스트 영역 아래에 줄 긋기 overline 텍스트 영역 위에 줄 긋기 line-through 텍스트 영역 중간에 줄 긋기 text-transform 영문 텍스트의 대소문자를 변환 시 사용 uppercase 전부 대문자 lowercase 전부 소문자 capitalize 영문자의 첫글자만 대문자 text-align 텍스트를 정렬할 때 사용 left 왼쪽정렬 justify 양쪽정렬 right 오른쪽 정렬 center 가운데정렬 text-shadow 텍스트에 그림자 효과를 줄..
1. font-family 글꼴을 지정할 때 사용 글꼴명; 2. font-size 글꼴의 크기를 변경할 때 사용 px 픽셀 고정 단위로 설정 em 배수. 기본 크기의 몇 배일지 % 기본 크기의 몇 %로 증가시킬지 3. font-weight 글꼴의 굵기를 표현할 때 사용 normal 원래 굵기 bold 굵은 굵기로 변경 bolder 더 굵은 굵기로 변경 lighter 가는 굵기로 변경 4. font-variant 텍스트문구를 작은 대문자로 변경할 때 사용 small-caps 5. font-style 텍스트문구를 기울이고자 할 때 사용 normal 기본 italic 기울임 글꼴 oblique 원래의 글자를 기울인 글꼴
1. 표현법 결과값에 대한 조건 비교할 범위 대상 선택자[속성=속성값] { } 일치 선택자[속성~=속성값] { } 포함 단어 기준 선택자[속성|=속성값] { } 시작 -로 구분된 단어기준 선택자[속성^=속성값] { } 시작 일반문자열기준 선택자[속성$=속성값] { } 끝 일반문자열기준 선택자[속성*=속성값] { } 포함 일반문자열기준 2. 자손 후손 바로 하위인 요소들 (시작태그와 종료태그 사이에 있는 것) 하위 요소들 전부 (자식 포함) ">" 로 구분 띄어쓰기로 구분 a>b { 스타일속성명 : 값; 스타일속성명 : 값; ... } a b { 스타일속성명 : 값; 스타일속성명 : 값; ... } ** div 태그 안에 div 태그 안에 ul 태그 안에 li 태그 안에 span 태그를 찾는다고 한다면, ..
기본적으로 알야되야 할 요소 태그 안에서 기능, 혹은 .css 파일에 작성 후 태그를 통해 참조를 해와야 한다. css는 선택자, 선언, 속성 이렇게 세 가지로 이루어져 있다. 선택자 종류 h1 / div /p 등 전체 태그{ } #id값{ } .class값{ } Color 글자의 색상을 의미한다. #text1 { color: red; } #text2 { color: #0A0; } #text3 { color: rgb(0, 0, 150); } #text4 { color: rgba(30, 150, 100, 0.5); } Font 페이지에서 사용할 폰트의 종류를 외부에서 받아올 수 있다. 부분마다 폰트를 사용할 수 있고 body 전체에 걸쳐서 특정 폰트를 사용하게 설정할 수 있다. 구글 폰트 페이지에서 imp..
