신형준의 기술 블로그 신형준의 기술 블로그

프론트엔드/CSS

• input date 캘린더 꾸미는법 #date #calendar #캘린더 #input

  프론트엔드/CSS 2023. 7. 20. 23:53

  .m-input-date.type01 input { padding:10px 16px 10px 16px; border-radius:10px; color:rgb(75,86,117); background-color:rgb(249,249,249); border: 1px solid #eee; } .m-input-date.type01 input[type="date"]::-webkit-calendar-picker-indicator, .m-input-date.type01 input[type="date"]::-webkit-inner-spin-button, .m-input-date.type01 input[type="date"]::-webkit-clear-button { color: rgba(0, 0, 0, 0); opac..

  Read More

• html css 여러줄 말줄임 처리

  프론트엔드/CSS 2023. 2. 2. 14:38

  # What? 내용 n줄부터 말줄임처리하고싶을 때 사용 # How? display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;

  Read More

• SVG background로 넣기

  프론트엔드/CSS 2022. 1. 24. 19:49

  # What? SVG를 ie도 호환되게 배경이미지로 까는방법 # How? 1. svg 파일 준비 2. svg파일을 코드 에디터로 열어 통째로 복사해서 base64 인코딩하기 https://www.base64encode.net/ Base64 Encode - Online Tool Base64 encode Encode base64 string from 'base64 encoder' to 'YmFzZTY0IGRlY29kZXI=' www.base64encode.net 3. background-image: url('data:image/svg+xml; base64, base64인코딩 결과물'); 와 같은 형태로 붙여넣기

  Read More

• 02. 글자 꾸미기

  프론트엔드/CSS 2020. 9. 2. 01:11

  # What? font-size : 폰트크기(14px, 16px..) font-weight : 폰트굵기(medium, bold...) font-family : 글씨체 line-height : 줄간격 # How? 어떻게 꾸미는데? @ index.html 폰트 사이즈 폰트 굵기 글씨체 줄간격이 뭘가? 차이점이 뭘가? 줄간격이 뭘가? 차이점이 뭘가? @ style.css .text01 {font-size:40px;} .text02 {font-weight:bold;} .text03 {font-family:monospace;} .text04 {line-height:30px;} @ Practice 문제 화면에 다음과 같은 글씨 띄우기 이것은 48px 굵은 글씨 이것은 24px

  Read More

• 01. CSS

  프론트엔드/CSS 2020. 9. 1. 19:49

  # What? 이게 뭔데? Cascading Style Sheets의 약자로, html 문서를 꾸밀 때 사용함. # How? 어떻게 쓰는데? 일반 태그 class명이 text id명이 text * 코드 참고 : https://github.com/ShinHyungJune/publishing-course/tree/css-01-init

  Read More