본문 바로가기
반응형

분류 전체보기333

[html] mark 태그 [html] mark 태그 mark 태그는 사용자에게 관계된 텍스트를 강조하고자 할 때 사용합니다. ▶브라우저 지원 ie9+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+ ▶mark 요소 사용 예 1. 검색 결과에서 찾은 키워드를 두드러지게 표시하여 사용자가 원하는 것을 쉽게 찾을 수 있도록 함. 2. 인용할 때 특정 텍스트를 강조하게 위해 strong, em, mark 태그 차이 텍스트를 강조하는 의미에서 세 가지가 쓰일 수 있는데, 각기 용도가 다릅니다 em. 강세를 둔 강조. emphasized text 약자로 이탤릭체로 표시함. 강조의 위치는 문장의 의미를 바꿈 Cats are cute animals. '고양이'에 강조 Cats are cute an.. 2015. 3. 3.
[html] abbr 태그 [html] abbr 태그 abbr 태그는 두문자어(acronym)와, 약어(abbreviation )에 사용하는 요소로, 브라우저나 검색엔진에 유용한 정보를 줍니다. 넷스케이프가 abbr 요소를 만들고, 마이크로소프트가 acronym을 만들어 두 요소 다 html4까지 사용하고 있었지만, 두 정의가 혼동스럽고 브라우저 지원도 저마다 달라, html5부터 acronym은 퇴화 요소로 규정합니다. html5부터는 두문자어와, 약어에 모두 abbr 태그를 사용합니다. 참고 acronym: 단어의 머리글자를 딴 말. NATO는 North Atlantic Treaty Organization의 두문자어임 '나토'라고 읽음. abbreviation: 쉽게 알아들을 수 있도록 줄인 말. BBC는 British Bro.. 2015. 3. 2.
HTML5 퇴화 요소(deprecated, obsolete 차이) HTML5 퇴화 요소(deprecated, obsolete 차이) 예전에 table에서 퇴화 속성에 대해 적은 적이 있는데, 어떤 분이 퇴화 속성인데 왜 여전히 정상적으로 작동하는지 질문하신 분이 계셨습니다. table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 저도 궁금하던 차였는데, 마침 글을 읽다가 deprecated, obsolete 차이에 대해 나온 글이 있어서 정리해 보았어요. 더불어 html5에서 퇴화로 규정된 태그를 살펴볼까 합니다. 우선 용어 정의부터.... 제 블로그엔 '퇴화 요소' '퇴화 속성'이란 단어가 많이 등장하는데 deprecated와 obsolete를 저는 통일해서 '퇴화'라고 설명해 놓았습니다. 하지만 두 단어엔 차이가 있습니다. deprecated .. 2015. 2. 27.
이미지맵 태그(map, area 태그) 이미지맵 태그(map, area 태그) map 태그는 이미지맵을 만드는 태그입니다. 이미지맵이란 클릭할 수 있는 영역을 지닌 이미지를 말합니다. map 요소는 몇 가지의 area 요소를 포함합니다. area 요소는 이미지맵에서 영역을 지정합니다. 사용 예: map 요소의 name(또는 id) 속성은 img 요소의 usemap 속성과 관계가 있습니다. 따라서, usemap과 name 이름은 동일해야 함. name과 id를 반복해서 쓴 이유는, name 속성이 xhtml에서는 퇴화 속성이기 때문. ▶함께 사용할 수 있는 속성 속성 속성값 설명 alt text area 대체 텍스트. Href 속성이 있으면 필수 coords area의 좌표. 0,0이 상단 왼쪽임 x1, y1, x2, y2 사각형 모양일 때(s.. 2015. 2. 25.
[css] cursor 속성 (마우스 모양 선택) [css] cursor 속성 (마우스 모양 선택) 무척이나 길었던 명절 연휴... 잘 지내고 오셨는지 모르겠네요 너무나 오랫동안 글을 쓰지 못했네요.^^ 오늘부터 또 조금씩 야금 야금 밀린 숙제를 해치워 나가야겠어요 오늘 배울 부분은 마우스 커서 모양을 지정하는 cursor 속성입니다. cursor 속성 : 마우스 포인터가 요소 위에 있을 때 표시되는 마우스 커서 모양을 지정 css 2.1 cursor 속성 브라우저 지원: https://developer.mozilla.org/ko/docs/Web/CSS/cursor 참조해 주세요 속성값 부분에 마우스를 대면 어떤 모양인지 나옵니다~ 속성값 설명 default 기본 커서. 보통 화살표 auto 기본값, 브라우저가 문맥에 기초하여 커서를 표시함 crossh.. 2015. 2. 23.
닥터 맘스 2, 모아철 솔직한 후기 닥터 맘스 2, 모아철 솔직한 후기 설날 연휴 잘 보내고 계신가요?^^ 새해에 인사도 못 드린 것 같아, 음력 새해를 맞이해서 인사 드릴게요. 모두 새해 복 많이 받으시고, 올 한해 술술술~ 풀리시길 바랄게요.^^ 저는 결혼을 조금 늦게 한 편인데, 그래서 솔로일 때와 결혼 이후 명절에 가장 크게 느끼는 차이점은 솔로일 땐 시골 집에 다녀와서 뭐하고, 누구랑 놀까 였는데... 이제는 시댁과 친정에서 제 역할을 하다 보니, 개인적으로 하고 싶은 일들은 자연 생각하지 않게 되었다는 거예요. 저는 그래도 솔로 생활을 오래한 축이라, 이런 것들이 그렇게 아쉬운 부분이 아니지만 독신주의를 고수하고픈 분들은 이 이유가 클거라 생각 돼요. 거두절미하고, 오랜만에 글을 쓰려니 글감도 생각나지 않고 해서 요즘 철분제 복.. 2015. 2. 20.
css로 반응형 메뉴 만들기 off canvas (left) css로 반응형 메뉴 만들기 off canvas (left) 지난 시간엔 select 요소로 드롭다운 메뉴를 만들었어요. 반응형 메뉴 만들기(select 태그를 이용) 오늘은 반응형 메뉴 중 off canvas 메뉴를 배워보겠습니다. 캔버스란 화폭을 말하죠. off canvas란 화폭 밖으로 분리된 것이라 보면 되겠습니다. 화면이 축소될 때 메뉴 아이콘이 등장히고, 아이콘을 클릭하면 메뉴바가 나타나며 본문을 밀어내는 형식입니다. 아래 이미지를 보고 A화면→B화면→C화면 순으로 코드 작성을 해 보세요 A 화면 B 화면 C 화면 전체 html ≡ /*메뉴 아이콘*/ /*체크박스*/ /*메뉴*/ Home Guest Notice 본문 /*본문*/ 접이식 메뉴를 만들 때 label와 체크박스를 이용하는 법을 배웠.. 2015. 2. 13.
반응형 메뉴 만들기(select 태그를 이용) 반응형 메뉴 만들기(select 태그를 이용) 어제는 체크박스와 :checked 선택자를 이용하여 토글 메뉴 만드는 법을 배웠습니다. 오늘은 select 요소를 이용하여, 반응형 메뉴를 만들어 보겠습니다. select 요소는 드롭다운 목록 만들 때 사용하며, 각 선택 항목은 option을 사용합니다. [html] select 태그 [html] option 태그 ▶전체 html Home Guest Notice Home Guest Notice 본문 우선 메뉴 목록을 만드는 것은 지난 시간에 배운 것과 동일합니다. 그리고, 화면 너비가 25em 이하에서는 드롭다운 목록이 나올 수 있도록 select를 이용하여 새로운 목록을 구성합니다. Home Guest Notice onchange="if (this.valu.. 2015. 2. 12.
[css] :checked 선택자를 이용한 토글 버튼 [css] :checked 선택자를 이용한 토글 메뉴 버튼 어제는 기본적인 토글 메뉴를 만들어 보았어요. css로 토글 메뉴 만들기(메뉴 열고 닫기) label 요소와, 체크박스, checked 선택자를 이용하여 메뉴 아이콘을 클릭하면 메뉴가 생성되고, 다시 클릭하면 메뉴가 사라지는 방식을 배웠습니다. 이번에는 토글 메뉴 버튼을 만들고, 전체적인 레이아웃까지 만들어 볼게요. A 화면 B 화면 C 화면 ▶전체 html ≡ Home ❘ Guest ❘ Noitce 본문 오른쪽 사이드바 footer 모두 지난 시간 배운 것을 응용했기 때문에 지난 강좌를 먼저 읽고 오셔야 이해하기 쉽습니다~ css로 토글 메뉴 만들기(메뉴 열고 닫기) css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) 지난 시간과.. 2015. 2. 11.
css로 토글 메뉴 만들기(메뉴 열고 닫기) css로 토글 메뉴 만들기(메뉴 열고 닫기) 미디어 쿼리를 이용해서, 반응형 웹사이트 만들기 연습해 보고 있습니다. 지난 시간에는 숨김 메뉴를 드러낼 때, hover 선택자로 마우스 오버할 때만 메뉴가 생성되었는데요... CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게 css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) 오늘은 메뉴 아이콘을 클릭했을 때 메뉴가 보이고, 다시 한 번 더 클릭하면 사라지는 방식을 배워볼게요. 영어로 toggle menu(토글 메뉴)라고도 하며 자바스크립트나 jquery를 이용한 방법도 있는데, 오늘은 css로만 만들어 보겠습니다. html 소스 ≡ /*메뉴 아이콘*/ /*체크박스*/ /*메뉴*/ Home ❘ Guest ❘ Noitce .. 2015. 2. 10.
반응형

티스토리툴바