본문 바로가기

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; // 뒷 배경을 부모와 같게 맞춰줌 }
인라인, 블록 레벨 태그</> 정리 2021. 2. 23. 가끔 html 목업을 하다가 쓰고있는 박스 모델이 인라인 레벨 요소인지 블록 레벨 요소인지 헷갈릴 때가 있다. 그때 볼 수 있도록 정리해두자ㅏㅏ 블록 레벨 태그 : 혼자 한 줄을 차지하는 요소. 너비나 마진, 패딩을 이용해 크기나 위치를 지정하려면 블록레벨 요소여야한다. ~ 인라인 레벨 태그 : 줄을 차지하지 않는 요소. 화면에 표시되는 콘텐츠만큼만 영역을 차지하고, 나머지 공간에는 다른 요소가 올 수 있다. 따라서, 한 줄에 여러 인라인 레벨 요소를 배치할 수 있다. css 박스 모델 : 웹 문서의 내용을 박스 형태로 정의하는 방법.
<ul> 여백 제거 방법 2021. 2. 3. 디자이너 님이 작업하신 포토샵으로 목업 되어있는 파일을 받았다! html 파일로 만든 뒤에 css를 코딩해보던 중에 문제가 발생했다. ** ul 태그에 디폴트 값으로 있는 css 요소인 왼쪽 여백이 사라지질 않는다ㅏㅏ 해결 방법. 왼쪽여백을 없애고 싶은 html 태그 내에 style="-webkit-padding-start: 0px;" 를 넣어주면 해결된다!
Wordpress 활용해보기 2021. 2. 2. 프론트 엔드 업무를 본격적으로 하기 전에, php와 워드 프레스 기반으로 프론트를 구현해보고, 필요한 부분을 수정해보면서 프론트 기능을 익히는 중이댜ㅑㅑ 할 수 있는 일부터 차근히 해보쟈 ㅎㅅㅎ 먼저, 워드프레스 테마와 플러그인을 찾아 적용하고, 자식 테마를 만들어 수정해보자ㅏㅏ 참고 : codex.wordpress.org/ko:Child_Themes ko:Child Themes « WordPress Codex Languages: English • Themes 日本語 한국어 • Français • Português do Brasil • Русский • Slovenčina • ไทย • 中文(简体) • (Add your language) 워드 프레스 Child(추가,하위,자식) 테마는 다른 테마의 기 c..
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 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원..

티스토리툴바