CSS 관련 책 추천 부탁드립니다.

bec7110의 이미지

레이아웃은 무조건 table면 되는줄 알고

테이블 떡칠은 물런 몇번 중첩됬는지 모르는 테이블에

여기적이 합쳐진 셀들을 가지고 웹페이지를 짜다가..

원래 다들 그런줄 알았습니다.

그래도 나름대로 파일 분리하고 들여쓰기 하고 했지만..

들여쓰기도 탭으로 하는 제 습관때문에 한줄이 모두 들여쓰기가 되는 경우도 있더군요..

그래도 그냥 편하니깐 쓰다가..

css + div로 레이아웃은 물런 모든것이 테이블 없이도 해결된다는 것을

알아 버렸습니다.

html소스를 보니 무지하게 깔끔하더군요...

그래서 css를 공부해볼까 해서..

여기에 소개된 사이트들도 들어가 보고 했지만

당췌 영어가 약한 저로써는 잘 안되더군요..

그래서 어느 분이 소개한 한빛미디어에서 나온

css포켓 레퍼런스란 책을 주문햇는데..

기대와는 달리 책도 조그만하고 너무 기능만 설명해놔서

예제와 함께 설명된 책이 보고싶어 지더군요..

원서와 한국에서 나온 책말고 번역본이 좋겠는데..

소개좀 해주십시오.

kall의 이미지

포켓레퍼런스의 풀버전(?) 이 있는것 같은데요..
http://kangcom.com/common/bookinfo/bookinfo.asp?sku=200104170004

저는 사전식으로 돼있는것도 괜찮다고 생각합니다만..
http://kangcom.com/common/bookinfo/bookinfo.asp?sku=200305290001

서점에 가서 직접 살펴 보시는게 실패할 확률이 가장 적죠 :)

----
자신을 이길 수 있는자는
무슨짓이든 할수있다..
즉..무서운 넘이란 말이지 ^-_-^
나? 아직 멀었지 ㅠㅠ

bec7110의 이미지

학교앞 교보문고에는 제가 찾는 컴퓨터 관련 서적이 없는 경우가 대부분이라서

매번 주문해서 몇일 기다렸다가 구입합니다..

이번에도 3일정도 기다렸다가 책을 받았는데..

책이 아주 마음에 들더군요..

요 근래 3권정도 책을 샀는데..반정도만 보거나 아니면 대충 읽고

책상위에 다 꼿아 두었는데..

이 책은 다 읽고 한번더 읽고 싶을 정도로 맘에듭니다..

하하..

생각보다 문자에 관련된 것들이 어렵군요...ㅜㅜ

앗..그러고 보니 어떤 책을 샀는지 말씀드리지 않았군요..

첫번째 소개해 주신 포켓레퍼런스 풀버전(한빛미디어,. Cascading Style sheets The definitive Guide)을 샀습니다.

좋은책 추천해 주셔서 감사합니다.

다른 입문자 분들도 이 책 사서 보시면 많은 도움 될듯합니다.

icanfly의 이미지

답변은 아니지만.....

table없이 div+css로 된 소스를 어디서 참고 할수 있을까요?

전 html보는걸 제일 싫어합니다. 그중에 특히 <table>의 떡칠은....-_-;

다른 사람들은 <td><tr>이런거 아구를 잘 끼워 맞추던데 전 도저히

못하겠더군요. 그래서 html볼일이 생기면 무조건 보더넣고, 보더칼라 넣습니다.

저도 보고 테이블 좋아하는 사람들 한테 좀 가르쳐 주게....

부탁드립니다. 좀 저 좀 구해주세요.. --;

Prentice의 이미지

css Zen Garden

"저게 뭐야?"라고 하실 지 모르겠지만, 오른쪽에 있는 링크들 클릭해보세요.. : )

참고로 다음은 제 북마크 중 일부입니다.

A List Apart
Alertbox
PNG transparency test
/* Position Is Everything */
QuirksMode

bec7110의 이미지

앗 어떤분이 벌써 올려 주셨네요...

저거 말고 여기 kldp에서 소개된 것인데..

box 레이아웃에 관한 링크입니다.
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

그리고 여기 게시물 2번째 페이지에 보시면

관련 내용이 있습니다.
http://bbs.kldp.org/viewtopic.php?t=27596&postdays=0&postorder=asc&highlight=%C5%D7%C0%CC%BA%ED&start=40

아참..추가로 페도라 사이트도 list구성이 맘에 들던데요..
http://fedora.redhat.com

bec7110의 이미지

검은해 wrote:
css Zen Garden

"저게 뭐야?"라고 하실 지 모르겠지만, 오른쪽에 있는 링크들 클릭해보세요.. : )

참고로 다음은 제 북마크 중 일부입니다.

A List Apart
Alertbox
PNG transparency test
/* Position Is Everything */
QuirksMode

와..좋은 정보 감사드립니다.

모두 즐겨찾기로~~

icanfly의 이미지

답변들 감사드립니다.

(내가 만든 쓰래드도 아닌데 왜 내가 답변에 감사하지? :roll: )

예전에 처음으로 html을 대충 공부할때, 레이어란걸 알고, 레이어를 여러개

배치해서, 테이블 처럼 쓰면 되겠다 싶은 생각을 한적이 있습니다. 그렇게 하면 위치 이동도 자유롭고, 독립된 사각 엘리먼트들로 구성되니까 판이 꼬일 염려도 없겠다 싶었는데, 이미 대충 비슷하게 하고 있었군요.

좋은 방법인데, 다른 사람들에게 이야기하기가 참 조심스럽군요. 다들 고집도

있고, 쓰던 연장이 젤 편하다고...참....

세벌의 이미지

Risty의 이미지

CSS2 한국어 번역 문서입니다.
http://trio.co.kr/webrefer/css2/cover.html

참고로 현재 CSS2의 일부를 수정한 CSS2.1이 나왔으니 잘 참고하시기 바랍니다. :wink:

위 페이지에는 XHTML 1.0, HTML 4.0 등의 번역문 링크도 있으니 가 볼만한 가치는 있을 것 같군요.

hackexpert의 이미지

http//trio.co.kr/

방금 들어가봤는데요..
만드신분 대단하시네요..

연세도 있으신분인 것 같은데..
멋집니다!!

이제 머리 싸메면서 w3.org 안봐도 왠만한건 찾을 수 있겠네요.. ;;
영어 공부해야 되는데 ㅡㅠㅡ

아.. 링크 감사합니다~ )

sh.의 이미지

http://w3c.or.kr/

w3c 한국 사무국 홈페이지도 있습니다 :)

digitie의 이미지

http://www.simplebits.com/archives/simplequiz/index.html

CSS와 관련된 퀴즈입니다. :)

http://www.simplebits.com/archives/css/index.html

CSS에 대한 내용이죠.

위 두 카테고리 말고 다른 카테고리도 많은 도움이 될겁니다.

showmethemoney

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.