본문 바로가기

css

 (17)
고정 열과 행 div 틀고정 css position sticky 고정된 열과 행을 어떻게 만들어낼까 고민이 많았는데, 아래와 같이 작업했다. 데이터가져와서 계속 새로 만들어야해서 결국 프로젝트에 적용한 버전은 약간 달라졌지만, 기본은 같다. css position sticky를 사용한 점.   See the Pen frozen rows and columns 3 : before :after by keepgoing-Noah (@keepgoing-noah) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 js는 임시로 가짜 데이터를 만드느라 코드는 막무가내로 복붙했다. 왼쪽 행이 수십개가 될 수도 있고, 몇개 안될수도 있다.  현재 시간 기준으로 데이터를 불러오기 때문에, 지금 시간이 몇시냐에 따라서 column의 수..
border 안쪽으로 그릴 때 css에서 border를 사용하면 div 밖으로 그려진다. 그래서 크기가 커지기 때문에 box-sizing:border-box를 함께 하용하곤 하는데, 그래도 결국은 밖으로 그려진다. 구글링해보니 border를 보통 안쪽으로 그려야 할 때는 box-shadow를 사용한다고 한다. box-shadow: 0 0 0 20px #ff0000 inset; 일반적인 상황에서는 써먹을 수 있겠으나... video 태그에 써야했던 나는 이게 안먹히는 것을 알게됐다. 스택 오버플로우에서 관련 내용을 찾을 수 잇었다. box-shadow가 그림자이므로 video 아래로 내려간다는 내용이었다. 내가 의도했던 바는... video 태그에서 border에 애니메이션을 줄 예정이었으므로.. 어떻게 할까 하다가 결국 그냥 bord..
css color rgba opacity variable not working CSS 컬러 변수 선언 후, alpha값 (opacity)을 조정할 수 있을까? 개발자도구에서는 에러가 없는디... 적용은 안된다. HTML 삽입 미리보기할 수 없는 소스 참고할 만한 글을 찾아봄.. 언젠가 되겠찌:.. ? https://codepen.io/finnhvman/post/theming-with-css-variables-in-rgba Theming with CSS variables in RGBA CSS variables are pretty well-supported nowadays across browsers. The global feature coverage is above 87.5% at the time of writing. Theming apps A not so surprising use..
css minmax 사용법 css minmax 사용법 : grid로 레이아웃을 만들 때 많이 사용. 문법 : min 보다 크거나 같고, max 보다 같거나 작은 단위 minmax(min, max); 예시 : .grid-container { display: grid; grid-template-rows: repeat(2, minmax(20px, auto)); grid-template-columns: minmax(30px, auto) repeat(3, 1fr); } 참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/minmax minmax() - CSS: Cascading Style Sheets | MDN The minmax() CSS function defines a size range ..
jQuery set CSS background opacity jQuery css background opacity https://stackoverflow.com/questions/19663427/jquery-set-css-background-opacity jQuery set CSS background opacity I have a whose transparency of its background-color (and not its contents) I'd like to change. A remote API sends me this colour: #abcdef and I tell jQuery (1.9) to apply this colour ... stackoverflow.com 3가지 방법 정리한 것 https://codepen.io/keepgoing-noah/pen..
Lesson #7 CSS 사용시 반드시 알아야 할것, 명시도 Lesson #7 CSS 사용시 반드시 알아야 할것, 명시도 CSS 명시도란 ? 오늘은 명시도에 대해 얘기를 해드리고 싶어요. CSS 선택자를 내 맘대로 후다닥 가지고 놀면서 작업하려면 명시도에 대한 이해가 필수입니다. 일상 생활에서 사용하는 명시도는 “얼마나 확실하게 잘 보이는가”죠. CSS의 명시도도 비슷합니다. ‘얼마나 확실(구체적)한가”로 이해하시면 되고, 구체적일수록 CSS 중복선언 중에서 ‘우선순위’가 높다고 이해하시면 좋을 것같아요. 명시도를 숫자로 표현하여 알아볼게요. 쉼표로 구분된 4자리가 필요합니다. 0, 0, 0, 0 명시도 규칙 4가지 요소를 나타내는 자리는 네번째 자리이며 0,0,0,1 입니다. 클래스, 가상클래스, 속성을 나타내는 자리는 세번쨰 자리이며 0,0,1,0 입니다. I..
Lesson #6 스타일 시트를 읽기 쉽게 정리하는 방법 Lesson #6 스타일 시트를 읽기 쉽게 정리하는 방법 이 포스팅의 목차 1. 본격적인 CSS 작성 시작전에 소개 및 목차 작성하기. 2. 자주쓰는 색상과 폰트 작성해두기. 3. 주석으로 영역 구분을 하고 목차의 제목을 사용한다. 4. @rule을 상단에 둔다. 5. CSS 구체성을 활용한 계층구조 적용 오늘은 제목 그대로 스타일 시트를 읽기 쉽게 정리하는 방법에 대해 포스팅 해보겠습니다. 웹페이지를 렌더링할 떄 CSS코드를 해석하는 건 컴퓨터지만 CSS를 만들고 편집하는 건 우리의 일이죠. 개발 중에는 쉽게 코드가 지저분해지고 CSS규칙 사이의 상호관계, 캐스케이딩 순서, 심지어 수정할 CSS의 위치조차 파악하기 어려워 질때도 있습니다. 제가 알려드리는 5가지를 참고하셔서 작업하는 동안 코드를 잘 정..
Lesson #5 CSS FlexBox ( 플렉스박스 1) Lesson #5 CSS FlexBox ( 플렉스박스 ) 이 포스팅의 목차 0. 플렉스박스 소개. 1. 플렉스박스란 2. 방향, 흐름, 시각적인 순서 처리 2-1.flex-direction 2-2. flex-wrap 2-3. flex-flow CSS Flexbox 00. 플렉스박스 소개 flex모듈에 대해 소개해드릴께요. grid Layout과 함께 유동적인 레이아웃 모듈인 Flrex box(플렉스박스)모듈에 대해 소개합니다. 이 Flexbox(플렉스박스)모듈은 복잡한 웹 페이지와 응용프로그램들을 구현할 수 있도록 디자인된 새로운 레이아웃입니다. CSS를 많이 다뤄본 분들이라면 본인들만의 노하우로 수직중앙 정렬(Vertical centering)을 하고 계실거에요. 이처럼 중요하고 필요하지만 조금은 허술..

티스토리툴바