CSS13 [ CSS ] input[type="date"] 커스텀하기 + :valid 작동 안하는 문제해결 input[type="date"]의 기본 모양은 아래와 같은 문구와 캘린더 이모지로 이루어져 있다. 하지만 계정 생성 폼을 만들면서 년/월/일이 아닌 생년월일이라는 문구가 넣고 싶었고 캘린더 이모지도 다른 디자인으로 바꾸고 싶었다. 그러나 css는 역시 쉽지 않은 세계... 일반적으로 적용하는 css코드( placeholder 디자인 변경 )로는 적용이 안되었고 여러 가지 검색해 보고 강의 보면서 커스텀에 성공은 했다. 자주 쓰진 않아서 왠지 까먹을까 봐 정리해 둔다. 🥲 input( type="date",data-placeholder="생년월일" ) [ 아이콘 변경하기 ] input[type='date']{ // 캘린더 아이콘을 클릭해야만 달력이 보이는데 캘린더의 영역을 조절하기위함 position: .. 2023. 6. 22. [ CSS ] Grid - Auto Columns and Rows 우리가 grid-template-rows에 설정한 행의 수 보다 많은 element들이 화면에 보이게 된다면 우리가 설정한 크기와 같지않는 cell들이 발생한다. 아래의 코드를 보면 4X4의 그리드를 만들었지만 element가 31개이기에 16번째까지는 우리가 설정한 grid에 들어가고 17번째 element부터는 우리가 설정한 100px X 100px 의 크기를 가지지 못한다. 이를 해결하기 위해서는 grid-auto-rows를 사용하면 된다. grid-auto-rows의 크기를 설정해놓으면 만들어놓은 row 보다 많은 element가 있으면 자동으로 설정한 크기에 맞는 row를 만들어준다. grid-auto-rows의 경우 다음 row에 요소들이 배치가 되는데 그 이유는 grid-auto-flow가 .. 2023. 4. 16. [ CSS ] SCSS - variables, nesting, mixins, extends Scss / Sass css preprossesor로 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공한다. Scss와 Sass는 서로 다른 syntax를 가지고 있으나 Scss가 Sass를 위한 공식적인 syntax를 릴리즈하고 있다. Scss는 업계 표준이 되어가며 css를 programming language처럼 만들고 있다. [ Scss와 Sass의 차이점 ] Scss = 선택자의 유효범위를 {}로 구분 Sass = 선택자의 유효범위를 들여쓰기로 구분 1. variables 반복적으로 사용되거나 관리가 필요한 css 값들을 변수로 지정 1 ) _variables.scss 파일 만들어 [$변수명:값; ] 형식으로 작성 ( _가 파일명에 포함되면 css로 변하지 않음) 2) styles.scss 파.. 2023. 4. 15. [ CSS ] Grid 행과 열 개수 설정 - auto-fill, auto-fit / minmax 활용 아래의 글을 보면 grid 설정법에 대해 작성해 놓았다. 하지만 화면크기, 요소의 수에 따라 자동으로 요소의 크기가 변하게 만들게 만드는 법은 정리를 안 해서 따로 또 글을 쓴다.... [ CSS ] Grid 사용하기 , element 위치설정법 css에서 element를 배치시키는 방법에는 grid와 flexbox가 존재한다. flexbox의 경우 element들을 한 번에 특정 위치로 옮기는 것은 쉬우나 그리드모양으로 배치하긴 쉽지 않아 flexbox대신 grid를 사용한다. [ yebeen-study-note.tistory.com 이번엔 grid-template 설정 시 사용할 수 있는 auto-fill, auto-fit에 대해 정리해 볼 것이다. [ auto-fill , auto-fit ] aut.. 2023. 4. 7. [ CSS ] min-content, max-content [ min-content, max-content ] css 코드를 작성하다보면 요소 안의 텍스트나 이미지 등의 크기에 따라 요소의 크기를 정하고 싶을 때가 있다. 이때 사용할 수 있는게 min-content와 max-content이다. min-content :콘텐츠가 튀어나가지 않는 선에서 요소가 가질 수 있는 가장 작은 크기로 설정한다. : 수평 방향의 콘텐츠인 텍스트의 경우 글자수가 가장 긴 단어만큼 작아진다. max-content : 사용 가능한 공간이 주어질 때 박스가 가질 수 있는 가장 이상적인 크기로 설정한다. : 컨텐츠가 튀어나가는 일없이 콘텐츠의 축 방향으로 쭉 뻗으면서 가질 수 있는 가장 작은 크기로 수평 방향의 컨텐츠인 텍스트인 경우 줄 바꿈 되지 않고 쭉 뻗은 길이이다. 위에 그림에서.. 2023. 4. 7. [ CSS ] fr, Fraction, minmax() [ fr ] 그리드 트랙 사이즈로 사용되는 단위로 그리드 컨테이너에서 사용 가능한 공간을 비율로 나눠 설정한다. 아래 예시를 통해 살펴보자 grid-template-columns:1fr 1fr 2fr 1fr로 설정할 경우로 사용할 수 있는 공간을 1:1:2:1 비율로 공간을 가지게 된다. 그렇다면 400px의 사용공간을 가지는 그리드에 grid-template-columns : 40px 1fr 2fr 1fr로 설정하면 어떻게 그리드가 설정될까? 위에서 언급한 것처럼 사용 가능한 공간에 대한 비율이기에 400px공간에서 40px를 뺀 나머지 공간인 360px를 가지고 1:2:1 비율로 공간을 가지게 된다. [ minmax() ] 앞서 이야기 한 것처럼 fr는 가지고 있는 공간 ( 사용 가능한 공간 )을 .. 2023. 4. 6. [ CSS ] Grid 간단하게 설정하기 아래 글에서 소개했던 방법 중 grid 사용하기 위한 설정 1,2를 하고 HTML 요소들 원하는 grid 위치에 삽입하기 - 1 의 방법을 채택하면 써야할 코드가 생각보다 많아진다. 2번과 4번 방법 또한 라인을 생각하면서 코드를 짜야하기에 실수를 하는 일이 많아지는데 이를 해결하기위한 방법을 소개해볼까한다. [ CSS ] Grid 사용하기 , element 위치설정법 css에서 element를 배치시키는 방법에는 grid와 flexbox가 존재한다. flexbox의 경우 element들을 한 번에 특정 위치로 옮기는 것은 쉬우나 그리드모양으로 배치하긴 쉽지 않아 flexbox대신 grid를 사용한다. [ yebeen-study-note.tistory.com grid-template을 사용해 grid 사.. 2023. 4. 6. [ CSS ] Grid border 만들기 grid를 사용하다 보면 아래처럼 element를 감싸는 선이나 element 간의 간격을 두고 싶을 때가 있다. 이때 우리는 흔히 아래 코드의 7~8번째 라인처럼 자식 element(main속 div들) 자체에 border를 주면 되지 않을까?라는 생각을 하게 된다. 하지만 위와 같은 코드 결과는 아래의 사진처럼 header와 column, column과 nav 등의 사이에 border가 겹쳐 border의 두께가 달라진다. 물론 각 element의 border 두께를 다르게 주면되겠지만 그러면 설정해야 하는 border 두께 양이 너무 많아진다!!!! ( 이런 귀찮은 상황이 매우 싫은 편... ) 이럴 경우에는 gap과 padding을 사용하면 된다. gap은 행과 열 사이의 간격을 설정하는 속성으로.. 2023. 4. 6. [ CSS ] Grid 사용하기 , element 위치설정, content와 grid 위치설정 css에서 element를 배치시키는 방법에는 grid와 flexbox가 존재한다. flexbox의 경우 element들을 한 번에 특정 위치로 옮기는 것은 쉬우나 그리드모양으로 배치하긴 쉽지 않아 flexbox대신 grid를 사용한다. [ grid 사용하기 위한 설정 1 - display 변경 ] //부모 element가 자식 element를 배치시키기 위해 부모의 display를 grid로 변경 display:grid [ grid 사용하기 위한 설정 2 - 원하는 grid의 칼럼 수와 행 수, 크기 설정 ] grid-template-columns : 만들고 싶은 칼럼 수에 맞게 너비 지정 grid-template-rows : 만들고 싶은 행 수에 맞게 높이를 지정 : 높이 지정을 안 할 경우 안에 들.. 2023. 4. 5. 이전 1 2 다음
