CSS Preprocessor ; CSS 전처리기 - CSS의 불편함을 확장 기능으로 상쇄 ex) Sass, Less, Stylus - 전처리기 ; CSS문법과 유사 & 선택자의 중첩이나 조건문,반복문,다양한 단위의 연산 등 표준 CSS보다 훨씬 많은 기능 제공 - 웹에서 직접 동작 x, 웹에서 동작 가능한 표준의 CSS로 컴파일 - Less ; 진입장벽이 비교적 낮지만 기능의 한계 존재 - Stylus ; 덜 유명하며 비교적 늦게 나왔기에 성숙도 떨어짐 - Sass(SCSS) ; 위 두 전처리기의 장점 가짐 SCSS ; Sass 3버전에서 새롭게 등장, Sass의 모든 기능을 지원하는 CSS의 상위집합 SCSS 문법 주석 1. /* 주석 */ ; 컴파일된 CSS에 존재 o 2. // 주석 ; 컴파일된 ..
# SEO(검색 엔진 최소화,Search Engine Optimization) ; 구글이나 네이버 등에 자신의 웹사이트/페이지를 노출할 수 있도록 정보를 최적화하는 작업 설정 사항 글씨 ; color, font-size, font-weight, font-family, line-height 상자 크기 관련 ; width, height, padding, box-sizing, overflow(hidden), flex-grow 상자 꾸미기 관련 ; border, border-radius, box-shadow, text-align, transition, transform(rotateY), opacity 버튼 ; cursor, transition / :hover 위치 관련 ; position:absolute, to..
전환 transition : 속성명 지속시간 타이밍함수 대기시간; ; 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 - 지속시간은 단축형 작성 시 필수 속성 ! 속성명(transition-property) ; 전환 효과를 사용할 속성 이름을 지정. all(모든 속성에 적용, 기본 값), 속성이름 지속시간(transition-duration) ; 전호나 효과의 지속시간을 지정. 0s(전환 효과 없음), 시간(단위 s) 타이밍함수(transition-timing-function) ; 전환 효과의 타이밍(Easing)함수를 지정. ease ; 느리게-빠르게-느리게 / linear ; 일정하게 / ease-in ; 느리게-빠르게 / ease-out ; 빠르게-느리게 / ease-int-out ; 느리게-빠..
배치 position static ; 기준 없음, 기본값 relative ; 요소 자신의 원래 위치를 기준으로 배치. 배치 전 자리는 비게 됨 - 배치를 위한 용도보다는, 보통 position:absolute의 구조상의 부모요소에 위치 상의 부모요소가 될 수 있도록 부여 absolute ; 위치 상 부모 요소(상위 요소 中relative인 요소)를 기준으로 배치 - 상위 요소로 쭉 올라가서, position:relative인 요소를 기준으로 배치함. 없다면 루트 요소인 viewport를 기준으로 배치 - 보통, 부모 요소에 position:relative를 두고, 자식요소에 position:absolute를 둬 배치 - display:block으로 변경됨 fixed ; 뷰포트(브라우저)를 기준으로 배치 ..
글꼴 font-size : 글자의 크기. 16px(기본값), 단위 font-style ; 글자의 기울기. normal(기울기 없음, 기본값), italic(이텔릭체) font-weight : 글자의 두께. normal(400,기본값), bold(700), 100~900(수치로 설정) font-family ; 글꼴(서체) 지정, 여러 개 지정된 것 중 가장 먼저 적용되는 글꼴 사용. san-serif(고딕체 계열, 대부분), monopsace(고정너비 글꼴 계열), cursive(필기체 계열), fantasy(장식 글꼴 계열) -> 하나씩 써보기 line-height ; 한줄의 높이. 숫자(요소의 글꼴 크기의 배수로 지정), 단위 문자 color ; 글자의 색상. 색상 text-decoration ; 문자..
width, height ; 요소의 가로/세로 너비 auto ; 기본값 / 단위(px,ev,vm) max-width, max-height ; 요소가 커질 수 있는 최대 가로/세로 너비 none ; 기본값 / 단위 min-width, max-height ; 요소가 작아질 수 있는 최소 가로/세로 너비 0 ; 기본값 / 단위 margin ; 요소의 외부 여백(공간)을 지정하는 단축 속성 0 ; 기본값 / auto ; 가로(세로)너비가 있는 요소의 가운데 정렬에 활용 / 단위 -음수도 가능 padding ; 요소의 내부 여백(공간)을 지정하는 단축 속성 0 ; 기본값 / 단위 / % ; 부모 요소의 가로 너비에 대한 비율로 지정 -음수도 가능 border-radius ; 요소의 모서리를 둥글게 깎음 borde..
의사 클래스 ; 선택하고자 하는 HTML요소의 특별한 상태 명시할 때 사용 동적 의사 클래스 :link ; 한 번도 방문 하지 않은 상태 :hover ; 마우스 올려놓은 상태 :active ; 마우스로 링크 클릭하고 있는 상태 :visited ; 한 번 이상 방문한 상태 :focus ; 초점이 맞춰진 input 요소를 모두 선택, input, a, button, label, select에 가능. tabindex="-1"를 통해 탭으로 선택할 수 있게 만들 수 있음 상태 의사 클래스 - :checked ; 체크된(checked) 상태의 input 요소를 모두 선택함 - :enabled ; 사용할 수 있는 input 요소를 모두 선택함 - :disalbed ; 사용할 수 없는 input 요소를 모두 선택함 ..
CSS(Cascading Style Sheets) ; HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어 - 선택자 + 선언부로 구성 선택자 { 선언부 } 선택자 ; CSS를 적용하고자 하는 HTML 요소 전체 선택자 * ; 모든 요소를 선택 ex) div>* 태그 선택자 ABC ; 태그 이름으로 요소 선택 ex) div class 선택자 .ABC ; 특정 집단의 여러 요소 한 번에 선택 ex) .headings ID 선택자 #ABC ; 하나의 아이디는 하나의 요소에만 사용 ex) #heading 복합 일치 선택자 ABC.XYZ ; 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 ex) span.orange ; span이라는 태그이면서, class=orange인..
