목록개발/CSS (5)

개발 공부 기록

[SASS] SASS 기초 공부

Sass(syntactically awesome stylesheets) 는 CSS로 해석 및 컴파일되는 스크립트 언어이다. SASS 변수 정의 변수는 $ 로 시작하며 4가지 자료형을 지원한다. - 수(단위 포함) - 문자열(인용 부호가 있거나 없이) - 컬러 (하나 이상의 이름) - 불리언 변수는 매개변수로 사용하거나 결과물이 될 수 있다. 예시 $primary-color: #3bbfce $margin: 16px .content-navigation border-color: $primary-color color: darken($primary-color, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $primary-color 루프 Sass..
개발/CSS 2020. 9. 22. 00:17
[CSS] BEM 방식

BEM: Block Element Modifier BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 수 있다. Block 전체를 감싸고 있는 블럭요소 Element 요소는 블럭이 포함하고 있는 한 조각 Modifier 블럭 또는 요소의 속성 사용 .block‐‐modifier {…} .block__element‐‐modifier {…} 출처 webclub.tistory.com/263 nykim.work/15
개발/CSS 2020. 9. 13. 08:22
[CSS] flex

CSS에서 요소들을 자유롭게 위치시킬 수 있는 flex에 대해 알아보자. flex는 모바일 지원율이 매우 좋다는 장점이 있다. flex 사용방법 .container{ display: flex; } display: flex; 를 설정해준다. flex container 와 item 사용법 자세하게 알아보기 heropy.blog/2018/11/24/css-flexible-box/ 함께 보면 좋은 영상 tv.naver.com/v/5012344 Flexbox로 만들 수 있는 10가지 레이아웃 NAVER Engineering | 발표자: 이민영 (N Tech Service) 발표월: 2018.9. tv.naver.com 영상 자료 - 글 정리 d2.naver.com/helloworld/8540176 flex를 연습..
개발/CSS 2020. 9. 8. 02:12
[CSS] display 와 visibility의 차이

html 태그로 만든 layer를 안 보이게 하는 방법에는 두 가지가 있다. 1. display : none ; (↔ block) > 아예 사라짐. 보이는 것뿐만 아니라 해당 공간도 존재하지 않게 됨. 2. visibility : hidden ; (↔ hidden) > 보이지만 않고 해당 공간은 존재함. width와 height 값을 주었다면 그만큼의 공간이 존재하게 된다. 위와 같은 차이가 있다고 한다. 상황에 맞춰 적절한 것을 선택하면 될 듯하다. 참고 : blog.naver.com/eroicaplus/90036328974
개발/CSS 2020. 9. 6. 21:14
[CSS] 삼각형 만들기

게이지바를 포인팅할 삼각형이 필요해서 삼각형 도형을 만들어보았다. HTML코드 CSS 코드 .triangle{ width: 0px; height: 0px; border-top: 25px solid transparent; border-right: 50px solid red; border-bottom: 25px solid transparent; } .triangle-2{ width: 0px; height: 0px; border-top: 25px solid transparent; border-left: 50px solid green; border-bottom: 25px solid transparent; } .triangle-3{ width: 0px; height: 0px; border-top: 50px sol..
개발/CSS 2020. 7. 8. 00:18
Prev 1 Next