다룽이네 다락방

CSS background-image background-image는 배경에 이미지를 설정해 주는 요소 문법 background-image: url("주소"); CSS background-position background-posotion은 배경 이미지의 위치 설정해 주는 요소 기본값: 0% 0% 문법 background-position: x-position y-position | initial | inherit - x-position y-position : 가로 위치(x) 세로 위치(y) 설정 (가로 위치 값: left, center, right, 백분율, 길이 세로 위치 값 : top, center, bottom, 백분율, 길이) - initial : 기본값으로 설정 - inherit : 부모 요소의..

CSS 텍스트 들여쓰기 text-indent는 문단의 첫문단을 들여쓰는 기능이다. CSS 텍스트 선 꾸미기 text-decoration은 문단의 첫문단을 들여쓰는 기능이다. 기본값: none (선 없음) 문법: text-decoration: none | line-through | overline | underline | initial | inherit none : 선 없음 line-through : 글자 중간에 선 overline : 글자 위에 선 underline : 글자 아래에 선 initial : 기본값으로 설정 inherit : 부모 요소의 속성값 상속 사용법: 속성값 여러개 사용 할 수 있다. text-decoration: line-through underline;

CSS 자간 설정 / CSS 글자 간격 설정 text-spacing은 자간을 설정하는 요소이다 ex) 자간 10px letter-spacing: 10px;

CSS 글자 크기 설정 font-size는 글자 크기를 설정하는 요소이다. ex) 글자크기 30px font-size: 30px;

CSS 텍스트 대소문자 설정 text-transform은 텍스트의 대소문자를 설정하는 요소이다. ex) /* 앞글자 대문자로 바꾸기*/ text-transform: capitalize; /* 전부 대문자로 바꾸기*/ text-transform: uppercase; /* 전부 소문자로 바꾸기*/ text-transform: lowercase;

CSS 텍스트 정렬 text-align은 텍스트의 정렬을 설정하는 요소이다. ex) /* 가운데 정렬*/ text-align: center; /* 왼쪽으로 정렬 */ text-align: left; /* 오른쪽으로 정렬*/ text-align: right

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 우선순위를 알아보자 기본적으로 css속성은 위에서부터 아래로 적용 (=밑에 있는게 우선순위가 더 높다) 같은 태그에 여러개의 css속성이 설정된 경우에는 우선순위에 따라 스타일이 적용 !important > 인라인스타일 > 아이디선택자 > 클래스선택자 > 태그선택자 - 위에서 아래로 내려가며 중복된 속성이 있는 경우 !important > 인라인스타일 > 아이디선택자 > 클래스선택자 > 태그선택자 의 우선순위를 가지고 적용된다. (중복값 없으면 당연히 그대로 유지됨) !important / 인라인스타일 별로 사용할일 없긴함

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 그룹 선택자 -여러 요소를 선택해서 각각 같은 요소를 적용 (=여러 태그들 묶어서 같은 스타일 적용하자) ex) 안녕하세요 HI HELLO BYE /* 그룹 선택자 */ p,pre,strong{ color: lime; } 해석 html에 각기 다른 요소들이 있음 그 중 p, pre, strong을 한번에 묶어서 선택하여 글자색 lime을 적용

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 하위 선택자 -특정 요소 하위의 요소를 선택 하위에 있는 모든 요소가 선택된다는 점에서 자식 선택자와 구별된다 (자식선택자는 부모 바로 밑에 있을때만 선택 됨) ex) HI HELLO 안녕 /* 하위 선택자 */ div span{ background-color: yellow; } 해석 div요소 하위에 있는 모든 span태그에 배경 yellow적용 -> 'HELLO'와 '안녕'까지 전부 선택됨

css에서 가장 기본이 되고 중요한 selector(선택자) 선택자의 종류와 선택자로 어떻게 태그 선택할지 알아보자 종속 선택자 -타입 선택자와 id선택자(#) class선택자(.)가 혼합된 형태 ex) /* 종속 선택자 */ 1. li.acls01{ background-color: green; } 2. li.acls02#sidli{ font-size: 40px; } 해석 1. 태그의 종속클래스인 acls01을 선택하여 배경 green 적용 2. 태그의 종속클래스인 acls02의 id값 sidli를 선택하여 폰트 크기 40px 적용