css

꼬여버린 flex로 캐러셀 만들기

구현하고 싶었던 기능 판매중인 상품이 3개 이상일 때 x축 스크롤바가 생기면서 옆으로 넘길 수 있다. 하지만 현실..😰 // 생략 // 생략 // 생략 .product-list { display: flex; gap: 10px; overflow-x: scroll; } .product-item { width: 140px; } 크게 ul > li 로 나누어 li마다 하나의 카드(이미지와 상품명, 가격)이 들어가게 만들었다. ul에 flex와 gap을 주어 일정한 간격을 유지하려고했으나 되지 않았다. 대체 왜..!! li의 영역이 저만큼 잡혀있지만 보여지는 간격은 반 밖에 되지 않는걸 볼 수 있다. overflow-x: scroll를 했지만 스크롤이 생기기만 할 뿐 영역이 제대로 잡히지 않았다. 해결방법 fle..

[CSS] 글자 뒤에 이미지 배치 외않되?

사건의 전말 타이머 작업을 하던 중 글자를 앞에 두고 이미지를 뒤에 두고싶었다. 이렇게 말로쓰면 너무 간단하고 문제를 해결한 지금 다시봐도 왜 어렵게 생각했는지 의문이들정도다. (하지만 그 당시에는 촉박했고 시간안에 해야한다는 생각에 다급했다) 현실 .wraps-time .num-hour::after, .wraps-time .num-min::after, .wraps-time .num-sec::after { content: ""; display: block; background: no-repeat center/80px url(../images/box.png); width: 80px; height: 80px; } 간략한 설명 .wraps-time 안에 시간(.num-hour), 분(.num-min), 초(...

TIL 16 :: css할 때 고려해야할 것

CSS 설계 기법 HTML은 최대한 단순한 구조를 짜는게 좋듯이 CSS도 코드의 중복이 없도록 모듈화를 시키는것이 유용하다. 그래서 같은 button들이라면 .btn .btn1 이렇게 만들어 .btn에는 공통적인 속성을 주고 .btn1에는 각 버튼별 속성을 추가해주는식으로 한다. OOCSS (Object Oriented CSS)가 앞서 설명한 방식으로 레고처럼 버튼, 글자, 내용 부분들을 모듈화 해놓고 조합하는 방법론이다. 모듈화의 장점은 홈페이지를 제작할 때 공통속성을 한번의 작업만 하면 된다는 것이다. 굳이 각각 작업해서 맞추는게 아니라 같은걸 사용한다면 수정이나 시간절약에 좋을것이다. 그리고 css에서 동일한 이름을 정하기도 하는데 이건 회사마다 다르다고한다. 아래 사진은 참고용으로 좋다. 더보기 ..

5일차 :: CSS

✍CSS(Cascading Style Sheet) 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. CSS의 궁극적인 목표: 어떤 브라우저에서도 동일하게 보여야한다. 그래서 reset.css 같이 값을 바꿔준다. div { background-color : orange; } selector : 선택자 property : 속성 value : 값 { 속성 : 값; } : 선언문 선택자 종류 * Universal Selector(전체 선택자) p, section, ul ... Type Selector(태그 선택자) .클래스명 Class Selector(클래스 선택자) #아이디명 Id Selec..

[HTML,CSS] 태그, 선택자 정리 사이트!

HTML, CSS를 공부하다 보면 느끼시겠지만 태그들이 찾으면 찾을수록 많이 존재합니다. 수많은 태그들이 존재하는데 그러면 모든 태그를 외워야하는건가? 라는 저처럼 고민하시는 분들이 계실 것 같아 정리가 잘 되어있는 사이트를 소개합니다. 특히 html, css를 처음 접하시는 초보자들에게 추천합니다 :) 1. HTML5 Tag Dictionary - https://opentutorials.org/module/552/4786 : 각 태그마다 정의와 설명, 그리고 예제를 같이 보여주기 때문에 이해하는데 더욱 도움이 됩니다. 2. CSS Dictionary - https://opentutorials.org/module/441 : W3C의 내용을 기본으로 만들어졌으며 예제들을 이미지와 jsfiddle 서비스를 ..