본문 바로가기

www/CSS_tip51

table-layout 속성을 이용하여 테이블 고정하기 table-layout 속성값을 fixed로 지정하면 셀안의 데이터가 길어서 지정한 너비 이상으로 셀을 밀어버리는 것을 방지합니다.보통 셀안의 내용이 한글인 경우 공백이 중간 중간에 들어가므로 자동으로 지정한 너비에서 줄바꿈이 일어납니다. 셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다. 테이블의 너비가 200픽셀로 셀안의 내용에 비해서 좁더라도 아래와 같이 자연스럽게 줄바꿈이 일어납니다.셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.반면 홈페이지 주소와 같이 영문으로 공백이 없는 경우는 셀을 밀어버리는 현상이 발생합니다. http://www.homejjang.com/09/border_collapse.php 위의 테이블과 똑같이.. 2014. 1. 1.
table - 테이블의 선을 단선으로 border-collapse 속성 border-collapse는 테이블 또는 셀의 테두리선 표시방법을 지정하는 속성입니다.속성값으로는 collapse와 separate를 사용할 수 있습니다.collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 합니다.separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현 합니다. border-collapse:collapse; 위와 같이 border-collapse 속성갑을 collapse로 지정하고 border 속성을 추가적으로 지정하면 아래와 같이 깔끔한 테이블을 출력할 수 있습니다.border-collapse:collapse;border-collapse 속성은 테두리선의 표시방법만 지정하므로 반드시 border 속성으로 구체적인 테두리선의 스타일을 지.. 2014. 1. 1.
table - CSS를 이용한 table 응용 테이블을 이용하여 레이아웃을 잡는것이 바람직 하지 않다고 하더라도 아직까지는 테이블을 이용한 레이아웃이 여전히 많이 쓰이고 있습니다. 이는 새로운 기술을 익히기가 힘들다는 점도 있지만 웹브라우저들이 CSS를 아직까지 완벽하게 지원하지 못하는 이유도 있습니다.그러므로 테이블은 여전히 많이 쓰이게 되는 중요한 태그이고, 이 테이블을 좀더 정교하게 다루기 위해서는 CSS를 사용해야 합니다.테이블에서 자주 사용하는 CSS를 팁 형식으로 계속적으로 소개해 나가겠습니다.테이블 태그 자체에서 사용하는 CSS 속성으로는 대표적으로 border-collapse 와 table-layout 이 있습니다.border-collapse 는 테이블의 경계선을 어떻게 표시하느냐를 지정하는 속성이고 table-layout 은 테이블 .. 2014. 1. 1.
block-level과 inline-level HTML element 를 크게 2가지로 구분해보면 head element 처럼 화면에 표시되지 않은 element가 있고 div, p, table...과 같은 element 처럼 화면에 표시되는 element로 나눌 수 있습니다. 그릭 화면에 표시되는 element를 다시 두 가지로 분류하면 block-level과 inline-level로 구분할 수 있습니다. 화면에 표시되지 않는 element화면에 표시되는 elementblock-levelinline-levelblock-level과 inline-level의 구분 block-level과 inline-level을 가장 쉽게 구분할 수 있는 방법은 한 라인에 복수로 올 수 있나의 여부입니다. block-level element는 한 라인에 하나만 위치할 .. 2014. 1. 1.

티스토리툴바