본문 바로가기
반응형

전체 글333

[css] counter, counters사용법 [css] counter, counters 사용법 이 글은 content 속성과, counter-reset, counter-increment에 이어지는 글입니다. 즉 오늘 배울 counter(), counters()를 이해하려면 위 속성들을 이해하고 있어야 합니다. [css] content 속성 사용법 counter-reset, counter-increment 속성 사용법 복습하는 의미로 간단히 정리하면, content는 css로 내용을 생성하는 속성인데 content: counter 는 숫자를 자동으로 생성하는 역할을 합니다. counter-reset 은 카운터의 이름과 시작값을 설정하고 counter-increment는 그 시작값을 몇 단계씩 증가할지를 설정합니다. ▶ 사용 방법 요소{counter-.. 2014. 9. 2.
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.
[게임 어플 추천] 숫자 퍼즐(향수 슬라이딩 퍼즐 게임) [게임 어플 추천] 숫자 퍼즐(향수 슬라이딩 퍼즐 게임) 게임을 즐겨 하는 편은 아닙니다 근데 얼마 전에 친구가 이런 숫자 퍼즐을 보내주었어요. 한 번 궁금증이 생기면, 너무 너무 풀고 싶어하는 성격 탓에 잠도 오지 않더라고요~ 여러 분도 한 번 풀어 보세요~ 재미있으실 걸요? ^^; 이렇게 저의 숫자 퍼즐에 대한 관심이 불타오르기 시작~ 구글 플레이스 스토어에서, '숫자 퍼즐' '숫자 퍼즐 맞추기'라고 검색해 보았더니, 위와 같은 유형의 숫자 퍼즐은 나오지 않고 2048퍼즐과, 향수 슬라이딩 퍼즐 게임이 나왔습니다. 저는 향수 슬라이딩 퍼즐 게임을 설치해 보았어요. 향수 슬라이딩 퍼즐 게임(Sergio Andre Fagundes) 사용 설명서는 다음과 같습니다. 향수 슬라이딩 퍼즐 게임 사용법 New .. 2014. 8. 31.
[html] blockquote 태그(인용문 꾸미기 5가지) [html] blockquote 태그(인용문 꾸미기 5가지) 오늘은 인용문을 쓸 때 필요한 blockquote 태그, cite 속성, cite 태그에 대해 알아보겠습니다 blockquote는, 인용문을 표시할 때 사용하는 태그입니다. 보통 blockquote 요소를 사용한 곳은 들여쓰기가 됩니다. (한 줄짜리 짧은 인용문은 q태그를 사용) 글을 읽으시다가 모르시는 부분은, 제 블로그에 대부분 관련 글이 있으니 참조해주세요~ html40.01 에서 blockquote 태그는 긴 인용문을 지정할 때 사용했다면, html5에서 blockquote는 다른 자원에서 인용한 일부를 지정할 때 사용 ▶사용 예: 인용문 .. .. cite 속성 blockquote는 cite 속성과 함께 사용할 수 있습니다. cite .. 2014. 8. 29.
[html/css] 수직선 그리는법 2가지(인용문 앞에 활용) [html/css] 수직선 그리는법 2가지(인용문 앞에 활용) 웹페이지에서 인용문이나, 중요 내용 앞에 큰 수직선이 그려져 있는 걸 본 적 있으시죠... 오늘은 아래 이미지처럼 큰 수직선 그리는 2가지 방법과 티스토리 본문에 수직선 넣기도 알아보겠습니다. 1. border 속성을 사용하는 방법 2. 이미지를 사용하는 방법 저는 1번이 파일 용량도 적을뿐 아니라, 가장 손쉬운 방법인 것 같습니다. 1. border 속성을 사용하는 방법 (1) 왼쪽에 수직선을 그릴려면 border-left: 를, 오른쪽에 수직선을 그릴려면 border-right를 사용 (2) 선의 너비, 모양, 색상을 같이 지정합니다. (3) padding으로 수직선과 인용문 사이에 여백을 지정해 줍니다. 예) p.quote {border.. 2014. 8. 28.
[html] 수평선 그리기, hr 태그 [html] 수평선 그리기, hr 태그 html 문서에서 문단을 의미적으로 분리하고자 할 때 hr 태그를 사용할 수 있습니다. html 4.01에서 hr 태그는 수평선을 표현했다면, html5에서는 hr태그를 표현적이기보다 의미적인 요소로 규정하여, 주제를 분리하기 위한 용도로 사용합니다. 닫는 태그는 없음. 너비, 높이 등 스타일을 주고자 할 때는 전부 css 통해 작성합니다. (html에서 사용했던 align, noshade, size, width은 html5에서 퇴화 속성임) [css] hr{width:500px;} -> width로 수평선 너비 지정 hr{height:500px;} -> height로 수평선 높이 지정 hr{color:red;} -> color 로 색상 선 지정 단, chrome .. 2014. 8. 27.
허브(바질, 라벤다, 레몬밤 발아) 키우기, 주의사항 허브(바질, 라벤다, 레몬밤 발아) 키우기, 주의사항 16일 허브 씨앗을 심었죠. 바질, 라벤다, 레몬밤 허브 씨앗 키우기(라벤다, 레몬밤, 바질 발아 과정) 그로부터 벌써 2주가 지났네요. 그간의 성장과정을 담아 보았습니다. 바질은 발아도 잘 되고, 쑥쑥 잘 자라는 반면, 라벤다는 아무 소식이 없고, 레몬밤은 발아율이 50% 정도 되는 것 같아요. 그리고 원래 식물 자체가 약산 부실해 보여요 -_-; 발아하고 나서 며칠 후 옮겨주었음.(바질) 지금은 이 정도로 자랐어용~(바질) 처음부터 계란판에 심은 것도 잘 자라고 있습니다(바질) 그럼 레몬밤을 보실까요? 발아한 레몬밤 레몬밤은 바질에 비해 식물 자체가 좀 약해 보여요, 저는 시험용으로 솜발아를 해 보았지만, 발아 후 옮기는 과정에서 죽을 수도 있고 .. 2014. 8. 26.
[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.
웹 개발자 도구 web developer toolbar 개관 웹 개발자 도구 web developer toolbar 개관 며칠 전에 웹개발자 도구 web developer toolbar를 소개했었죠. 웹 디벨로퍼 툴바(web developer toolbar)는 웹개발자나 웹디자이너 html,css,자바스크립트 등을 다루는 분들에게 유용한 도구입니다. 오늘은 이 도구를 사용하는 방법에 대해 개략적으로 살펴 볼게요. 사전 준비: 파이어폭스, 구글, 오페라 브라우저를 이용하며, 웹 디벨로퍼 툴바가 설치돼 있어야 함. 웹개발자 도구, 웹 디벨로퍼 툴바 설치/제거 방법 저는 파이어폭스로 들어가 보았습니다. 우선 아무 사이트에 들어가 볼까요? http://www.websache.de/ (1)은 화면 상단에 툴바가 설치된 모습입니다 (Disable /Cookies/Css/Fo.. 2014. 8. 22.
: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.
반응형

티스토리툴바