프론트엔드/CSS6 16. CSS / 속성 - 배경 background ( 요소의 배경을 설정 단축속성 ) background-color 값으로 색상(rgb, 색상, #xxxxxx )을 입력하고 투명색인 transparent 도 사용이 가능하다. background-image 기본값은 none(이미지 없음)이 있고 이미지를 넣으여면 url("경로")를 넣어준다. 주의사항 -> 이미지를 다수 추가할 경우 나중에 삽입한 이미지가 뒤에 쌓인다(순서가 반대) ( 첫 요소의 이미지가 맨위 에서 보임). -> 백그라운드이미지의 반복여부는 기본값으로 반복으로 되어있다.해제 -> background-repeat : no-repeat; background-repeat background-position background-attachment 2021. 2. 18. 15. CSS / 속성 - 띄움(정렬), 위치 float ( 요소를 좌우 방량으로 띄우는 속성 (수평정렬)) - none, left, right 3개의 값이 있다. float : right; float을 설정하였으면 해제가 필요하다. float은 자리를 차지하고 있지 않다.(clear: both) left right 둘다 해제 하는 기능 필수!! 1. 해제하려면 다음 요소에 clear 함수를 사용해야됨 (다음요소가 필요) 그래서 번거럽다. 2. 부모요소에 overflow 따로 구역을 만들어 구역을 나눈다. 3. 가상요소 ::after -> 끝나는 부분에 가상요소를 추가하는 기능 float - display 수정 ( float 속성이 추가된 요소는 display 속성의 값이 대부분 block으로 수정된다.) position ( 요소의 위치 지정 방법의.. 2021. 2. 18. 14. CSS / 속성 - 글꼴, 문자 CSS 속성 (글꼴, 문자) font ( 글자 관련 속성들을 지정 ) - 개별 속성 -단축 속성 ( font : 기울기 두께 크기 / 줄높이 글꼴; ) 크기와 글꼴은 필수로 입력해야된다. font-style ( 기본값 normal ) font-weight ( 글자의 두깨를 지정 ) font-size ( 글자의 크기를 지정 ) 기본적으로 - px,em,cm 사용 하며 기본값으로 16px로 지정이되어 있다. - % ( 부모 (상위) 요소의 비율로 지정 ) line-height ( 줄 높이를 지정 ) font-family ( 글꼴 지정 ) 색상표현법 color 속성 ( 문자의 색상을 지정 ) 기본값 rgv(0, 0, 0) text-align ( 문자 정렬 방식을 지정 ) text-decoration ( 문자의.. 2021. 2. 16. 13. CSS / 속성 - 박스 모델 CSS 의 속성 width - 요소의 가로 너비를 지정 속성값 값 auto, px, em, cm 기본값으로 auto 블럭요소는 (width)가로 100% (height)세로 0 으로 초기값이 되어있다. 인라인요소는 (width)가로크기 (height)세로크기가 0 에서 출발한다. 하지만 이 크기의 값을 설정을 해도 적용이 안되는데 그 이유는 인라인 요소는 text만을 위한 요소이기때문에 text가 없으면 크기를 가지지 않는다. max-width ( 요소의 최대 가로 너비를 지정 ) min-width ( 요소의 최소 가로 너비를 지정 ) max-height ( 요소의 최대 세로 너비를 지정 ) min-height ( 요소의 최소 세로 너비를 지정 ) margin - 요소의 '외부 여백'을 지정 (단축,개별.. 2021. 2. 16. 12 . CSS / 단위 01. px , % % ( 부모요소의 영향을 받는다) 02. em, rem em ( 자기 자신의 폰트사이즈에 영향을 받는다.) em = 중간 중간 계속 단위가 상속이 되다 보니 중간에 따로 건드리기가 어려움 -> rem rem = html(root)에 지정된 폰트사이즈 만 받음( 루트에 폰트사이즈만으로만 설정하겠다는 의미 상송안받음) 03. vw, vh vw ( 뷰포트의 가로사이즈, 100단위 ) 뷰포트 : 화면전체 vh ( 뷰포트의 세로사이즈, 100단위 ) 늘어나고 줄어들면 너비가 변경됨 04. vmin, vmax vmin ( 뷰포트의 최소 너비 ) 짧은 쪽의 너비를 백분율로 계산하여 설정 vmax ( 뷰포트의 최대 너비 ) 긴 쪽의 너비를 백분율로 계산하여 설정 2021. 2. 8. 11. CSS / 개요, 선택자, 상속 기본 선택자와 복합 선택자 기본선택자(4가지) 1. 전체 선택자 -> * {} 2. 태그선택자 -> 태그이름으로 선택 3. 클래스 선택자 4. ID 선택자 복합선택자 1.일치 선택자 span.orange ( 오렌지 클래스인데 span에 있는 오렌지 클래스 ) 2.자식 선택자 ul>.orange ( ul의 자식중 클래스가 orange인 태그 ) 3.후손 선택자 , 자식, 자손 다 포함(띄어 쓰기가 선택자의 기호로 사용된다. ) div .orange 4. 인접 형제 선택자 ( ex) orange 클래스의 바로 하나의 다음(다음 형제) 태그를 선택 ) .orange + li orange 태그의 다음 li 를 선택 5. 일반 형제 선택자 ( orange 클래스의 모든 다음 형제 태그를 선택 ) .orange ~.. 2021. 2. 6. 이전 1 다음
