본문 바로가기

전체 글314

CSS 문법 CSS 문법CSS 구문을 이해하기 위해서는 선택자(selector), 속성(property) 그리고 속성값(value) 이 3가지를 이해하여야 합니다. CSS 구문은 아래의 그림처럼 선택자(selector)와 선언으로 구성되며, 선언은 속성(property)과 값(value)으로 구성됩니다.우리말로 선택자라고 하면 어감이 좀 이상한데 보통의 경우 선택자는 HTML 태그 중 하나 입니다. 위의 그림에서는 태그가 선택자로 사용되었습니다. CSS 고급단계에서는 속성의 상속(inherit)과 겹침(cascade)을 제대로 이해해야 하기에 이 선택자(selector)의 개념이 아주 중요해집니다. 위에서 제시한 예제의 의미는 문단(p)의 색상(color)을 red로 지정하라는 말입니다. 속성과 속성값은 계속적으로 .. 2014. 1. 1.
텍스트 - color / direction / backgroud-color / line-height / letter-spacing / decoration / indent / word-spacing CSS 텍스트 colorcolor 속성을 이용하여 텍스트의 색상을 지정할 수 있습니다.이 문단은 붉은색으로 지정됩니다.이 문단은 붉은색으로 지정됩니다.한 문단 전체에 지정하지 않고 일부에만 색상을 지정할려면 태그를 사용하여 지정하면 됩니다.문단 전체의 색을 지정하지 않고 일부에만 색을 지정할 수 있습니다.문단 전체의 색을 지정하지 않고 일부에만 색을 지정할 수 있습니다.테이블 안에도 사용이 가능합니다. 이 셀안의 텍스트트 붉은색으로 지정됩니다. 이 셀안의 텍스트트 붉은색으로 지정됩니다.하이퍼 링크의 색상을 지정할 수도 있습니다. 홈짱닷컴은 홈페이지 제작을 위한 가이드 역할을 합니다. CSS 텍스트 directiondirecton 속성을 사용하면 글자의 방향을 지정할 수 있습니다.direction 속성값을.. 2014. 1. 1.
텍스트에 적용하는 CSS 속성 HTML문서에서는 아무래도 텍스트가 가장 많은 비중을 차지합니다.HTML태그는 텍스트의 스타일 표현에 한계가 있으므로 반드시 CSS를 익혀서 텍스트의 스타일을 지정하여야 합니다.텍스트의 스타일을 지정하기 위한 속성들은 아래와 같습니다.속성속성값설명colorred, #FF0000텍스트 색상directionltr, rtl텍스트 방향line-height150%줄 간격letter-spacing-0.1px글자 간격text-alignleft, right, center, justify텍스트 정렬text-decorationnone, underline, overline, line-through, blink텍스트 장식text-indent20px들여쓰기text-transformnone, capitalize, uppercas.. 2014. 1. 1.
Box Model - Margins, padding and borders 각각의 엘리먼트를 문서에 배치하기 위해서는 Box Model 이라고 부르는 margin, padding 그리고 border 속성을 전체적으로 이해해야 합니다. 위의 그림에서 중요한 4가지는 content, padding, border, margin 입니다.content : 순수한 콘텐츠 padding : 콘텐츠와 경계선 사이의 여백 border : 경계선 margin : 경계선 밖에서 박스모델의 최종 경계선까지의 여백 Box Model을 설명하기 위한 예제 이 예제에서 padding값과 margin값을 변경해 보면 이 값이 어떤 부분을 의미하는지 이해할 수 있습니다.Box Model을 설명하기 위한 예제 ※출처 : http://www.homejjang.com/ 2014. 1. 1.

티스토리툴바