Frontend/css (16) 썸네일형 리스트형 BEM css아키텍처 + scss BEM 예시 Block__Element--Modifier https://youtu.be/er1JEDuPbZQ 참고 SCSS 연동 1. create-react-app일때 npm i node-sass css파일을 scss로 변경해준다. 2. parcel 일때 이전 포스팅참고 https://dubaiyu.tistory.com/216 Parcel 사용방법(+babel, autoprefixer, degit) 번들러란? 더보기 쉽게말해서 리액트,scss등으로 작업한 결과물을 html, css, js로 변환해주는것 번들러중에는 Parcel이라는 번들러가 있고 웹팩 번들러에 비해 정해져있는편이라 소형프로젝트를 할 dubaiyu.tistory.com css 명세 읽는법 value 결합기호 1. 공백:2개이상값 필수. 순서유지 필수 2. &&:2개이상값 필수. 순서변경가능 3. ||: 2개 값중 하나이상 필수. 순서변경가능 4. |:2값중 하나만 5.[]:그룹 우선순위에 따라 공백 > && > || > | 순서로 그룹핑하면서 해석하면된다 증가기호 *:0~무한 +: 1이상 ?: 0회 또는 1회 {A}:정확히 A {A,B}:최소 A회 최대 B회 {A,}:최소 A회, 최댓값 무제한 #: 1회이상,콤마,횟수제한가능 예) #{1,4} 1회이상 []! 그룹에서 적어도 1회 이상 예제 1. 관심없는 값 구문제거 [||]?[/]? 그룹뒤 물음표 0또는 1회니까 생략가능 결국 반드시 작성해야하는 속도는 font-size와 font-family뿐이다. 이 둘사이에는 공백이있으므로 반드시 순서를 유지.. table colspan rowspan 예시 시간지나면 맨날 잊는 테이블 colspan PRI Type Stagger Level dddddd Min Max Min, Numb of Pulses per PRI burst Min Max 이제 2번째칸 공백들을 합쳐보자 rowspan PRI Type Stagger Level dddddd Min Max Min, Numb of Pulses per PRI burst Min Max width 100%를 하려면 flex grow를 사용해보자 만약 공간안에 box1, box2, box3을 꽉채우려면? 그러나 box1과 box3을 일정 px너비가 주어져있다. box2에 ~80%의 width값을 줄경우 해결이 되기도하지만 만약 버튼이 많아지거나 크기가 바뀔경우 계속 width값을 조절해야할것이다. 만약 공간이 flex로 되어있을경우 flex-grow:2를 넣어 해결할수있다. https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flex-grow 관련문서 A Complete Guide to Flexbox Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing o.. inline과 block 이미지를 제외하고 모두 글자와 상자로 이루어져있다고 보면된다.(화면에 출력되는 속성) inline은 글자를 만들기위한요소 block은 상자를 만들기위한요소 block 특징 block은 inline에 비해 제약사항이 없는것이 특징이다. 상자이기에 가로세로 지정가능 좌우여백 가능 상자안에 글자를 넣을수있고 상자안에 상자를 넣을수있다. 익숙하지않은 css 리스트 css도 쓰던것만 써서 잘사용하지않지만 언젠가 쓰일만한 애들을 정리해보려한다. word-break: keep-all; 가운데 넣을 제목 혹은 내용 센터 태그를 사용하면 css를 지정해주지않아도되서 가운데효과만 필요할경우 간편하다. 유투프 풀사이트 iframe asdfasdf :after 예제 화살표 01Submitter 호버시 밑줄 에니메이션 See the Pen XWKZBqg by LeeEugene1 (@leeeugene1) on CodePen. 이전 1 2 다음
