본문 바로가기

CSS

(6)

SCSS ) 설치 및 셋팅 npm install -g sass npm show sass version 먼저 scss 폴더 안에 scss 파일을 작성한 다음아래 명령어를 치면scss -> css 파일로 변환되어 css 파일이 생기게 됩니다.sass ./scss/style.scss ./css/style.css 근데 매번 수동으로 sass한테 명령을 내리면 불편하니까--watch라는 플래그를 넣어 sass가 해당 파일을 감시하게 만들 수 있습니다.sass --watch sass --watch ./scss/style.scss ./css/style.css 그럼 scss 파일을 작성하고 저장할때마다 아래처럼 컴파일되었다고 날짜와 시간이 뜬다. 그런데 scss 디렉토리에 있는 모든 파일을 css로 변환한 후에다른 디렉토리로 이동해야..

CSS ) 단위 1. 절대단위절대 길이 단위는 고정되어 있으며 이들 중 하나로 표현된 길이는 정확히 해당 크기로 나타납니다.화면 크기는 매우 다양하므로 절대 길이 단위는 화면에서 사용하지 않는 것이 좋습니다. 그러나 인쇄 레이아웃과 같이 출력 매체가 알려진 경우에는 사용할 수 있습니다. cmcentimetersmmmillimetersininches (1in = 96px = 2.54cm)px *pixels (1px = 1/96th of 1in)ptpoints (1pt = 1/72 of 1in)pcpicas (1pc = 12 pt) 2. 상대단위상대 길이 단위는 다른 길이 속성에 상대적인 길이를 지정합니다. 상대 길이 단위는 다양한 렌더링 매체 간에 더 잘 확장됩니다. emRelative to the font-size of..

[CSS] 많이쓰는 class 이름 정리 breadcrumbs (빵부스러기 : 길을 잃어버리지 않기 위해 길에 떨어뜨리는 빵부스러기와 같은 역할)ex) 홈 > 회사소개 > 연혁class명설명예시wrapper container inner section box그룹핑 목적으로 사용되는 div 엘리먼트에 주로 사용 area sub bul의미가 없는 요소로 사용할 수 있는 이미지로 사용 icon의미가 있는 요소로 설명에 대한 텍스트가 명확한 경우 사용 item pop팝업 titheading 요소로 사용되지는 않고 문단의 강조를 나타내는 형식의 텍스트 desc txt문단의 이미지로된 텍스트에 사용 h1 ~ h6heading요소에 사용 aside navlnb, gnb, snb 등의 네비게이션 요소에 사용 lnb현재 서비스 지역 네비게이션 g..

모바일 제스처 스와이프, CSS 두 줄로 간단하게 만들기(가로스크롤) 모바일에서 좌/우로 넘기는 제스처를 스와이프라고 한다. 흔히 모바일 쇼핑 어플등에서 스와이프 제스처를 안 써본 사람은 없을것이다. 아래는 스와이프가 되는 박스(div) 안에 넣어야 할 CSS 코드이다. 1. 스와이프 박스 만들기 스와이프를 원하는 구간에 아래의 코드를 넣는다. 가로스크롤을 만드는것이다. .box { overflow-x: auto; white-space: nowrap; } 2. 가로 스크롤 없애기 보통 모바일에서 가로스크롤이 보이지않아도 스와이프 제스처로 좌우 화면이동이 가능하다. 가로 스크롤을 안보이도록 하기위해 아래의 코드를 추가로 작성한다. .box { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar..

CSS로 스크롤바 기능만 살리고 안보이게하기 IE, Edge, Firefox, Chrome, Safari, Opera 대응법 1. IE, Edge .box { -ms-overflow-style: none; /* IE, Edge */ } 2. Firefox .box { scrollbar-width: none; /* Firefox */ } 3. Chrome, Safari, Opera .box::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ }

[Hweb] CSS grid 기본 1. grid란? grid란 레이아웃을 설정하는 CSS속성입니다. grid 속성을 이용하면 웹페이지의 레이아웃을 한번에 잡을 수 있습니다. 물론 모든 웹디자인에 grid를 사용하기 좋은것은 아닙니다. 보통 규칙적인 비율로 디자인된? 웹사이트에 적용하면 편리합니다. 레이아웃을 잡고자하는 가장 큰 영역에 display: grid를 표기하여 사용하면됩니다. 또, grid안에 grid도 사용 가능합니다. Internet Explorer를 제외한 모든 브라우저에서 호환됩니다. 2. grid 용어 그리드를 사용하려면 주요 구문의 개념을 잘 이해해야 합니다. 아래에 그리드의 다양항 속성들을 정리해 놓았는데 주요 구문의 개념을 알아야 속성의 뜻도 이해하실 수 있을거에요. 1. 그리드 컨테이너(gird container..

이전 1 다음

티스토리툴바