퍼블리싱/CSS(22)
-
css: 속성선택자, 상태 선택자, position, z-index, 실습(클론코딩)
속성선택자 선택자[속성] : 속성을 가지고 있는요소를 찾아라 선택자[속성="내용"] : 속성의 값으로 내용인요소를 찾아라 선택자[속성^="내용"] : 속성의 값으로 내용으로 시작하는 요소를 찾아라 선택자[속성$="내용"] : 속성의 값으로 내용으로 끝나는 요소를 찾아라 선택자[속성~="내용"] : 속성의 값으로 내용이 포함된 요소를 찾아라(찾는 내용물이 독립된 단어일때) 선택자[속성*="내용"] : 속성의 값으로 내용이 포함된 요소를 찾아라 * 선택자[속성!="내용"] : 속성의 값으로 내용이 포함되지 않는 요소를 찾아라 jQuery 상태선택자 #hobby:checked + label{ font-size:50px; color:green; } input[type="radio"]:checked +label{..
2020.12.01 -
CSS: box model, border-radius, margin, padding, 가상요소선택자, 순서선택자, 구조선택자, 이후선택자, display, overflow
box model (블럭 요소에 줄 수 있는 속성) width height border (inner-stroke, 크기가 변함) outline (outer-stroke) border-radius #1 : 전체 #1 #2 : (왼위,오아) (오위,왼아) #1 #2 #3 : (왼위) (오위왼아) (오아) #1 #2 #3 #4 : (왼위) (오위) (오아) (왼아) x/y margin : 블럭요소 밖 여백 #1 : 전체 #1 #2 : 위아 왼오 #1 #2 #3 : 위 왼오 아래 #1 #2 #3 #4 : 위 오 아 왼 margin-top margin-right margin-bottom margin-left * 마진겹침현상 : 위아래 마진값이 겹치면 큰값 하나만 적용 * margin:0 auto : 좌우 가운데 ..
2020.11.30 -
css: size, text, font, list, cursor, background, 선택자, 가상선택자pseudo
size vw: viewport width 보는 기기의 너비가 기준 vh: viewport height 보는 기기의 높이가 기준 vmin: vw와 vh 중 작은 값 기준 vmax: vw와 vh 중 큰 값 기준 text font-size: px,em,%,vw,vh,vmin,vmax text-align: left,right,center,justify(양쪽맞춤) font-weight : bold,bolder,lighter,100~900 , 기본 400 font-style: italic(글자 기울기), normal(기본상태) letter-spacing line-height: 줄간격, 단위를 생략하면 배수 단위가 된다. text-decoration: underline, (line-through)중간줄,(overl..
2020.11.27 -
CSS 개요, 정의| 인라인, 내부, 외부, css 문법, 선택자, 색상값
CSS Cascade style sheet 종류 (작동 우선순위 순) 1. 인라인 : jQuery 이용하여 css 변경 명령 시 인라인으로 적용 2. 내부 3. 외부 (웹표준 권장사항) - link - import CSS 문법 선택자{ 속성:값; } 참고 css 파일은 style 태그 없이 바로 문법 작성 css 주석 : /* 내용 */ (ctrl+/) 선택자 전체 선택자 : * asterisk 태그 선택자 : p,h1~h6,ul,li,a,img,form,input,span,div,header,footer,article,section,aside 클래스 선택자 : .클래스명 아이디 선택자 : #아이디명 자식 선택자 : > 색상값 1. 컬러명 2. 16진코드값: #RRGGBB 3. RGB 10진값: rgb(..
2020.11.26