본문 바로가기

Internet World/HTML/CSS

[CSS] 텍스트 줄바꿈 처리 word-break, white-space 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면 이.. 더보기
[웹표준] HTML 문서 안에 플래시 넣기 플래시를 넣을 때에 예전에는 테두리가 생기는 것 때문에 스크립트를 사용하여 넣었었다. 하지만 이제는 object 를 사용하여서 넣으면 테두리가 생기지 않고 나온다. 이렇게 넣으면 자바스크립트를 사용하지 않고서도 플래시를 문서에 넣을 수 있다. 더보기
[CSS] 쓰고 싶지 않지만,,,,, IE 버전별 핵 1. Star 핵 : IE6, IE7 일반적으로 *뒤에 스타일을 적어주면 IE6 과 7에서만 적용이 된다. .selector {margin:100px; *margin:90px;} 2. _(언더바) 핵 : IE6 정말 사용할 일이 많은 언더바 핵, 크로스브라우징 작업을 하다보면 정말로 쓸일이 많은 아주아주 유용한 핵이다. 크로스브라우징 하려면 절대적으로 꼭 알아야 할 핵 .selector {margin:100px; _margin:90px;} 3. 응용편 위의 두가지를 이용하면 가각의 브라우져의 구미에 맞게 알맞은 핵을 적용할 수 있다. 우선 호환모드로 작동하지 않게 위의 meta값을 적용해주고 .selector {margin:100px; *margin:90px; _margin:110px;} 위와 같이 스타.. 더보기
CSS 기본기 선택자 CSS에서의 선택자의 종류는 다양하다. 하지만 주로 사용하게 되는 선택자는 3가지로 압축할 수 있다. 우선 간략하게 이야기하자면, 태그명, 클래스명 그리고 아이디를 들 수 있다. 우선 태그명은 해당 태그명을 가진 모든 앨리먼트를 선택할 때 유용하게 사용된다. 예를 들면, p {margin:0; font-size:13px;}위와 같이 사용하게되면 p라는 태그명을 가진 모든 앨리먼트에 margin과 font-size가 적용된다. 이 방법은 CSS를 초기화 할 때 사용하기 좋다. 두번째로는 클래스명인데 이 것이 가장 많이 사용하는 방법인 것 같다. 우선 다음과 같이 태그에 클래스명을 주고 또 다음과 같이 선택자를 사용해 접근할 수 있다. .selector {border:1px solid #FAA;}위와.. 더보기
[CSS] white-space 속성 white-space 정의 값 normal / pre / nowrap / inherit 초기값 normal 적용 Block level 요소들 상속 가능 백분율 사용 불가능 미디어 vicible 값설명 norma 연속 공백과 줄바꿈을 통합(정상) pre 연속 공백 통합하는 것을 방지 (원문대로) nowrap 연속 공백은 통합되지만, 줄 바꿈은 통합되지 않음 (줄바꿈 없음) inherit 부모 요소의 값을 상속하도록 지정 더보기

반응형