2019백업
12. CSS 배경 그라디언트 (background: linear-gradient)
background: linear-gradient (to bottom, dodgerblue, crimson); 방향(~쪽으로)/ 시작색상/ 끝 색상 background: linear-gradient(45deg, dodgerblue 50%, crimson 50%); background: radial-gradient(circle at center center, dodgerblue, crimson); 퍼지는 모양/ 시작위치/ 시작색상/ 끝 색상 Gradient Generator 구글 검색 (사이트를 통해 그라디언트를 만들 수 있다.)
11. 박스모델 - 그림자 효과 (텍스트 새도우와 비슷함)
박스 모델 - 그림자 효과 (box-shadow) box-shadow: inset (offset-x) (ofsset-y) (blur) spread color offset-x: 수평 그림자의 offset 값 offset-y: 수직 그림자의 offset 값 blur: 그림자 가장자리를 부드럽게
10. 박스모델 - 모서리 둥글게하기(속성: border-radius : 1 2 3 4)
속성: border-radius : 1 2 3 4 100%, 50% 입력시 동그랗게 된다. 1 2 3 4 5 6 7 8
9.박스모델-Box Model(속성: box-sizing: border-box)
박스모델 - Box Model (속성: box-sizing: border-box) box-sizing: border-box 지정한 width가 고정되어 border와 padding에 영향을 받지 않게하는 속성이다.
8. 박스모델 (border, margin, padding)
outline 속성 border를 감싸고 있는 라인 border와 margin 사이에 위치 border 안쪽에 위치하려면 - 값 div { outline: 5px solid red; outline-offset: 10px; } 박스모델 - Box Model (속성: margin & padding 쉽고 빠르게 적용하기) 1) margin / padding :10px; (top, bottom, right, left) 2) margin / padding :10px 20px; ((top, bottom), (right, left)) 3) margin / padding :10px 20px 30px; (top, (bottom, right), left) 4) margin / padding :10px 20px 30px 4..
7. 레이아웃 스타일 (Block elements & Inline elements)
1. Block Element : 한 줄에 하나의 요소만 포함 할 수 있는 HTML 요소 EX) p, h1~h6, ul, ol, div, blockquote, form, hr, table, figure - 기본 너비값: 100%(폼 엘리먼트 제외) - 너비 값, 높이 값 가질 수 있음 - 상하좌우 모든 마진 값을 가질 수 있음 2. Inline Element : 한 줄에 여러 요소를 포함 할 수 있는 HTML 요소 EX) img, br, sub, span, input, laber, a, button, b, l, s - 기본 너비 값: 컨텐츠 너비 값 - 너비 값, 높이 값 가질 수 없음 - 상하 마진 가질 수 없음(이미지 제외) 3. inline-block - block은 한 중레 여러 요소를 포함 할 ..
6. CSS 배경 색상 및 이미지 제어하기 (속성: background-image, background-repeat)
CSS 배경 색상 및 이미지 제어하기 1) background-color 2) background-clip 3) background-image('경로') 4) background-repeat - repeat - repeat-x - repeat-y - no-repeat 5) background-size: 배경이미지 크기 조절 - auto: 원래크기 - contain: container에 맞는 크기 - cover: ★자주사용됨 - px, % (50%, 50%) (width 반토막, height 반토막) ★자주사용됨 6) background-position: cetner center; - top, bottom, left, right, cetner 7) background-attachment: fixed; - ..
5. CSS 목록 스타일
1. CSS 목록 스타일 1) list-style: none [Unordered List value] [Ordered List Value] 2) list-style-image: url(경로); 2. CSS 목록 실전 예제 - figure(멀티미디어 내용이 있는 그룹) 태그로 만드는 리스트 스타일 1) 링크 태그로 외부 CSS 파일 링크하기 (파비콘: favicon/ Font AweSome) Font AweSome: 아이콘이지만 텍스트 파일이라 확대해도 깨지지 않는다. (Font Awesome CDN 구글 검색) ex1) CSS li 태그 사용하기 HTML CSS JQUERY BOOTSTRAP SEMANTIC-UI MOBILE WEB APP WORDPRESS ex2) The world's three gre..