JudithHopps JudithHopps

35. 스프레드 문법 배열 리터럴 내부에서 사용하는 경우 1. concat es5에서 2개의 배열을 1개의 배열로 결합하고 싶은 경우 배열 리터럴만으로 해결할 수 없고 concat 메서드를 사용해야 한다. arr.concat([3,4]) 2. splice const arr = [1,2] const arr2 = [3,4] arr.splice(2,0,arr2) //[1,2,[3,4]] 3. 스프레드 문법 const arr = [1,2] const arr2 = [3,4] arr.splice(2,0,...arr2) // [1,2,3,4] 단, 유사 배열 객체는 문법의 대상이 될 수 없다. const object1 = { 0 : 1, 1 : 2, length : 2 }; const arr = [...object1..

시맨틱 태그가 무엇인가요? HTML5의 여러 태그들은 그 자체로 어떤 의미를 지닙니다. 이번 시간에 배울, 왼쪽 사이드바에 나열된 태그들은 기능적으로는 div 태그와 동일하지만 각각의 종류 자체가 페이지에서 해당 요소가 갖는 의미와 역할을 나타내죠. 시맨틱 태그를 쓰면 뭐가 좋은가요? 웹 접근성 개선 스크린 리더로 페이지를 보는 사람들이 필요한 정보를 보다 수월히 찾을 수 있습니다. SEO (Search Engine Optimization) 검색엔진이 페이지를 분석할 때 각 정보의 종류를 파악하는데 도움이 됩니다. 유지보수와 가독성 모든 구획들이 div들로 구성된 페이지보다 코드를 읽고 구조를 파악하기 쉽습니다. 태그별 설명 header 페이지나 구획의 제목 역할을 하는 요소들을 두는데 사용됩니다. 로고..

웹 접근성 관련 참고자료 👉 W3C 페이지 👉 널리 (체험 및 교육) 1. 이미지는 alt 속성에 설명을 넣을 것 - 의미 없어도 alt = ""(공백)으로 처리 - alt가 없으면 스크린리더가 src의 링크를 읽음 2. css에 설명 넣기 (화면상에 보이지 않게) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } 3. aria-label로 설명 넣기 - 예시) ◀ 4. aria-hidden 속성과 role 속성 - : 스크린 리더가 읽지 않음 - : 특정 정보를 ..

1. DOCTYPE 문서가 형식과 버전으로 작성되었는지를 명시 선언시 standards mode(최신 형식)로 문서 실행 선언하지 않을 경우 quirks mode(익플5, 네이게이터 4 등 옛날 브라우저를 모방)로 문서 실행 ​ 2. head 태그 메타데이터(기계가 읽을 정보)가 담기는 곳 페이지의 제목 파비콘 기타 메타 정보 CSS와 자바스크립트 등의 코드 및 링크 3. title 태그 웹페이지의 제목 브라우저의 탭에 표시 브라우저 즐겨찾기의 제목으로 표시 검색엔진 검색결과의 제목으로 표시 4. meta 태그와 속성들 a. charset ​ 🎥 인코딩 관련 얄코영상 페이지가 어떤 문자로 작성되었는지 명시 - 글자가 깨지지 않도록 UTF-8 - 전세계 거의 모든 문자를 표현할 수 있는(유니코드) 형식 문..

약어 구문 Emmet은 생성된 트리 내 요소의 위치와 요소의 속성을 설명하기 위해 CSS 선택기와 유사한 구문을 사용합니다. 집단 div또는 같은 요소 이름을 사용 하여 HTML 태그 p를 생성 할 수 있습니다. divEmmet에는 미리 정의된 사용 가능한 태그 이름 세트가 없으므로 → , foo→ 등 의 단어를 작성하여 태그로 변환할 수 있습니다 . 중첩 연산자 중첩 연산자는 생성된 트리 내부에 약어 요소를 배치하는 데 사용됩니다(컨텍스트 요소 내부 또는 근처에 배치해야 하는지 여부). 어린이:> >연산자를 사용하여 요소를 서로 중첩 할 수 있습니다 . div>ul>li ...생산할 예정 형제자매:+ 연산자를 사용 +하여 동일한 수준에서 요소를 서로 가까이에 배치합니다. div+p+bq ... 출력합니..

img : html 문서에 이미지를 넣습니다. - 속성) src 원본파일 경로 절대경로 또는 상대경로 alt 대체 텍스트 스크린 리더, 원본파일 무효시(텍스트 설명이며 필수X) title 툴팁 alt의 대체제나 반복이 되어서는 안됨 width 너비 픽셀 단위의 정수 height 높이 픽셀 단위의 정수 table : html 문서에 이미지를 넣습니다. - 속성) 태그설명비고 테이블 표 설명 또는 제목 선택사항 테이블의 행 테이블의 데이터 셀 테이블의 헤더 부분 앞에 와야 함 테이블의 본문 본 내용을 담음 테이블의 푸터 부분 뒤에 와야 함 열 또는 행의 헤더 scope 속성으로 row, col 중 선택 colspan 열 병합 rowspan 행 병합 표에 열을 묶어서 속성 부여 보다 뒤, 그 외 요소보다 앞에..

1. 기본 태그 - h1~6, p, br, span, div 등등 - 모르는 태그는 mdn 사이트 검색하기 예시 : br mdn 사이트 : 줄바꿈 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다. developer.mozilla.org 2. 강조 태그 HTML 태그는 정보의 종류를 구분하는데만 사용합니다. (오늘날 스타일 정보는 CSS로 분리) 태그설명비고 b 글자를 굵게 (구버전 HTML) 👉 사용 일람 보기 strong 중요한 내용임을 명시 warning i 글자를 기울임 (구버전 HTML) 👉 사용 일람 보기 em 강조할 내용임을 명시 3. 첨..

이번엔 HTML 문서를 꾸미는 방법에 대해 알아보려고 합니다. CSS를 사용하는 이유, 목적 웹의 스타일(글꼴, 색상, 정렬 등)을 결정하기 위해 CSS를 사용합니다. 웹 문서의 내용과 상관없이 디자인을 설정할 수 있습니다. 기기에 맞게 탄력적으로 문서를 만들 수 있습니다. CSS의 형식 태그 후 선택자와 중괄호({}) 안에 스타일 속성과 속성값을 적어줍니다. 주석은 /* */를 사용합니다. 스타일 규칙은 세미콜론(;)으로 구분합니다. 가시성을 위해 여러 줄에 작성하는 경우가 많습니다. 외부 스타일 시트 스타일 규칙이 많을 경우 또는 같은 규칙을 여러번 사용할 경우 사용합니다. css 규칙들을 하나의 파일에 작성한 후 확장자를 css로 저장합니다. html의 태그 안에 문구를 추가합니다. 선택자 전체 선..