본문 바로가기

CSS

 (19)
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 ..
CSS display flex 수직정렬, 중앙정렬 span에도 먹힐까. (먹힌다) 부모 div에 `display: flex; justify-content: center; align-items: center;` 속성을 사용하면 자식 요소들을 수평 및 수직 중앙에 정렬할 수 있습니다. 이때 span 태그가 inline 속성을 가지더라도 정렬이 되는 이유는 flexbox 레이아웃 모델의 작동 원리 때문입니다. `display: flex;`를 설정하면 부모 요소가 flex 컨테이너가 됩니다. Flex 컨테이너는 자식 요소들을 flex 아이템으로서 관리하며, `justify-content`와 `align-items` 속성을 사용하여 아이템들을 정렬할 수 있습니다. - `justify-content`: 수평 방향 정렬을 조정합니다. `center`를 설정하면 아이템들이 수평 방향 가운데로 정렬됩..
웹폰트 woff 적용시 css에서 적용 안될 때 확인할 것 웹폰트 woff 를 적용하기 위해 아래와 같이 폰트 css 파일을 만듬. 폰트는 노토산스kr , 나늠스퀘어네오 2종류입니다. 개발환경은 전자정부 4.0입니다. font.css @font-face {font-family:NotoSans_KR;font-style: normal;font-weight:100;src:url(../fonts/notosanskr/NotoSansKR-Thin.woff) format('woff'); } @font-face {font-family:NotoSans_KR;font-style: normal;font-weight:300;src:url(../fonts/notosanskr/NotoSansKR-Light.woff) format('woff'); } @font-face {font-fami..
SVG 간단 프로그레스 바 progress bar HTML - SVG 100 45 CSS .wrap{background-color: #1A253F; padding:1rem; } svg {display:block; margin:0 auto;} svg text {font-size:0.75rem; font-family: 'Montserrat', sans-serif; fill:#fff; /*svg text태그는 fill로 해야 color처럼 먹힘 */}
구조적인 HTML을 써야하는 이유 [ 에릭 마이어 - CSS 완벽가이드] 의 4~5페이지에 있는 내용입니다. 2009년에 출판된 책이긴 하지만 지금 봐도 여전히 재미있고 좋은 내용이 많습니다. http://www.yes24.com/Product/Goods/3300334 CSS 완벽 가이드 웹 개발의 표준, CSS최신 사양의 CSS2와 CSS2.1을 이용하여 CSS의 모든 것들을 실무에 적용하는 방법을 알려주고 있는 책이다. CSS 2.1의 모든 내용들을 실무에 완벽하게 적용할 수 있도록 포괄적인 내용을 다루고 있으며, 이전 버전보다 크게 개선된 마이크로소프트 인터넷 익스플로러 7에 맞추어 콘텐츠의 위치지정, 리스트와 생성... www.yes24.com 구조적인 HTML 마크업을 써야 하는 이유 구조화되지 않은 페이지는 컨텐츠의 색인 작업..
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..

티스토리툴바