코드노트

링크를 연결할 때 사용하는 태그인 a태그에서 대부분 target="_blank"를 사용한다. 기존 페이지를 남겨두고 새창에서 띄우기 때문에 어떻게 보면 사용자 편의성에서도 좋은 속성이다. 다만 여기서 문제점이 생긴다. 보안에 있어서 취약점이 생긴다는 것! 그 보안취약점을 보완하기 위해서 rel="noopener nereferrer nofollow" 이 세가지 속성을 사용할 수 있다. 세가지 속성들의 사용법은? - noopener 하이퍼링크를 클릭하게 되면 새로 열린 페이지가 보조 브라우징 컨텍스트이기 때문에 자기 자신을 생성한 원본 브라우징 컨텍스트를 오프너 브라우징 컨텍스트라는 이름으로 참조하고 있다고 한다. 응..? 쉽게 설명하면 새 페이지에서 많은 js를 실행하게 되는 경우 원본 페이지의 성능이 저..

input, button type에 따라서 form제출이 정해진다. input, button 제출 여부 // 제출 // 제출 안됨 // 제출 // 제출 // 제출 안됨 - input, button태그에 상관없이 type이 button이면 제출이 되지 않는다.

form 태그에서는 method ="속성"을 입력하게 된다. 폼 데이터가 서버로 제출되면서 사용되는 메소드이다. method에 입력할 수 있는 속성값은 get, post가 있는데 두개는 차이가 있다. GET get은 url(기존 주소)에 ?를 기점으로 id, pw를 추가하여 전달한다. input값이 id, pw등 두개 이상의 정보를 전달해야하면 &를 통해서 분리되어 전달된다. - get방식은 브라우저에 캐시되어 저장된다. - 보안에 있어서 취약하며, 중요한 데이터는 Post를 통해서 전달하는게 좋다. - 보통 쿼리 문자열에 포함되어 전송되기 때문에 길이의 제한이 있다. POST - post 방식은 url이 아니라 폼 데이터를 별도로 첨부하여 서버로 전달된다. - 브라우저에 캐시되어있지 않기 때문에 브라우..

WAI-ARIA Roles role은 쉽게 말하면 alt속성과 유사하다고 볼 수 있다. img태그를 사용할 때 이미지가 뜨지 않거나 스크린리더를 위해서 alt에 이미지 이름을 넣는다. 대체문자를 넣는것과 비슷하다. role은 태그별로 넣을 수 있는 역할들이 분류되어 있다. 꼭 넣어야하는 것은 아니지만 alt를 신경쓰는만큼이라도 role은 신경써야하는 부분인거 같다. WAI-ARIA Roles - Accessibility | MDN ARIA roles provide semantic meaning to content, allowing screen readers and other tools to present and support interaction with object in a way that is con..

Ordered List - 순서가 있는 목록 - type을 통해서 여러가지 순서번호를 사용할 수 있다. ex) type="A", type="a", type="I", type="i" - start="" 속성을 통해서 시작하는 숫자를 사용할 수 있다. - li 태그에 value값을 넣어주면 넣은 순서부터 시작한다. - 중간에 넣게 되면 넣은 순간 전까지는 1부터 그 뒤로는 넣은 숫자로 시작. - reversed 속성을 사용하면 반대로 확인할 수 있다. - 하위 태그로 중첨으로 가능. Undered List - 순서가 없는 목록 - 하위 태그로 중첨으로 가능. 설명목록을 나타낸다. - dt, dd를 감싸서 설명 목록을 생성한다. - key, value를 나타낼 때 사용한다. - dt, dd를 같이 사용한다. ..

- 블럭 컨테이너 - 플로우 콘텐츠를 위한 통용 컨테이너 - css로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 여향을 주지 않음 - 콘텐츠 분할을 위한 요소. - 순수 컨테이너로 아무의미가 따로 없다. - 인라인 컨테이너 - css로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 여향을 주지 않음 - 순수 컨테이너로 아무의미가 따로 없다. ● Semantic Web 시맨틱 웹 - 검색 엔진은 의미론적 마크업으로 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주 - 의미가 없는 div를 탐색하는거보다 의미있는 코드 블록을 찾는것이 훨씬 쉬움 - 개발자에게 태그 안에 채워질 데이터 유형을 제안 - 시각장애인을 위한 스크린리더로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있음. - 소..

속성 : cite = "" - 인용문 출저 url을 넣어준다. / 브라우저만 알고 있는 정보이다. - 앞쪽에 여백이 들어가있다. - 긴 인용문 속성 : cite = "" - 인용문 출저 url을 넣어준다. / 브라우저만 알고 있는 정보이다. "문자에 쌍따옴표를 묶어준다." - 짧은 인용문 - p태그에 블록요소가 들어오면 안된다. - 띄어쓰기, 줄바꿈 등 요소내의 공백문자를 그대로 유지하여 나타낸다. - 고정폭의 글꼴을 가지고 있다. ex) AAAAA, IIIII의 폭이 모두 같게 나타낸다. - 독립적인 콘텐츠를 나타낸다. - img태그와 figcaption으로 이미지와 문구를 같이 묶어서 나타낸다. - 이랑 같이 사용된다. / 문구! - , , 등 다양한 텍스트요소와 같이 사용할 수 있다. - 가로 줄을..