HTML5 시맨틱(Semantic) 태그 2021. 7. 17. 시맨틱(Semantic) 태그란 길게 설명할 필요가 없다. 태그 그 자체가 의미를 가지는 것을 의미한다. 이 태그가 어떤 의미를 가지고, 어떤 용도로 사용되는지 유추할 수 있다. HTML5에서 이런 태그의 쓰임은 검색엔진 최적화(SEO)에 용이하다. 로봇이 웹페이지를 읽을 때 어떤 부분을 어떤 용도로 긁어갈지 분석하고 사용할 수 있다. HTML5에서 새로 제공하는 시맨틱 태그들 시맨틱 태그를 사용하지 않아도 기존 블록 태그(Div) 로만으로 충분히 페이지 구성이 가능하다. 그러나, 검색로봇이 페이지를 분석할 때는 어떤 태그가 무슨 의미를 지니는지 알 수 없기 때문에 정확한 정보를 추출하기가 어려울 수 있다. 따라서, 이러한 문제를 해결하고자 시맨틱 태그를 사용하는 것이다. 시맨틱 태그를 적극적으로 사용한..

HTML 문자참조표 2021. 7. 17. Latin 1 Character (ISO 8859-1) 문자 실제 참조 수치 문자 참조 설 명 행바꿈 금지 스페이스 ¡ ¡ ¡ ¡ 반전시킨 감탄부호 ¢ ¢ ¢ ¢ 센트 £ £ £ £ 파운드 ¤ ¤ ¤ ¤ 통화 ¥ ¥ ¥ ¥ 엔 ¦ &bvbar; ¦ ¦ 세로파선 § § § § 섹션 ¨ ¨ ¨ ¨ 모음변이 © © © © 저작권 ª ª ª ª 여성서수 « « « « 이중산괄호(시작) ¬ ¬ ¬ ¬ 노트 - ­ - ­ 소프트하이픈 ® ® ® ® 등록상표 ¯ ¯ ¯ ¯ 장음기호 ° ° ° ° 도 ± ± ± ± 플러스마이너스 ² ² ² ² 2제곱(2의 슈퍼스크립트) ³ ³ ³ ³ 3제곱 (3의 슈퍼 스크립트) ´ ´ ´ ´ 예(양음) 악센트 µ µ µ µ 마이크로 ¶ ¶ ¶ ¶ 패러그레프 · · · · 가운데점 ¸..

