좌충우돌 웹퍼블리셔 일기

1번과 2번은 특수문자의 종류에 따라서 결과가 다를 수도 있으니 주의하세요~

1. 아무 처리도 하지 않았을 경우,
IE - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨.
(단 특수문자의 종류에 따라서 줄바꿈이 되는 것도 있습니다. 예를 들어 %는 줄바꿈이 됩니다.)
 

FF - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨.

2. word-break:break-all
IE - 숫자, 특수문자, 영문, 한글 모두 강제 줄바꿈됨
(단, 특수문자의 종류에 따라서 줄바꿈이 되지 않는 것도 있으니 주의해야함)
 

FF - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨.

3. word-break:keep-all
IE – 영문,숫자,특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 안됨, 한글 단어 단위로 줄바꿈 됨.

FF – 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 안됨, 한글 강제 줄바꿈 됨.

4. word-wrap:break-word
IE - 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 됨. 영문 단어 단위로 줄바꿈됨. 한글 강제 줄바꿈 됨.

FF - 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 됨. 영문 단어 단위로 줄바꿈됨. 한글 강제 줄바꿈 됨.

5. word-break:keep-all; word-wrap:break-word
IE – 영문,숫자, 특수문자 띄어쓰기 없이 한줄로 썼을 경우 줄바꿈 됨, 영문/한글 단어 단위로 줄바꿈 됨,
 

FF - 영문,숫자, 특수문자 띄어쓰기 없이 한줄로 썼을 경우 줄바꿈 됨, 영문 단어 단위로 줄바꿈 됨, 한글 강제 줄바꿈 됨.

원본 출처:
http://butygal.blog.me/50089735557

플래시를 넣을 때에 예전에는 테두리가 생기는 것 때문에 스크립트를 사용하여 넣었었다. 하지만 이제는 object 를 사용하여서 넣으면 테두리가 생기지 않고 나온다.

이렇게 넣으면 자바스크립트를 사용하지 않고서도 플래시를 문서에 넣을 수 있다. 

NHN CSS가이드에 나오는 CSS속성 선언 순서.. 
 

그 쓰임새가 레이아웃과 관련이 높은 것으로 부터 시작하여
레이아웃과 무관한 것 순으로 아래와 같이 선언 합니다.
이 순서는 화면의 렌더링 효율보다는 유지보수의 이점 때문에 제안되었으며
권장하는 수준 입니다.
아래 제시된 속성들과 짝을 이루는 관련 속성들은 etc로 분류하여
따로 기술하지 않고 되도록 함께 기술합니다.
예를 들면 position 속성과 left, right , top, bottom 속성은
서로 연관된 속성이므로 etc로 분류하지 않고 position 다음에 기술합니다.

1. display : 표시
2. float : 흐름
3. position : 위치
4. width & height : 크기
5. margin & padding : 간격
6. border : 보더
7. font : 폰트
8. background : 배경
9. etc : 기타

아래 태그는

<div>div1</div>
<div>dIv2</div>
<div>div3</div>

웹 브라우저에 아래와 같이 표시된다.

반면에 아래 태그는

<span>span1</span>
<span>span2</span>
<span>span3</span>

웹 브라우저에 아래와 같이 표시된다.

이 둘 사이에 나타나는 가장 큰 차이는 줄 바꿈 여부이다. div 태그는 줄바꿈되고, span 태그는 줄바꿈되지 않는다.

div 태그가 줄바꿈되는 이유는 CSS display 속성 기본 값이 block이기 때문이고, span 태그가 줄바꿈되지 않는 이유는 CSS display 속성 기본 값이 inline이기 때문이다.

아래처럼 반대로 설정하면

div {
  display: inline;
}

span {
  display: block;
}

웹 브라우저에 아래와 같이 표시된다.

block과 inline의 차이점은 줄바꿈만은 아니다.

• block으로 설정하면 줄바꿈 되고, inline으로 설정하면 줄바꿈이 되지 않는다.
• block으로 설정하면 상/하 margin과 padding 속성을 사용할 수 있지만, inline으로 설정하면 상/하 margin과 padding 속성을 사용할 수 없다.
• block으로 설정하면 width, height 속성을 사용할 수 있지만, inline으로 설정하면 width, height 속성을 사용할 수 없다.

출처: 딤돌 - 지구에 거꾸로 매달리기

추가
inline 속성은 li 등에  이미지를 넣어 돌릴경우 빈 여백이 생긴다. 이것때문에 평소 이 태그를 자주 쓰지 않았었는데 float 속성은 div 높이값을 인식하지 못하기 때문에 해결 방안을 적어놓는다.

이미지 자체에 vertical-align:top; 을 먹이면 빈 여백이 사라지고 ie6, 7 에서도 같은 사이즈의 결과물을 얻을 수 있다.