본문 바로가기

Web/HTML&CSS4

[CSS] SCSS_기본 사용법 [선택자] div { color:black; .foo { // 자손(descendant) 선택자 color: black; } > .foo { // 자식(child) combinator color: black; } + .foo { // 인접형제(adjacent sibling) 선택자 color: #000; } ~ .foo { // 일반형제(general sibling) 선택자 color: yellow; } & .foo { // Sass 부모(Parent) 참조 선택자 color: #fff; } .foo & { // Sass 부모(Parent) 참조 선택자 color: red; } &.bar { color: green; } } [import] @import 'common.css'; @import 'commo.. 2020. 6. 11.
[CSS] Reset 자주 사용하는 CSS 리셋 코드 커스텀 영역은 입맛대로 변경하자. (body의 font-family 라던가..) @charset 'UTF-8'; /* basic reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside.. 2020. 6. 11.
HTML 전역 속성 사용하기 전역 속성(Global attributes)은 모든 HTML의 공통 속성이다. 모든 엘리먼트 요소에 사용할 수 있지만 일부 요소에는 효과가 없는 것도 있다. 하나의 엘리먼트의 다중 속성을 선언하는것도 가능하며, 속성을 쓰는 순서도 중요하지 않다. (자주 사용하거나 익숙한 속성별로 정리하려다가, 그냥 abc 순으로 정리해두었다.) [accesskey] 키보드 단축키를 지정하여 해당 엘리먼트를 선택할 수 있게 한다. accesskey를 설정하는데 필요한 키 조합은 브라우저와 플랫폼마다 차이가 있으며 윈도우에서 대체로 accesskey는 alt키를 함께 누를 때 작동한다. (이미지 출처) https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/acc.. 2019. 3. 25.
[CSS] Koala를 사용하여 LESS / SASS 를 CSS 파일로 컴파일 코알라는 less, sass 파일을 css파일로 쉽게 컴파일 해주는 GUI 프로그램이다.사용방법은 무지 간단하다. 프로그램 다운로드http://koala-app.com 변경하고싶은 sass / less 파일의 경로를 Add Folder 로 추가할수 있다. 마우스 우클릭 메뉴중 Set Output Path 로 컴파일 된 CSS파일의 저장 경로를 설정 각 파일마다 Auto Compile(자동 컴파일) 기능을 활성화/비활성화 할 수 있다.자동 컴파일 기능을 켜두면 파일에 수정부분이 감지될때마다 실시간으로 컴파일이 진행된다. 2019. 3. 25.

티스토리툴바