본문 바로가기
반응형

css124

counter-reset, counter-increment 속성 사용법 counter-reset, counter-increment 속성 사용법 얼마 전에 content 속성을 배우면서 counter 속성값이 잠시 나왔었죠. [css] content 속성 사용법 counter는 html문서에 쓰지 않고도, css로 숫자를 생성하면서 자동으로 번호를 매기는 역할을 합니다. counter를 쓸 때는 counter-reset 속성과 counter-increment 속성과 함께 사용합니다. 오늘은 counter-reset과 counter-increment 속성 사용법을 배우고 다음 시간에 counter(), counters() 사용법을 알아볼게요. counter-reset 속성 카운터를 사용하려면, counter-reset으로 먼저 카운터 이름과 시작값을 설정 해야 합니다. ▶문법 .. 2014. 9. 1.
[css] content 속성 사용법 [css] content 속성 사용법 이전 시간에 :before, :after 가상 요소를 배우면서 두 요소는 주로 content 속성과 함께 사용한다고 했습니다. [css] - :before , :after 가상 요소 content 속성은 html 문서에 쓰지 않고도 css로 내용을 생성하는 역할을 합니다. ▶content 속성 브라우저 지원 정보 IE8+, chrome 1.0+, firefox 1.0+, safari 1.0+, opera 4.0+ ie8은 doctype 선언해야 함. ▶ content 속성값 content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inhe.. 2014. 8. 25.
:before , :after 가상 요소 [css] :before , :after 가상 요소 지난 시간엔 가상 클래스 :first-child와 :last-child 선택자를 배웠습니다. [css] - :first-child, :last-child 선택자 오늘은 가상 요소 :before 와 :after 선택자 입니다. 두 선택자는 요소에 내용을 생성하는 역할을 하는데 html 문서에 쓰지 않고도, css로 내용을 삽입할 수 있습니다. (주로 content 속성과 함께 사용) :before 요소의 앞에 내용을 생성 함 :after 요소의 뒤에 내용을 생성 함 위의 두 가상 요소는 css2에 도입된 요소이며, css3에서는 ::before ::after 라고 씁니다 : 와 :: 차이는? ::는 css3에서 가상 클래스와 가상 요소를 구분하기 위해 도.. 2014. 8. 21.
:first-child, :last-child 선택자 :first-child, :last-child 선택자 어제는 css 선택자의 종류를 알아 보았는데 css 선택자, 선택자 종류와 사용법 오늘은 의사 클래스 선택자 중에 :first-child 와 :last-child 선택자를 알아 보겠습니다 먼저 의사 클래스는 영어로 pseudo-class라고 하는데 pseudo의 뜻을 영영사전에서 살펴 보면 다음과 같습니다. not real, but pretending to be real 진짜가 아니지만, 진짜인 척하는.... -맥밀란 사전 참조- pseudo-class를 의사 클래스, 가상 클래스라고 쓰곤 하는데... 가상 클래스라고 해야 의미가 좀 더 와 닿는 것 같아 이후부터는 가상 클래스라고 하겠습니다~ 가상 클래스와, 가상 요소를 쓰는 이유 기존에 있던 선택자.. 2014. 8. 20.
css 선택자, 선택자 종류와 사용법 css 선택자, 선택자 종류와 사용법 오늘 정리하는 부분도 css 기초로, 가장 초반에 배웠어야 할 부분인데 정리가 상당히 늦은 감이 있네요.^^ css 선택자 종류(대표적으로, 타입 선택자, id 선택자, class 선택자)와 선택자 사용 방법까지 알아 볼게요. 너무 간략히 정리한 부분은 다음에 또 자세히 다루어 볼게요~ CSS 구문은 다음과 같습니다. 선택자 { 속성 : 속성값 ; } selector { property : value ; } 여기서, 선택자란 무엇일까요? 무언가에 스타일을 주고자 할 때 대상을 지정해야 하는데, 이걸 선택자라고 합니다. 선택자의 종류 유형 선택자(type selector) : 요소 이름 예: p {color: red} p 요소가 있는 곳은 모두 빨간색 글씨로 지정하겠다.. 2014. 8. 18.
min-width 속성, min-height 속성 사용법 min-width 속성, min-height 속성 사용법 며칠 전 max-width 속성과 max-height 속성을 알아 보았습니다. [html/css]max-width 속성, max-height 속성 알아보기 max-width, max-height가 요소의 최대 너비와 높이를 지정한다면 min-width, min-height 속성은 요소의 최소 너비와 높이를 지정합니다 이 속성 역시 주요 브라우저에서 모두 지원하며, ie6 이전은 지원하지 않습니다. (ie7은 doctype을 선언해야 함) min-width 속성 요소의 최소 너비를 지정합니다. 요소의 width 값이, min-width 값보다 작아지는 것을 방지합니다. min-width는 width 속성값을 무효화시킵니다. 예를 들어,이미지에 min.. 2014. 8. 1.
[html/css]max-width 속성, max-height 속성 알아보기 [html/css] max-width 속성, max-height 속성 알아보기 max-width와 max-height는 어떤 요소의 최대 너비와 높이값을 설정하는 속성입니다. 요즘에는 반응형 웹디자인에서, 화면에 따라 다르게 스타일을 적용할 때 자주 사용합니다. 두 속성 다 주요 브라우저에서 지원하지만 ie6 이전 버전은 지원하지 않습니다. (ie7은 doctype을 선언해야 함) max-width 속성 어떤 요소의 최대 너비를 지정합니다. 요소의 너비값이, max-width 너비값보다 커지는 것을 방지합니다. 즉, max-width는 width 속성값을 무효화시킵니다. 이미지 가로 너비가 500px일 때, max-width: 400px으로 설정하면 400px 이하로만 이미지가 보입니다. →max-wid.. 2014. 7. 30.
[css] outline 속성, 용도는? [css] outline 속성, 용도는? 오늘 배울 outline 속성은 border 속성과 비슷합니다. border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법) boder를 테두리라고 한다면 outline은 border 바깥 외곽선을 말 합니다. outline 속성의 용도는 요소를 두드러져 보이게 만들고자 할 때 사용 합니다. 주로, 레이아웃을 완성한 후에 문제점을 보기 위해 요소를 눈에 띄게 표시할 수 있는데요 border 선을 표시한다면, border 너비가 레이아웃에 관여하기 때문에 레이아웃이 흐트러질 수 있습니다. 하지만 outline 선의 너비는 레이아웃에 관여하지 않고, 눈에만 선이 보입니다. outline 속성 사용 법 outli.. 2014. 7. 24.
[html/css] list-style 속성 배우기 [html/css] list-style 속성 배우기 list-style-type, list-style-position, list-style-image속성 얼마전에 태그를 배우면서 항목 모양을 선택하는 type 속성을 배웠습니다. 태그는, type : 1 / a / A / i / I 으로 순서의 종류를 선택하고, 태그는, type : disc / circle / square 으로 각 항목의 모양을 선택할 수 있었어요. 목록 태그 사용법 css에서는 list-style 속성을 사용하여 같은 기능을 구현할 수 있어요. 오히려 type 속성보다는 css로 스타일을 주는 것을 권장합니다. list-style 속성 list-style 속성은, 항목 모양의 종류, 위치, 항목에 넣을 이미지를 한꺼번에 지정할 수 있어.. 2014. 7. 14.
display 속성을 사용하여 table만들기 (css로 table, tr, td) display 속성을 사용하여 table만들기 (css로 table, tr, td) html에서는 표를 그릴 때 태그를 사용 했습니다. 가로 선을 그릴 때는 태그를, 각각 셀을 그릴 때는 태그를 사용 했고요. table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 css에서도 이와 유사하게 display 속성을 이용하여 table을 만들 수 있습니다. 하지만 css는 주로 표현에 관한 부분을 다루므로, 데이터가 들어간 테이블을 만들 때는 되도록 태그 사용을 권장합니다~ → display 속성값 display 속성값 중 table에 해당하는 부분만 정리 했습니다. 나머지 속성값은 링크 참조: display 속성 (inline, block, none, inline-block 차이) ta.. 2014. 7. 2.
반응형

티스토리툴바