분류 전체보기 (35) 썸네일형 리스트형 메타데이터의 역할 <head> metadata -데이터를 설명하는 데이터 (데이터를 위한 데이터) -ex. 책 앞부분에 저자, 발행일, 출판사와 같은 정보들. 책이란 데이터를 설명하는 책 앞부분 데이터 -html 데이터를 설명하는 데이터를 뜻함, 걔네가 head로 들어감 문서 제목 요소 -브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의 -1 head 에 1 title 에 Document 로 되어 있어 위에 Document 라고 뜨게 됨 즐겨찾기를 해도 그 이름에 에 쓰여진 이름이 들어감 타이틀을 지을 때에 이 페이지인지 식별 가능하게 해주는것이 좋음! 나와 비슷한 페이지가 있더라도 타이틀을 잘 짓는 웹페이지가 상위 노출 됨. 명사로만 니열하지 읺는 것이 좋음- 검색엔진이 설명하지 않고 광고 페이지로 인식을 하는 경우가.. Form 관련 요소 사용자에게 정보를 얻을 수 있는 장치는 마련 사용자가 정보를 입력하면 다른 페이지나 서버로 전송 할 수 있도록 마련 ->대화형컨트롤을 포함하는 문서 구획 양식 데이터를 처리할 프로그램의 URI. => 다른 페이지나 서버로 전송될 폼데이터의 최종 목적지 주소를 action에 넣음. 상대경로로 다른 파일로 연결할 수도 있음. method get: 받은 정보가 주소창에 노출이 됨. 검색어와 같은 것들이 사용되고 비밀번호와 같은 개인정보는 get을 사용하면 안됨 post: 주소창에 드러나지 않음. , enter your name : ---> label 쓸수 있는 창 ---> input input 과 label이 쌍으로 움직임 인라인이기 떄문에 로 묶음 과 을 사용하게 되면 꼭 for와 id를 함께 사용 하여야 .. 임베디드요소 내용을 코드로 작성하는것이 아니라 외부의 소스를 가져와서 웹페이지에 표현하는 방법 ex. 이미지 비디오 이미지 삽입요소 빈요소- 닫는태그가 사용되지 않음 -src (source) 특성은 필수 ,src 속성에 값으로 들어가는 애들이 url, 이미지가 위치한 파일의 경로 절대경로 어떤 위치에서 어떤 파일이던간에 보여질 수 있는것들 마우스 우클릭- 이미지 링크복사 한 값들을 넣어서 사용 상대경로 내가 있는 현재 위치에서 이미지가 있는 위치를 나타내고 가리킬때 현재위치가 어디냐에 따라서 다른 이미지가 보여질 수 있음 이미지 파일을 만든 뒤에 파일을 넣어두고 경로를 입력 ( alternative 속성 = 대체 텍스트) 이미지에 대한 설명을 텍스트로 직접 입력하는 속성 스크린 리더 사용에 용이 접근성 올라감 절대경.. 목록과 표 아이템들을 표현 할때 list item order list 순서가 있는 정렬 목록 순위를 나타내거나 단계적으로 수행해야하는 것들 (ex. 요리 레시피) 요리 레시피 ol 태그를 했기 때문에 자동적으로 1,2,3,4가 붙은 것 0개 이상의 태그를 갖고 있어야 함. 속성 태그가 아니더라도 태그에 value="" 하게 된다면 똑같이 설정을 할 수 있다. 중간에 넣어도 됨. reversed 를 통하여 역전도 가능 unodered list 비정렬 목록, 순서 없는 목록 순서 없이 아이템들을 나열할때 (ex.메뉴) 태그 안에 태그를 넣을 수 있음. 용어를 정의하거나 설명할때 사용 (용어)와 (설명) 태그를 자식으로 갖을 수 있음 주로 용어 사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용 태그 안에 용어.. 구조를 나타내는 요소 콘텐츠 분할 요소특정구역이나 구획을 분할 하거나 묶을때 사용순수 컨테이너로서 아무것도 표현하지 않는다. (의미를 갖고있지 않음)일괄적인 스타일링을 한다던지 묶어서 특정 위치에 놓고 싶을때 사용 문서의 특정 구역이 다른 언어임을 leng속성을 사용하여 표시하는 용도로 사용 -유지보수가 편해진다.-협업이 쉬워진다.순수한 컨테이너 구문콘텐츠를 위한 통용 인라인 컨테이너 본질적으로 아무것도 나타내지 않음. 시맨틱 웹(Semantic Wen>웹페이지를 만들때 div를 이용해서 할 순 있지만 그게 어떤 의미인지 모름 (아무런 의미를 갖고 있지 않은 순수 컨테이너)----> 시맨틱(의미의, 의미론적인) 태그를 시맨틱 태그, 시맨틱 요소라고 부름. 요소의 의미를 고려하여 구조를 설계하고 코드를 작성함. 의미론적인 .. 포매팅/하이퍼링크 포매팅: 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도 다른 애들에 비해 더 의미를 둠 요약키워드 글씨가 굵게 나타남 리뷰의 제품명, 특별한 중요성을 가지고 있지는 않지만 굵게 표시할 부분에 사용 특정부분을 강조해야함. 문단 전체를 b 태그로 묶지 못함 -> 전체 문단에 css를 사용해야함 높은 중요도 요소 글씨가 굵게 나타남 와 다르게 더 중요한 점을 강조할때 사용함 텍스트가 기울어지게 표현됨 주위와 구분해야하는 부분에 사용 ex. 기술용어, 외국어구절. 등장인물의 생각 등 단순히 글자가 예뻐보이려고 사용하면 x -->css 활용 텍스트가 기울어지게 표현됨 텍스트의 강세를 나타냄. 맥락의 관련이 깊거나 중요해서 하이라이트(형광펜) 부분을 나타냄. 인용문 나 에서는 별도 표시가 없어 특별히 봐야 하는 부.. 텍스트 요소 h1~ h6 ( heading) 6단계의 구획 제목 구획 단계는 이 가장 높고 가 가장 낮다. -제목의 정보를 사용해 자동으로 문서 콘텐츠의 표를 만드는 등의 작업을 수행할 수 있다. -글씨 크기를 위해 제목 태그를 하면 x -? CSS 의 font-size 속성 사용 -~ 순차적으로 기입 -페이지 당 하나의 태그 하나의 문단을 나타냄 (이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 가능) -콘테이너 역할 -> 단독으로 사용 하지 못함 블록레벨 요소 - 가로 전체를 차지함 ex) 첫 번째 문단입니다. 첫 번째 문단입니다. 첫 번째 문단입니다. 결과=> 첫 번째 문단입니다. 첫 번째 문단입니다. 첫 번째 문단입니다. 브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리 빈 요소를 사용해 문단 사이에.. VScode 단축키 *맥은 ctrl 대신 cmd 에디터 창 제어 현재 창 닫기 ctrl + w 닫은 창 다시 열기 ctrl + shift + t 사이드바 토글 ctrl + b 사이드바 탐색기 ctrl + shift + e 사이드바 전체검색 ctrl + shift + f 에디터 확대 ctrl +(=) 에디터 축소 ctrl + - 소스코드 편집 들여쓰기 Tap 내어쓰기 shift = tap 아래에 행 삽입 ctrl+enter 위에 행 삽입 ctrl + shift + enter 현재 행 이동 alt + ↑ , ↓ 현재 행 복사 alt + shift + ↑ , ↓ 현재 행 삭제 ctrl + shift + k 주석토글 ctrl + / 이전 1 2 3 4 5 다음