<ruby> 태그 위첨자 사용방법 2021. 7. 17. 태그의 정의와 사용방법 태그는 일본어의 후리가나와 같이 해당 문자의 발음이나 설명을 위 첨자로 표시할 수 있는 특징이 있습니다. 루비 주석(ruby annotation>을 정의할 때 사용할 수 있습니다. 일반적으로 태그는 태그와 태그와 함께 사용될 수 있습니다. 코드 예시 사용방법 米津玄師 MV「LOSER」歌詞かし 米津玄師 MV「LOSER」歌詞かし 이렇게 사용할 경우 와 부분은 윗 첨자를 정의할 때 사용할 수 있습니다. 태그는 태그 내부에 위치합니다. 함께 사용할 수 있는 태그는 에서 요소를 지원하지 않는 브라우저에서만 표시될 문자를 정의할 수 있습니다. 보통은 자주 사용하지는 않는 태그입니다. 위 첨자로 표시되기때문에 rt의 스타일시트를 지정해줘야 합니다. 기본형은 line-height: normal;..

b태그와 Strong태그의 차이 2021. 7. 17. b태그와 Strong태그의 차이 태그 사용에 있어서 b태그와 Strong태그의 보여지는 결과는 같습니다. 티스토리 에디터에서도 컨트롤 + B를 누르면 글씨가 굵어지면서 해당 적용 부분이 강조되는 것을 확인할 수 있습니다. 그렇다면, 보기에는 별 차이가 없는 b태그와 Strong 태그는 어떤 차이일까요? 바로 강조의 차이에 있습니다. 보기에는 적용된 부분이 굵어지는 것으로 결과가 같아보이지만, 웹 최신표준에서는 Strong 사용을 권고하고 있습니다. 즉, 글을 작성할 때 가능하다면 강조해야할 부분을 Strong 태그로 분류한다면 로봇이 해당 문서 내용을 '더 잘' 이해하고 검색에 반영한다고 이해하면 되겠습니다. 강조 하는 내용입니다. 강조 하는 내용입니다. 결과값 강조 하는 내용입니다. 강조 하는 내용입니다.

Article 태그와 Section 태그 정리 2021. 7. 17. ※ 개인적으로 공부하기 위한 HTML5 태그 정리 글입니다. 프런트엔드를 공부하다 보면 의외로 신기한 태그들을 새롭게 알게 된다. 그리고, 한 번쯤은 봤을만한 태그들이 익숙해지고 직접 작업을 할 때, 사용하게 되면 태그들이 있는 이유를 한 번에 이해하게 되고, HTML 구조만 보더라도 어떤 식으로 구성되어 있고 어떤 의도로 작업을 했는지 쉽게 이해할 수 있게 되었다. 어쩌면, 영문으로 되어 있어서 언어를 조금 더 잘 이해하고 그 뜻을 파악할 수 있었다면 더 쉽게 이해할 수 있었을지도 모른다. HTML5에서는 정말 다양한 태그들이 있고 평소에 잘 사용하지 않는 태그들이 있지만, 사실 생각해보면 활용도가 굉장하고 언제든지 쉽게 사용할 수 있는 태그들이 있는 것이다. Audio 태그나 Address태그도 마찬..

카카오 개발 코드 스니펫(KakaoTalk ko.lproj (v8.1.7 from AppStore) 2021. 7. 17. Creating your first snippet Snippets are pieces of long-term memory for professional developers. Cacher seeks to help you organize and use snippets more efficiently. Learn the basics of creating snippets here. InfoPlist.strings "CFBundleDisplayName"="카카오톡"; "NSAppleMusicUsageDescription"="사진앨범을 표시하거나 사진을 저장하려면 아래 '승인'이 필요합니다.\n\n접근을 허용하지 않으면, 앨범을 표시하거나 사진을 저장할 수 없습니다."; "NSCalendarsUsageDescript..

CSS 속성선택자 동일 클래스명 일괄선택 2020. 4. 29. 예를 들어, 내가 어떤 타입의 클래스를 일괄 선택하고자 할 때는 속성선택자를 사용하면 된다. [class^="클래스명"]와 같은 원리로 카테고리에서 외부링크 부분만 적용하고 싶을 때는 li[class^="t_menu_link_"] > a로 일괄 및 다중선택이 가능했다. 내가 이거 알아내려고 몇 시간동안이나 뼈빠지게 CSS선택자 공부했다. CSS 속성선택자 사용방법 사실 같은 자식 내에 있는 리스트 타입이였으면 그냥 nth-child(even) 또는 (odd)로 하거나 (3n+1) 이런식으로 구현이 가능했을 텐데, 문제는 자식 개체가 모두 독립적인 리스트 타입을 가지고 있어서 위의 방법이 적용이 안되는 것이였다. 방구석 웹디자이너가 이런 사실을 제대로 알고 있을리가 없다. 그래서 연구하고, 또 연구한 결과..

jQuery / Method / .append() (문자열 추가) 2019. 9. 7. 자바스크립트로 페이지의 요소를 수정하거나 문자열을 추가할 때 사용하는 메서드. append() 사용방법은 아주 간단하다. 클래스명을 변경하고, .append('추가할 내용' );으로 실행을 시키면 페이지의 맨 앞에 접두어를 붙이거나 수식어를 추가할 수 있다. .prepend의 경우에는 맨 뒤에 추가할 수 있다. $( '클래스명' ).append( '추가할 내용' );