WEBLINYI

웹 페이지를 보다 보면 http://로 시작을 하는 것이 있고, https://로 시작을 하는 부분이 있습니다. IT 계열의 업종이 아니시면 차이는 잘 모르실 텐데요. 오늘 그 차이를 한번 알아보겠습니다. http:// http는 Hypertext Transfer Protocol의 약자입니다. TCP와 같은 신뢰할 수 있는 연결 지향 전송 서비스를 사용하여 두 대의 컴퓨터가 통신하는 클라이언트 즉 서버 프로토콜. 쉽게 얘기하면 컴퓨터 및 인터넷 캐시가 저장되어 더 빨리 로드됩니다. 하지만 잠재적으로 제어할 수 없는 시스템에 저장되기에 인터넷을 통한 공격에 취약할 수밖에 없습니다. https:// https는 Hyper Text Transfer Protocol over Secure Socket Layer의 약자입니다. 클라이언트와 서버 간에 키 기반 암호화 알고리즘을 통해 개인 정보, 사용자도 모르게 승인되는 인증 등을 차단을 할 수 있습니다. 즉 http 보안이 강화된 버전으로 보시면 될것같습니다. 대체적으로 금융사이트, 온라인 쇼핑몰등이 https로 되어있습니다.

css 선택자를 재미있게 익힐 수 있는 웹 게임을 하나 소개해보고자 합니다. 바로 CSS Diner 라는 웹 사이트인데요. 총 32단계로 구성되어있어 단계마다 깨는 재미도 쏠쏠하고 이해도 쉽게 할 수 있도록 만들어진 재미있는 사이트입니다.  이미지로 보실 때는 잘 모르시겠지만 사이트로 방문하시면 좌우로 계속 움직이는 접시나 과일들을 보실 수 있는데요, 그 부분을 셀렉터로 지정하면, 해당 단계를 깰 수 있습니다.  굉장히 재미있는 사이트니 한 번씩 방문하셔서 해보세요😁

정의 article 태그(요소) 는 문서내에서 독립적인 컨텐츠를 나타냅니다. 잡지나 신문 기사, 블로그 글 즉 본문이나 어떤 다른 독립적 아이템등이 들어가는 영역입니다. 예제 <article>  <h1>네이버</h1>  <p>네이버는 대한민국의 포털 사이트다.</p> </article> 결과 네이버 네이버는 대한민국의 포털 사이트다.

정의 b 태그(요소) 는 글자를 굵게 표시하는 태그(요소)로, bold의 약자입니다. CSS 에서 font-weight 를 bold 로 설정하는 것과 같은 효과를 줄 수 있습니다. 예시 <p><b>주의 사항</b>미끄러질 수 있으니 주의하세요</p> 결과 주의 사항 미끄러질 수 있으니 주의하세요

정의 acronym 태그( 요소)는 텍스트를 두문자어로 지정합니다. 속성 title : 약어 전체의 의미를 지정합니다. 예시 <p><acronym title="United Nations">UN</acronym>은 국제 협력을 증진하고, 국제 평화를 위해 질서를 유지하는 국제 기구.</p> 결과 UN 은 국제 협력을 증진하고, 국제 평화를 위해 질서를 유지하는 국제 기구.

블로그나 기타 홈페이지를 운영하며 웹 마스터 도구는 필수로 잡혀져 가고 있습니다. 특히 검색어 노출은 굉장히 중요 한데요. 대한민국에서 대다수가 사용하는 네이버 기준으로 설명 해 드리겠습니다.😁 네이버 웹 마스터 도구에서 좌측 메뉴에서 현황 > 사이트 최적화를 누르시면 이미지에서 보시는 거와 같이 로봇 메타 태그 쪽에 X 표시와 내용은 'nofollow'(noindex,nofollow 등) 있어 네이버 검색엔진이  사이트 내 링크를 검색 결과에 반영할 수 없습니다. 라는 내용이 적혀 있습니다. 저렇게 적혀있을 경우 검색엔진(네이버,다음,구글 등등)에서  검색할 경우 링크 누락, 문서누락등 노출이 되어지지 않게 됩니다. 이럴 경우 간단한 <meta>(메타) 태그를 통해 수정을 해줄 수 있는 방법 을  알려드립니다.(구글 블로그 기준) 우선 구글 블로그 관리자에 접속하셔서 테마 > html 편집을 클릭해주시면, 위와 같이 코드가 나옵니다. 저 중에서 관련된 mata를 찾아야 되는데.... 하나하나 눈으로 찾게 되면 눈도 아프고 머리 아프게 되니 우리가 자주 애용하는, 하게 될 ctrl+f 를 한번 눌러줍니다. 누르시게 되면, html코드창 우측 상단에 "Search"라는 조그만 한 창이 뜨게 되는데 검색 노출에 방해되는 "noindex" "nofollow"를 입력해 엔터 를 누르게 되면... 찾았다 요놈!!   위와 같은 메타 태그를 찾으시면 아래와 같이 수정 해주시면 됩니다. 참 쉽죠? 수정 코드는 복사 붙여 넣기 좋게 하단에 코드를 적어 넣어드리니, 필요하신 분들은 복사해서 붙여 넣어주세요^^ <...

정의 address 태그(요소)는 연락처 정보를 기술합니다. 속성 XHTML일 경우는 블록 요소를 포함할 수 없으나 p 요소만은 포함 가능합니다. 예제 <address> 주소 : 가나시 가나구 가나동 123-09<br /> 이메일 : aaa@aaa.com<br /> 연락처 : 123-1234-1234 </address> 결과 주소 : 가나시 가나구 가나동 123-09 이메일 : aaa@aaa.com 연락처 : 123-1234-1234

정의 addr 태그(요소)는  생략어 즉 약어의 원형을 나타낼 수 있습니다. 속성 title 약어 전체의 의미를 지정합니다. HTML 단어에 마우스를 올릴 시 전체 title을 볼수있다. 예제 <p><addr title="Hyper Text Markup Language">HTML</addr>은 웹 페이지를 위한 마크업 언어다.</p> 결과 HTML 은 웹페이지를 위한 지배적인 마크업 언어다.

정의 a 태그 는 텍스트에 링크를 설정할 수 있습니다. 즉 하이퍼 링크를 걸어주는 태그. 속성 href : 링크 주소 값을 지정합니다. rel : 현재 문서와 링크 된 문서 간의 관계를 지정합니다.       href 속성이 있는 경우에만 사용됩니다. name : 링크가 연결되는 페이지의 URL을 지정합니다. target : 해당 주소 값을 어떤 방식으로 설정할지 결정. 속성 값은 아래와 같다.       _blank : 새 창이나 탭에서 링크된 문서를 엽니다.   _parent : 속성 값의 상위 창을 엽니다.   _self : 자신의 창을 엽니다.[기본 값]   _top : 화면이 여러 프레임으로 이뤄져 있는 경우 모든 프레임을 지우고 전체 화면에 엽니다. 스타일 시트 a:hover  : 마우스를 올릴 경우에 대한 스타일 지정 a:link  : 링크가 지정된 방문하지 않은 요소에 대한 스타일 지정 a:active : 해당 사용자의 동작에 따른 변화를 렌더링 하는 방법으로 클릭하는 경우의 스타일 지정 a:visited  : 방문한 링크에 대한 스타일 지정 예제 <style> a:link{   color:blue;   text-decoration:none; } a:visited{   color:green;   text-decoration:none; } a:hover{   color:red;   text-decoration:none; } a:active{   color:white;   text-decoration:yellow; } </style> <a href="https://www.google.co.kr/" target="_blank">구글 바로가기</a> 결과 ...