CSS 관련 질문과 답변 몇 개 : 어설픈 FAQ

자주 놀러가는 miniwini의 질문 게시판에 올라온 글들 중에 CSS에 관련된 질문 몇개를 모아서 답변을 정리해 봤다.
오늘은 10개만 해BoA요.
원글을 따라가보면 재미있는 답글이 있는 글도 꽤 있다. 🙂

  1. 가로방향으로 4칸. 세로방향으로 10줄짜리 표를 div로 어떻게 해야되죠?
  2. 테이블 안쪽선만 나오게 하는 css가 있을까요?
  3. css 를 이용한 테이블 중앙정렬 법 아시나요?
  4. 한글 영문에 따라 폰트 지정이 가능한가요?
  5. css파일에서 글자 가로 간격을 조절하고 싶어요
  6. 파이어폭스에서 css가 안먹히는 문제..
  7. 폼태그가 테이블에 영향을 미치지 않게하는 css 아시는분~
  8. 파이어폭스에서 css가 안먹히는 문제..(2)
  9. CSS에서 table의 cellpadding, cellspacing 값 설정하기
  10. div로 레이아웃을 만들시 레이아웃 중간 정렬 방법

가로방향으로 4칸. 세로방향으로 10줄짜리 표를 div로 만들려고 하면 어떻게 해야되죠?

어떤 내용이 들어가는지는 모르겠지만 표의 규모로 봐서는 data table 인 것 같습니다. 그럴 경우엔 그냥 table을 사용하는 것이 옳습니다.


테이블 안쪽선만 나오게 하는 css가 있을까요?

다음 스펙을 참고하시면 됩니다.
http://www.w3.org/TR/html4/struct/tables.html#h-11.3.1

<table frame="void">
<tbody>
<tr>
<td>void입니다</td>
</tr>
</tbody>
</table>

css 를 이용한 테이블 중앙정렬 법 아시나요?

table에 다음과 같은 속성을 지정해주면 됩니다.

table {
  margin: 0 auto;
}

잘 되지 않는 경우는 해당 문서의 DTD를 확인해 보세요.
DTD가 선언되어 있지 않거나 잘못되어 있다면 작동하지 않을 수 있습니다.
HTML 4.0 DTD
XHTML 1.0


한글 영문에 따라 폰트 지정이 가능한가요?

언어에 따라 글꼴 지정하기“를 참고하세요.


css파일에서 글자 가로 간격을 조절하고 싶어요

글자 사이를 조절하고 싶다면 이렇게

.class {
    letter-spacing: 0.1em;
}

단어 사이만 조절하고 싶다면 이렇게

.class {
    word-spacing: 0.1em;
}

아 혹시 줄간격을 조절하고 싶다면 이렇게

.class {
    line-height: 180%;
}

각 단위들은 알아서 조절해야 해요.
그리고 다음 링크를 참고하세요.
http://www.w3.org/TR/CSS1#word-spacing


파이어폭스에서 css가 안먹히는 문제..

파이어폭스로 보니깐 css가 잘 안먹네요.
BODY {margin:5px}

속성 뒤에 “;”를 꼭 넣어서 닫아주세요.

body {
    margin: 5px;
}

폼태그가 테이블에 영향을 미치지 않게하는 css 아시는분~

폼태그를 td 안에 넣으면 공백이 생기잖아요
그 공백을 css로 없앴던거 같은데…

tr 사이에 form을 넣는 일은 그만하시고 다음과 같이 지정해 주면 됩니다.

form {
    margin: 0;
    padding: 0;
}

파이어폭스에서 css가 안먹히는 문제..(2)

<style type=”text/css”>
.11px_red {font-size:9pt ; font-weight:bold ; color:red}
</style><span style=”font-size:9pt ; font-weight:bold ; color:red”>가나다라마바사아</span><br />
<span class=”11px_red”>ABCDEFGHIJKLMN</span>
위에소스를 보시면 두개가 똑같이 나와야 하는거 아닌가요?
익스에서보면 두개가 똑같이 나오는데
파이어폭스에서는 위에꺼는 정상적으로 나오는데 아래는 스타일이 적용이 안되네요.
어떻게해야지 파이어폭스에서도 정상적으로 보이나요?

class의 첫 글자가 숫자로(11) 시작하면 안됩니다.
영문자로 시작하는 class name을 지정해주세요.CSS에서 table의 cellpadding, cellspacing 값 설정하기

table 태그에 border, cellpadding, cellspacing 의 값을 CSS에서 지정하는 법을 알려주세요.
그리고.. img 태그에 border=0 붙이는 CSS도 잊어버렸어요. 그것도 알려주세요 ^^

table, th, td {
    border-collapse: collapse;
    padding: 0;
}
img {
    border: 0;
}

div로 레이아웃을 만들시 레이아웃 중간정렬방법

화면 정 중앙에 위치하는 block“을 참고하세요
(via 현석님)