qwef

그냥 단어 두개 이어진 거 - 행동 -- 어디 소속 __ header__menu clean--float send-btn--hover https://nykim.work/15 [CSS 방법론] BEM 방식 오늘은 CSS 방법론을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하 nykim.work BEM 방식이라고 함.

#ticket h2{ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right,red, purple); background-color: unset;} 우선, 뭔가 clip 기능 같은 것의 대상을 text로 설정한 다는 것이고, 텍스트를 채우는 데 그 color를 투명하게, 배경이미지는 실제로 url()해서 이미지로 해도 되고, 저렇게 그라디언트로 넣어도 된다. background-image 해서 할 수 있는 것은 다 되는 듯. 아니면 그냥 background-color도 되는 듯. 배경 뭐 해서 바꾸는 건 다 되는 듯 여튼 background-clip, 배경과 c..

뭔가 좀 겹쳐서 그 겹친 부분만 보여주는? 그런 기능인 것 같다. clip-path:polygon(0 0, 100% 10%, 100% 90%, 0 100%); polygon은 다각형 그리는 함수 같은데, 폴리곤이 다각형 이라는 뜻 이니까 저렇게 부모의 %에 맞춰 그릴 수 있고, (가로, 세로) 그렇게 선으로 이어 가다가 마지막은 처음 시작했던 점과 자동으로 연결되는 듯. clip-path:ellipse(80% 100% at 50% 0) ellipse(가로반경 세로반경 at 중심축위치x 중심축위치y) 타원 clip-path: circle(50% at 50% 50%); circle(반지름 at x중심축 y중심축) 원

mix-blend-mode: overlay; 글자에 쓸 수 있음. background-blend-mode는 배경용이고, mix-blend-mode는 글자? 요소? 용 인 듯. 자신의 배경 또는 부모와 어떻게 혼합될지 지정하는 속성 자신의 배경 또는 부모와 관련이 있어야 함. 조상도 되긴 하는 듯..?

position:sticky 이거 top, left 등 설정하면 스크롤 내릴때 평범히 내려가다 화면의 top이라던지 그 위치에 오면 붙어버림. 이거는 부모안의 영역까지만 붙어져 있음. 부모 영역을 벗어나면 그 부모의 맨 끝에 막혀서 더이상 못 따라옴. 부모의 position이 뭐든 그건 상관 없음.

배경색과 배경이미지, 혹은 배경이미지들이 여러 개 있을 때, 그것들과의 관계를 정의. 여러가지 옵션을 넣을 수 있음. 마치 레이어 투명도? 조절 하면서 겹치거나 좀 어둡게 하거나 그런 느낌임. 여러 효과가 있음

표 같은 형태를 개념으로 공간을 차지. #wrap{display: grid; grid-template-columns: 30% 70%; grid-template-rows: 50px 150px 50px;} 위에 grid-template-columns: 30% 70%; grid-template-rows: 50px 150px 50px; 이렇게 열과 행을 지정 가능. 행 3칸, 열2칸이 #wrap 안의 자식들이 각각 나눠 가지는 거임. 총 6칸인데, 만약 자식들이 6개 초과 시 똑같은 비율로 추가로 생성됨. 총 6칸에, 자식이 4개 있는 상황. 마지막 row는 아예 공간을 나눌 자식이 하나도 없어서 columns 비율을 나누지 않은 듯 자식을 하나 더 추가 한 상황. grid-template-columns: 30..

이렇게 하면 400px이 min-width처럼 작용함.

.history .container .text th{ white-space: nowrap; word-break: keep-all;} 이렇게 하면 줄바꿈 안일어남. white-space는 공백과 줄바꿈을 어떻게 처리할 지 정하는 속성

background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1)), url(../img/fruits.jpg); 이런 식으로 마치 포토샵 레이어 쌓듯이 가능하다고 함. 보아하니 뒤쪽이 아래 레이아웃 일 듯