본문 바로가기
반응형

전체 글333

[css3] :target 가상 클래스 [css3] :target 가상 클래스 오늘 배워볼 가상 클래스는 :target 선택자 입니다. :target은 요소의 id 와 url에 있는 #가 같을 때 적용 합니다. 예: 장바구니 만들기 2014. 11. 4.
[css] :focus 가상 클래스 [css] :focus 가상 클래스 예전에 링크 관련 가상 클래스에서 :link :visited :active :hover를 배웠습니다. [css] 링크 가상 클래스(:link, :visited,:hover, :active) 오늘은 사용자 행동에 기반한 가상 클래스 :focus 선택자를 배워보겠습니다. 참고로 :active :hover :focus 는 '사용자 행동 가상 클래스'(the user action psuedo-class)로 분류됩니다. :focus 가상 클래스 포커스를 가진 요소에 적용하는 선택자입니다. 포커스란? 요소가 선택되거나 마우스 이벤트 상태, 또는 태그에서 기본값 상태(입력할 준비가 될 때 커서가 깜빡거리는 것) 일 때 포커스 되었다고 합니다. 이외에도, 역시 기본값으로 :focus.. 2014. 10. 31.
[html5] datalist 태그 [html5] datalist 태그 datalist 태그는 html5에 새로 추가된 속성으로, form 요소에서 미리 지정된 옵션 목록을 제공합니다. 쉽게 말해, 사용자들이 특정 글자를 입력하면 그에 해당하는 미리 지정된 목록을 보여줍니다. ▶사용 예: 사용 예에서 본 것처럼, datalist는 option목록을 지닌 요소 안에서 사용하며 의 list 속성은, 의 id와 같은 값을 사용해 함께 묶을 수 있어요. 예: ▶브라우저 지원: ie10+, chrme 20+, ff 4.0+, opera 9.0+ html 작성 예를 보겠습니다~ html 통학 수단을 선택하세요 ▶ 실행화면 b를 클릭하면 b에 해당하는 자동 완성 목록(bus/ bicycle)이 나타납니다. 오늘로서 html form 양식에 관련한 태그.. 2014. 10. 28.
fieldset 태그, legend 태그 [html] fieldset 태그, legend 태그 지난 시간에 optgroup 태그는 관계 있는 옵션들끼리 묶는 역할을 한다고 했습니다. [html] optgroup 태그 fieldset 태그도 이와 유사합니다. fieldset은 form 양식에서 관계된 요소들끼리 묶어주며, 관계 요소 주위에 박스를 그립니다. fieldset은 주로 legend 태그와 함께 쓰이는데, fieldset 요소에 대한 설명글 입니다. fieldset 문법: 내용 legend 문법: 내용 ▶함께 사용할 수 있는 속성 속성 속성값 설명 name text fieldset 이름 form form id fieldset이 속한 form의 id disabled disabled form에서 관계 요소그룹이 비활성화 됨 문법: , xht.. 2014. 10. 27.
양파 보관법 양파 보관법 양파는 小자리를 사더라도, 항상 기본이 5개 이상 들었기 때문에 혼자 사는 사람이라면 결국 몇 개를 제외하고는, 썩어서 버린 적이 있으실 거예요. 하지만 양파를 한 번에 손질해서 잘만 보관한다면 더 이상 아깝게 버릴 일이 없답니다~ 티비에서도 나온 적이 있다는데..... 주부 9단 부럽지 않은 양파 보관법을 알아보겠습니다~ 양파 손질 후 오래 보관하는 방법 STEP 1. 우선 양파를 한 곳에 담은 후 껍찔을 깝니다. STEP 2. 이렇게 손질한 양파는 물에 한 번 씼어 흙이나 이물질을 제거합니다. STEP 3. 그리고 햇볕 같은 데 두어 물기가 날아가도록 건조시켜 주세요. 키친 타올을 이용하여 닦아내셔도 됨. STEP 4. 물기가 다 마르면, 하나씩 랩으로 싸 주세요~ 그리고 냉장고 야채칸에.. 2014. 10. 26.
[html] optgroup 태그 [html] optgroup 태그 며칠 전 option 태그를 배웠습니다. [html] option 태그 option은 select 태그나 datalist 태그 안에서 사용하여, 드롭다운 목록을 만드는 역할을 합니다. optgroup 태그는 옵션 목록이 길 경우 관계 있는 옵션들끼리 묶어주는 기능을 합니다. 주로 label 속성과 함께 사용 문법: 내용 ▶함께 사용할 수 있는 속성 속성 속성값 설명 disabled disabled 옵션 그룹이 비활성화 됨 문법: , xhtml에서는 label text 옵션 그룹에 대한 설명 html 작성 예를 보겠습니다~ html 신발 사이즈 선택 225mm 230mm 235mm 255mm 260mm 265mm ▶실행 화면 female 과 male로 구분이 되어 표시가 .. 2014. 10. 24.
[html] option 태그 [html] option 태그 어제 select 태그를 배웠습니다 [html] select 태그 는 드롭다운 목록을 만들 때 사용합니다. 드롭다운 목록의 항목은 태그로 만듭니다. ▶사용 예: zazz pop 태그를 사용할 때 보통 value 속성을 함께 지정하는데 value 속성은 서버에 전송될 값 입니다. 옵션 목록이 길 경우, 관계 있는 옵션들끼리 태그로 묶을 수 있습니다 태그는 나 다음 시간에 다룰 태그 안에 들어갈 수 있습니다. * datalist 태그 : input 요소에서 미리 지정된 옵션 목록을 지정.(자동 완성 기능) ▶함께 사용할 수 있는 속성 속성 속성값 설명 value text 서버에 전송될 값 value값이 없을 경우, option 사이의 내용이 서버에 전달 됨 label text .. 2014. 10. 22.
[html] select 태그 [html] select 태그 요소는 드롭다운 목록을 만들 때 사용하는 태그입니다. 문법: 내용 선택 항목은 요소로 지정합니다. 사용 예: zazz pop select 요소는 html form 양식에서 사용될 수 있습니다. ▶함께 사용할 수 있는 속성 속성 속성값 설명 name 이름 드롭다운 목록의 이름 전송 후 데이터를 참조하거나 자바스크립트에서 요소 참조를 위해 사용 size 숫자 드롭다운 목록에서 보이는 옵션 개수 기본값 1/multiple 속성이 있을 경우 기본값은 4. 속성값이 1보다 크지만, 옵션 전체 개수보다 작으면, 스크롤바가 생김. Chrome, safari에서 정상 작동되지 않을 수 있음 disabled disabled 드롭다운 메뉴가 비활성화 됨 multiple multiple 몇가지.. 2014. 10. 21.
[html] button 태그 [html] button 태그 요소는 버튼을 만드는 태그입니다. 이전 시간에 배운 과 비슷합니다. [html] input type 속성 차이점이라면, button 요소 안에는 텍스트나 이미지 같은 내용을 넣을 수 있다는 것. 문법: 내용 button 태그를 사용할 때는 항상 type 속성을 지정합니다. 그렇지 않으면, 브라우저마다 각기 다른 기본값을 사용합니다. 주의: ie8 이전 버전은 button 태그 사이에 있는 내용을 전송하며, 그 외 다른 브라우저는 value 속성의 내용을 전송 합니다. 따라서, form 양식에서 버튼을 만들려면, 태그보다 을 사용합니다. ▶함께 사용할 수 있는 속성 속성 속성값 설명 name name 버튼 이름. type 버튼 유형 button 누름 버튼을 만듦 reset 초.. 2014. 10. 20.
서울 10월, 11월 행사(시청 앞에서 열리는 한 평 시민책시장) 서울 10월, 11월 행사(시청 앞에서 열리는 한 평 시민책시장) 우연히 라디오를 듣다가, 시청 앞 광장에서 헌책 시장이 열린다는 것을 알았어요. 토요일 파주북소리축제에 다녀온 여흥이 채 가시지도 않았지만, 행사 기간이 11월 9일까지라 일요일 다녀 오기로 했습니다. 장소는 시청앞 5번 출구로 나와, 서울도서관 앞 입니다. 중고서점 뿐 아니라 개인도 신청 가능합니다.^^ ⊙ 행사 일시: 2014. 9. 13~11.9 ⊙ 행사 시간: 매주 토.일 오후 12시~5시 ⊙ 참여대상 -헌책 판매를 원하는 모든 시민과 헌책방(헌책뿐 아니라 책과 관련 소품도 판매 가능) ⊙ 모집 인원 -일반 참가자 50개 팀(개인, 가족, 단체), 중고서점 30개 팀, 출판사 10개 팀 -참가비 없음 ⊙ 유의사항 -대형 구조물(캐노.. 2014. 10. 17.
반응형

티스토리툴바