운동과 개발

noreferrer , noopener, nofollow 속성 이란? 해당 속성들은 HTML의 링크( 태그)에 사용되는 속성이다. noreferrer, noopener, nofollow 속성에 대해 사용목적과 보안이슈, SEO관련 이슈에 대해 정리해 보았다. 1. noreferrer 속성 사용목적 보안이슈 1. 이 속성은 링크를 클릭했을 때 브라우저가 참조(refer) 정보를 전송하지 않도록 한다. 2. 다른 사이트로 이동하는 링크를 클릭할 때, 브라우저는 일반적으로 이전 페이지의 URL을 참조 정보로 전송한다. 이를 방지하기 위해 noreferrer 속성을 사용한다. 1. referer 정보 노출은 개인정보 노출, 권한 상승 공격 등의 보안 이슈로 이어질 수 있다. 예를 들어, 이전 페이지 URL에 접..

0. 들어가며... CSS 의 Flexbox와 grid는 웹 페이지의 레이아웃을 만드는 데 사용할 수 있는 (예시로, float와 비교해서) 비교적 최신 기술이다. (flexbox는 2012년등장, 2017년 10월 17일 Microsoft Edge 브라우저는 CSS Grid 구현을 출시 했다.) flexbox와 grid의 사용법에 대해 자세히 정리된 글들은 이미 많이 있으므로 둘을 비교하며 어떤상황에서 어떤 기술을 사용할지에 대한 고민을 담은 글이고, 이에 대해서는 정답은 없다고 생각한다. 혹시나 flexbox와 grid에 대해 아직 잘 모르겠다면, 제대로 공부해보고 싶다면 아래 사이트(1분코딩) 에 들어가서 천천히 익혀보기를 추천한다. (내가 도움을 많이 받은 사이트이다.) https://studio..

들어가며... 항상 모든 HTML 을 작성한다면, 그냥 을 무조건적으로 쓰라고만 배웠다. 근데, 도대체 이걸 왜쓰는 것이고, 안쓰면 어떻게 되지? 라는 궁금증에서 찾아보게 되었고, 간략하게 정리해보았다. 혹시나, DOCTYPE에 대해 자세하게 알고자 한다면, 다른 블로그로 가서 찾아보기를 추천한다. 1. doctype이란? doctype 이란 Document Type Declaration의 약자로 번역하면, '문서 형식 선언' 이다. 즉, 문서의 유형을 정의하기 위해 사용하는 선언문이다. 문서 타입 정의는 HTML5, XHTML, HTML의 세가지 문서 유형이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성을 처리하는 기준이 되며, 유효성 검사에 이용된다. 지금 작성하는 tistory도, 네이버..

상속 1. 자손 결합자 ( 공백) 하위에 있는 태그, 자식 태그들로 범위를 좁혀서 선택한다. 2. 자식 결합자 (>) 바로 아래 자식만 좁혀서 선택한다. 형제 1. 일반 형제 결합자 (~) 내 뒤에 있는 형제를 선택한다. (여기서 형제 = 같은 레벨 을 말한다.) 2. 인접 형제 결합자(+) 바로 뒤에 있는 형제만 선택한다. 형제를 선택할때는 '순서'가 중요하다. [선택자1] ~ [선택자2] 선택자 1의 '뒤에'있는 선택자2를 선택한다. 다음 예시를 천천히 보면서 이해해보자. See the Pen Untitled by ITK-SHIN (@itk-shin) on CodePen. index.html Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello H..

1. HTML5 시멘틱 태그에 대하여 알아보자 1-0. HTML5란 무엇일까? HTML은 1993년 HTML 1.0이 팀 버너스리(Tim Berners-Lee)에 의해 고안되어 발표된 이후 해를 거듭하며 HTML은 발전에 발전을 거듭하였다. 그리고 1997년 HTML 3.2 및 HTML 4.0을 개발하면서 W3C에서 HTML의 버전을 관리하기 시작하였다.HTML5는 HTML 4.01과 XHTML 1.0, XHTML 1.1을 계승하는 차세대 웹 기술로 HTML 마크업이 1990년대 초 인터넷에 소개된 이래로 계속적으로 진화를 거듭해 왔다.기존에 존재하던 HTML의 한계를 극복하고, 기존 기술들의 설계를 개선하기 위해 W3C에서 HTML5라는 새로운 기술이 정의되었다.마이크로소프트, 모질라, 애플, 구..

1. 절대길이 - px9:56 → 고정값이라고 생각. 1. px → 대부분 px만 사용한다. cm(센치), in(인치)는 웹에서는 적합하지 않다. ( 화면을 확대, 축소에따라 길이가 달라질 수 있다.) pt (point) 는 가끔 볼 수도 있다. (워드, 한글은 출력할 가정이 있어서 쓰는것) -웹 세상에 적합x 1. px을 지정하면 브라우저에서 확대,축소해도 변하지 않는다. (사용자 설정을 따르지 않는다.) 접근성 문제를 유발할 수 있다. 2. 상대길이 - em, rem8:33 → 기준점에 따라 달라진다. 먼저 보는 결론. rem을 사용하는게 더 직관적으로 이해하기 편할 것이다. 접근성 문제도 해결된다. 1. em ⇒ 1em === 부모의 font-size이다. See the Pen Untitled by..

https://developer.mozilla.org/ko/docs/Web/HTML/Element/button : 버튼 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 사용자 에이전 developer.mozilla.org https://developer.mozilla.org/ko/docs/Web/HTML/Element/input : 입력 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다..