똑같은 삽질은 2번 하지 말자

B(Block) 기본 하나의 아이템(component, box..)를 나타낸다. - 을 이용 .info-box { } E(Elements) 아이템(component, box..)를 이루고 있는 요소(element)를 표현할 때 사용한다. 아이템(component, box..) 이름 뒤에 2개의 밑줄 __ 을 사용하여 명명한다. .info-box__title {} .info-box__contents {} M(Modifier) 수정(Modifier)을 나타내는데 해당 아이템으로부터 기존의 속성에서 변경해서 사용하고 싶을때이다. component를 수정한다는 의미로, component명 뒤에 -- 를 사용하여 명명한다. info-box--blue {}

position: absolute 속성을 가진 자식은 부모의 position: relative or 을 기준으로 위치가 정해지는데 top right bottom left는 부모(position: relative or )의 어디 지점을 기준으로 삼을 것인지 지정 할 수 있다. top: 양수px - 상단기준. 아래로 이동 top: 음수px - 상단기준. 위로 이동 bottom: 양수px - 하단기준. 위로 이동 bottom: 음수px - 하단기준. 아래로 이동 left: 양수px - 좌측기준. 오른쪽으로 이동 left: 음수px - 좌측기준. 왼쪽으로 이동 right: 양수px - 우측기준. 왼쪽으로 이동 right: 음수px - 우측기준. 오른쪽으로 이동 뭔가 margin 개념으로다가 이해하면 좀더 쉽게 ..

긴무우우우운자아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아앙 .flex{ display: flex; width: 540px; background-color: rgb(236, 161, 48); } .col-1{ width: 200px; background-color: rgb(42, 152, 138); padding: 8px; } .col-2{ flex: 1; padding: 8px; } .col-2 p { font-size: 36px; color: black; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 이렇게 overflow가 안 먹힌다는건 자신의 width가 제한이 안되어 있다는걸 의미한..

flex-grow 속성 flex-grow 속성은 flex item의 확장에 관련된 속성이다. 0과 양의 정수를 속성값에 사용한다. 속성값이 0이면 flex container의 크기가 커져도 flex item의 크기가 커지지 않고 원래 크기로 유지된다. flex container의 크기가 커질 때 flex item의 크기도 커지게 하려면 1 이상의 값을 속성값으로 설정한다. 속성값이 1 이상이면 flex item의 원래 크기에 상관없이 flex container를 채우도록 flex item의 크기가 커진다. flex-shrink 속성 flex-shrink 속성은 flex item의 축소에 관련된 속성이다. 0과 양의 정수를 속성값에 사용한다. 기본값은 1이다. 속성값이 0이면 flex container의 ..

https://medium.com/@stephenbunch/how-to-make-a-scrollable-container-with-dynamic-height-using-flexbox-5914a26ae336

사진의 Prevuious 와 Next를 font-awesome의 아이콘으로 하고 싶은데, 이미지를 넣을수도 없고 태그를 직접적으로 만질 수 도 없는 상황이다. (slick 플러그인을 쓰고 있기때문에) 그래서 가상요소를 사용한다. 가상 요소(Pseudo-Element)란? 1. 가상클래스(Pseudo-Class) 별도의 class를 지정하지 않아도 지정한 것 처럼요소를 선택할 수 있습니다. 2. 가상요소(Pseudo-Element) 가상클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능합니다. before요소를 이용해서 기존의 Previous Next를 완전히 없애고 fontawesome을 사용해준다. .slider .slick-pr..

a { color: #1abc9c; text-decoration: none; background-color: transparent; transition: color 0.8s; /* For modern browsers */ } a:hover { color: #117964; text-decoration: underline; } a 태그 hover시 color 변하는 딜레이를 0.8초 줘서 애니메이션 효과 넣어준다.

템플릿을 다운받아 프로젝트를 하는 경우 이런 파일들이 눈에 보일터인데, min파일은 "minify 축소하다" 의 줄임으로 공백과 줄바꿈을 제거하여 용량을 줄인 파일 덕분에 전송량을 줄일 수 있다. css파일은 가독성을 위해 개발할 때 사용하고 이를 압축하여 min.css파일을 만들어 실제 서비스에 사용한다. 따라서 min.css파일을 수정해야 웹에는 적용이 된다 min.css로 변환해주는 API : https://cssminifier.com/ min.js로 변환해주는 사이트 : http://javascriptcompressor.com/ min 파일( javascript, css, html, json )을 읽기 쉽게 변환해 주는 사이트 : http://jsbeautifier.org/

@media 란 ? 출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리함으로써 하나의 HTML 소스가 여러가지 뷰를 갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도(width, height)에 따라 CSS 코드를 분기한다. @media 규칙 @media only all and (조건문) {실행문} @media: 미디어 쿼리가 시작됨을 선언한다. @media, only, all, and, (조건문) 사이에 포함되어 있는 공백은 필수적이다. only: only 키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략 가능하다. 생략했을 때 기본 값은 only로 처리 된다. 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않는다. 이 자리..

position: absolute z-index: 1 position: absolute z-index: 2 position: absolute z-index: 3 이렇게 화면이 나타난다.. 개인적으로 datepicker api를 쓰면서 달력이 자꾸 다른 태그밑으로 가려져버려서 안 가려지게 하기위해ㅡ 찾아낸 css 속성이다.