Carl's Tech Blog Carl's Tech Blog

Frontend

• css border 속성이 전체 크기에 영향 안주게 하는 법

  Frontend 2022. 11. 14. 23:55

  width 와 height 로 크기를 미리 잘 잡아 놓은 뒤 border 를 추가하게 되면 border 사이즈 만큼 전체 크기가 증가한다. 이를 방지하기 위해서는 box-sizing 속성에 border-box 값을 이용한다. box-sizing: border-box; ex) 전체 width 와 height 가 처음 지정한 80px 로 유지 .image { width: 80px; height: 80px; margin: 4px; border: 3px solid #fff; box-sizing: border-box; }

  Read More
• css 주석 추가하는 방법

  Frontend 2022. 11. 14. 23:53

  css 에서 주석을 달고 싶을 때가 있다. css 에서는 /* 로 시작하여 */로 끝나는 주석 처리방법을 사용한다. /* 원하는 주석 */ ex) .images { display: flex; flex-wrap: wrap; /* 여기에 주석 */ background-color: orange; }

  Read More
• css 화면 크기에 따라 줄 바뀌게 하는 법

  Frontend 2022. 11. 14. 22:23

  한줄로 사진 등이 정렬된 경우 화면이 작아짐에 따라 크기가 축소되는 것이 아닌 아래로 줄바뀜이 되도록 하고 싶을 때가 있다. 이럴 때에는 flex-wrap 속성에 wrap 값을 활용한다. ex) flex-wrap 예시 html css .images { display: flex; flex-wrap: wrap; } .image { height: 100px; width: 100px; margin: 100px; background-color: black; }

  Read More
• css 브라우저에 상관없이 초기화하는 법 ( reset css cdn )

  Frontend 2022. 11. 14. 21:50

  브라우저(chrome, firefox ... ) 마다 기본 css 의 스타일에 차이가 있다. 따라서 같은 화면을 제공하기 위해 css를 초기화 해주는 reset-css 을 활용한다. 구글에 reset css cdn 으로 검색한 뒤 jsDelivr 가 만든 사이트에 들어가거나 아래 주소에서 URL 을 복사하여 link 태그에 활용한다. https://www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Ser..

  Read More
• CSS : input tag border 안보이게 하는 법

  Frontend 2021. 12. 28. 23:37

  웹 개발을 하다보면 input 태그를 사용할 때 태그를 감싸고 있는 border를 보이지 않게 하고 싶을 때가 있다. 간단하게 border none 옵션을 주면 될꺼 같지만 input box 를 다시 클릭하면 focus 되어 border 가 살아난다. 따라서 아래와 같이 적절히 조합하여 CSS 를 사용하면 된다. input { border: none; &:focus { outline: none; } } 추가적으로 아래쪽에만 border 를 주어 위치를 표시시키는 것이 이쁜 경우가 많다. 아래와 같이 주면 CSS 를 줘본다. input { border: none; border-bottom: 1px solid black; &:focus { outline: none; } }

  Read More
• CSS : 마우스 커서 올렸을 때 포인트 표시되게 하는 법

  Frontend 2021. 12. 28. 20:52

  웹을 개발하다보면 클릭이벤트를 주는 버튼을 만들때 마우스를 위에 가져다 대면 손모양 표시가 나타나게 하고 싶을 때가 있다. 이럴때에는 간단하게 css 를 이용하여 cursor 에 pointer 를 주면 된다. 아래와 같이 css 를 수정하면 된다. button { width: 50px; cursor: pointer; }

  Read More
• CSS : 마우스 커서 올렸을 때 포인트 표시되게 하는 법

  Frontend 2021. 12. 28. 20:52

  웹을 개발하다보면 클릭이벤트를 주는 버튼을 만들때 마우스를 위에 가져다 대면 손모양 표시가 나타나게 하고 싶을 때가 있다. 이럴때에는 간단하게 css 를 이용하여 cursor 에 pointer 를 주면 된다. 아래와 같이 css 를 수정하면 된다. button { width: 50px; cursor: pointer; }

  Read More
• CSS : background image 반복 안되게 하는 법

  Frontend 2021. 12. 27. 23:46

  백그라운드 이미지를 호출하여 사용하다보면 해당 사이즈 보다 작아 연속적으로 아래와 같이 반복되는 경우가 있다. 이럴때에는 간단하게 background-repeat 을 no-repeat 로 설정하면 된다. 아래와 같다. &-image { width: 50px; height: 50px; background-image: url('~@/assets/images/home_black.svg'); background-repeat: no-repeat; } 그리고 이미지가 너무 작아 해당 크기로 꽉채우고 싶다면 아래와 같이 background-size 옵션을 cover 로 추가하면 된다. &-image { width: 50px; height: 50px; background-image: url('~@/assets/imag..

  Read More