주석노트

넘치는 텍스트 점으로표시 넘치는 텍스트를 점으로 표시해주는 소스입니다. 한줄일때 점으로 표시하는 방법과여러줄일때 점으로 표시하는 방법이 있습니다. 단,1. width가 고정적으로 되어있어야지 잘 됩니다.2. 한줄일 경우에는 아래줄로 내려가는 것을 막기위해 white-space: nowrap 등이 필요합니다.3. overflow: hidden; 을 사용해 영역을 안보이게 숨겨주어야 합니다.4. 테이블에 적용시에는 table-layout:fixed;를 테이블에 넣어줘야 합니다.5. IE는 테이블에서는 table-layout:fixed도 잘 안먹히는것 같습니다. 상황에 따라서 display: block; 또는 display: inline-block으로 설정해서 사용해야 합니다. 밑에 소스로 하면 익스쪽에서는 ..

text-indent text-indent 속성은 들여쓰기를 해주는 효과를 줍니다. 문단의 첫번째 줄에 지정한 만큼 들여쓰기를 해줍니다. 연습소스css123456789101112div { width: 200px; border: 1px solid red;}#div_1 { text-indent: 20px;}#div_2 { text-indent: -10px;}cs html123456우리 한때 자석 같았다는 건 한쪽만 등을 돌리면 멀어진다는 거였네.가진 게 없던 내게 네가 준 상처 덕분에 나도 주인공이 돼보네 in a sad love story.우리 한때 자석 같았다는 건 한쪽만 등을 돌리면 멀어진다는 거였네.가진 게 없던 내게 네가 준 상처 덕분에 나도 주인공이 돼보네 in a sad love story.우리..

word-wrapword-wrap 속성은 텍스트가 너무 긴 경우 끊어서 줄바꿈으로 표시해주는 속성이다. word-break 속성과의 차이점은 아시아언어의 줄바꿈은 word-break 사용하고 비아시아 언어의 줄바꿈은 word-wrap속성을 사용한다. 아시아언어란 CJK(Chinese, Japanese, Korean)을 말한다. normal : 기본값으로 줄바꿈을 안해준다. break-word : 텍스트가 너무 긴 경우 끊어서 줄바꿈을 해준다. 연습소스css123456789101112131415161718192021222324#div_1 { width: 100px; border: 1px solid gray; word-wrap: normal}#div_2 { width: 100px; border: 1px so..

word-breakword-break는 텍스트들을 줄을 바꾸면서 표시해야 할때 텍스트를 어떤식으로 줄바꿈 해줄지 정하는 속성. break-all : 문자 단위로 줄바꿈 - 문자 단위로 줄바꿈을 해주는 속성 문자를 강제로 줄바꿈을 해준다. keep-all : 단어 단위로 줄바꿈 - 단어 단위로 줄바꿈을 해준는 속성 단어단위로 강제로 줄바꿈을 해준다 잘 이해가 안될때는 역시 테스트소스로 보는게 더 빠르다....! :) word-break 연습소스css12345678table { width: 100%; table-layout: fixed}td { border: 1px solid gray}cs html12345678910111213141516171819202122232425262728 word-break:bre..

글자(text) 속성color색상red, #FF0000direction방향ltr, rtlline-height줄 간격150%letter-spacing글자 간격-0.1pxtext-align정렬left, right, center, justifytext-decoration텍스트 장식none, underline(밑줄), overline(윗줄),line-through(중간선), blink(깜빡임)text-indent들여쓰기20pxtext-transform대소문자 지정none, capitalize(첫번째 대문자), uppercase(모두 대문자), lowercase(모두 소문자)word-spacing단어간격1px 연습소스 css12345678table { width: 100%; table-layout: fixed}t..

css우선순위1. 속성 값 뒤에 !important 를 붙인 속성2. HTML에서 style을 직접 지정한 속성3. #id 로 지정한 속성4. 클래스, :추상클래스 로 지정한 속성5. 태그이름 으로 지정한 속성6. 상위 객체에 의해 상속된 속성 css 적용이 안될때에는 우선순위를 살펴보자! :)