noimage

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


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

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

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


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

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


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

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

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

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

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


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

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

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


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

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

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


파이어폭스에서 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도 잊어버렸어요. 그것도 알려주세요 ^^


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

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

  • tux

    디자이너들한텐 이런 간단간단한 팁들이 훨씬 약이 될거 같네요. 암기가능한것들. -_-bbbb

    덧1. 스킨 굿! 텍스트필드에 라운드 처리.. 멋짐. (퍼갈태야!)
    덧2. 테이블 안쪽선 나오는 CSS 부분의 예제 링크가 잘못…;;)

  • 웁스~
    꼼꼼히 눌러보셨구나~ ㅎㅎ
    h가 빠져서 고쳤어요~ 라운드 귀엽져 ^^*
    물론 IE에서는 안보이지만..T_T

  • Pingback: Confluence: XHTML/CSS()

  • 이런 걸 정리해서 올리시는 쿠키님의 센스!
    저는 귀찮아서 이런 게 잘 안되요. ^^;

  • 미니위니 보다가 그냥 생각나서 해봤어요 ^^; 나름대로 재미있을 것 같아서~

  • 멋쟁이~