본문 바로가기

Front-end/CSS

줄바꿈 word-break, 글자 흘러넘침 word-wrap 속성 정리 2021. 7. 2. 박스 내에 텍스트를 뿌릴 때에 가끔, 글 길이가 너무 길면 내가 의도했던 디자인과 다르게 보기싫게 글이 박스 밖으로 삐져나올 때가 있다! 그럴 때 써주는 css 속성이 word-break 이다ㅏㅏ word-break 속성 종류 word-break: normal; word-break: break-all; word-break: keep-all; normal ( 기본값 ) 기본 줄 바꿈 규칙 ( 텍스트가 길면, 박스 밖으로 삐져나온다 ) break-all 텍스트가 문자( 글자 하나하나 )단위로 잘려 아래로 줄바꿈된다 ( 글자단위가 의미없다면 주로 이거) keep-all 한중일(CJK) 텍스트에서는 단어단위로 잘려 아래로 줄바꿈된다 ( 단어 단위로 끊어져 있는게 나을 것 같다면 이걸 쓰자ㅏㅏ ) 비슷한 속성으론..
<button> default style 제거 방법 2021. 6. 8. button을 커스텀 할 때, 모오오옷생긴 네모 박스가 늘 따라붙는다! 없애보자ㅏㅏㅏ!! button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; // 뒷 배경을 부모와 같게 맞춰줌 }
<ul> 여백 제거 방법 2021. 2. 3. 디자이너 님이 작업하신 포토샵으로 목업 되어있는 파일을 받았다! html 파일로 만든 뒤에 css를 코딩해보던 중에 문제가 발생했다. ** ul 태그에 디폴트 값으로 있는 css 요소인 왼쪽 여백이 사라지질 않는다ㅏㅏ 해결 방법. 왼쪽여백을 없애고 싶은 html 태그 내에 style="-webkit-padding-start: 0px;" 를 넣어주면 해결된다!
checkbox Css로 custom 구현하기 (링크) 2021. 1. 3. webdir.tistory.com/433 폼필드(체크박스, 라디오) 디자인 #3 체크박스와 라디오버튼의 정렬과 디자인은 예전부터 골치를 아프게 하는 작업이였습니다. 관련하여 현재 애용되는 디자인 방법과 브라우저 호환성을 확보하는 방법에 대하여 알아봅니다. 체크 webdir.tistory.com developer.mozilla.org/ko/docs/Web/CSS/:checked :checked - CSS: Cascading Style Sheets | MDN :checked CSS 의사 클래스 선택자는 선택했거나 on 상태인 라디오( ), 체크박스( ), 옵션( 요소를 나타냅니다. :checked { margin-left: 25px; border: 1px solid blue; } 사용자가 요소를 체크했거나 ..
CSS 관련 유용한 페이지들 2020. 11. 23. MDN web docs 공식 사용법 사전 developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started Getting started with CSS In this article we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way. developer.mozilla.org ofcourse CSS ofcourse.kr/css-course/float-%EC%86%8D%EC%84%B1 CSS float 속성 - ofcourse 개요 float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원..

티스토리툴바