본문 바로가기

디자인/CSS 강좌

(20)

CSS 기초강좌 10 (Box Model) BoxModel CSS에서의 모든 요소는 하나의 박스(box)로 생각해 볼 수 있습니다. Boxmodel 이라는 말은 주로 layout이나 디자인 할때 주로 고려됩니다.. CSS에서 Boxmodel은 어떤 HTML 요소로 감싸진 하나의 박스를 말합니다. (ex, ..) 그 HTML 요소는 margin, border, padding 과 내용(content)으로 구성됩니다. 이러한 Boxmodel은 HTML요소 주변에 선을 그을 수도 있고 공간이나 여백을 채워넣을 수가 있어서 우리가 웹페이지를 디자인 할때 도움을 줍니다. 아래 이미지는 Boxmodel을 그림으로 표현한 것입니다. Margin - 경계선(border) 바깥쪽에 여백을 줄때 사용합니다. Border - 경계선입니다. Padding - 경계선(b..

CSS 기초강좌 9 (Table) CSS Tables Border 이 속성은 테이블의 경계선을 지정하기 위해 사용합니다. 아래의 예제는 테이블의 th(제목줄), td 엘리먼트를 검정색 1픽셀로 지정한 것입니다. table, th, td {border:1px solid black;} Collapse Borders border-collapse 속성은 테이블의 셀사이의 여백을 없앨때 사용합니다. table {border-collapse:collapse;} table, th, td {border:1px solid black;} Width 와 Height 는 테이블의 넓이와 높이를 정합니다. text-align: 테이블 내의 문자들의 가로방향 정렬 (left, right, center) vertical-align: 테이블 내의 문자들을 상하방향으..

CSS 기초강좌 8 (Link) CSS Links Link는 CSS 속성으로 여러가지를 표현할 수 있습니다. (예를 들면, color, font-family, background,...) link는 아래의 4가지 형태로 각기 다르게 표현됩니다. a:link - 방문한적이 없는 보통의 링크 a:visited - 방문한적이 있는 링크 a:hover - 마우스를 올렸을때의 링크 a:active - 마우스로 클릭한 순간의 링크 a태그 뒤에 붙어있는 :visited나 :hover 등은 가상클래스라고 부르는 것인데, 자주 쓰이는 것은 위의 네가지 말고도 몇개가 더 있습니다. 여기서는 이런 것이 있다는 정도만 알고 넘어가도록 하겠습니다. 예제 a:link {color: #FF0000;} a:visited {color: #00FF00;} a:hove..

CSS 기초강좌 7 (List) CSS List 속성 CSS의 리스트 속성은 ul - 순서없는 리스트 (Unordered List) ol - 순서있는 리스트 (Ordered List) 그리고 이미지 리스트의 3가지 종류가 있습니다. CSS에서 list-style-type을 정의하면 marker의 속성을 지정할 수 있으며 축약형으로 list-style로도 지정 할 수 있습니다. Property/Value Description armenian armenian 넘버링 circle 원형 넘버링 cik-ideographic 한자 넘버링 decimal 1,2,3,4, etc. decimal-leading-zero 01,02,03,04, etc. disc 안이 채워진 원형 georgian Georgian 넘버링 hebrew Hebrew 넘버링 hi..

CSS 기초강좌 6 (Font 속성) CSS Font 속성 폰트 속성은 Html이나 CSS 코딩에서 가장 많이 사용하고 있고 이름이 곧 내용이므로 특별한 설명은 필요 없을 것 같네요. Property/ValueDescriptionfont-style폰트의 이탤릭체 여부를 지정한다 (normal, italic, oblique)font-variant폰트를 작은대문자로 바꾼다 (normal, small-caps)font-weight폰트의 두께 지정 (normal, bold, bolder, lighter, 100,200,300, ...)font-size/line-height폰트크기와 줄간격 지정font-family폰트의 종류 지정-이름이 두단어 이상이면 ""로 감싼다. ("Times New Roman",Serif) 그냥 font 만을 사용해서 위의 ..

이전 1 2 3 4 다음

티스토리툴바