기억의 DataBase

controls : 위와 같은 조작 메뉴를 띄움 autoplay : 해당 페이지에 접속하면 자동 재생 loop : 반복재생 muted : 음소거 상태에서 시작 preload : 실행전 가져올 data(metadata가 무난) poster : 재생전 썸네일 이미지 width/height : 영상 창 크기 지정 나머지는 audio와 동일 외부 사이트의 컨텐츠를 가져오는 것으로 유튜브의 경우 동영상에 우클릭을 하면 iframe 정보를 주므로 그대로 붙혀넣으면 된다. (일부 사이트는 불가)

파일 등의 기본 경로를 지정 한 html에 하나만 사용가능 (prefix와 유사 - 잘 못 쓰면 꼬일 것 같기도...) h태그를 가지고 글자 크기를 조절하는 것 지양 (CSS로 하는 것이 바람직 - html은 구조만을 규정) h1~h6까지 순서대로 쓰는 것이 좋으며 h1은 한번만 사용을 권장한다. 빈tag 형식과 그냥 tag 형식 모두 가능 (가급적 한가지로 통일) html 상의 줄바꿈 = 브라우저 띄어쓰기 줄 바꿈은 (줄 간격을 주기위해 사용 X) html상에 작성한 text를 보여지는 그대로(띄어쓰기, 줄바꿈) 브라우저에 보여주고 싶을 때 태그 사이에 인용문을 적고 cite에는 인용문 원본 URL 정보를 적시 cite를 속성이 아닌 tag로 쓸때는() 책, 영화, 음악 등의 작품명을 명시할 때 사용 ..

division(분할, 구분)의 약자로 구역을 나누는 block 요소다. (막 쓰기 좋다.) 문서, 기사라는 단어 뜻처럼 컨텐츠 구역을 의미하며 주로 독립성(단독 재사용 가능) 있는 컨텐츠에 사용된다. 제목 요소(h1, h2 등)를 포함하고 있으며 컨텐츠 등의 집합을 포함할 때 사용된다. 사실 3가지 모두 퉁쳐서 로 작성해도 눈에 보이는 차이는 없다. (기기마다 차이가 있으려나...?) html은 semantic(의미론)하게 작성해야 한다는 말을 들은 적이 있다. 더 공부하다보니 알게 된 위 문장의 의미는 개발자와 검색엔진 등을 위해 각 요소들을 의미에 맞게 사용해야 한다는 것이다. 사실 보이는 내용만 생각하면 , , 만으로 대부분의 text 관련 html을 작성할 수 있을지 모른다. 하지만 각 text..

블록요소(div, h1, p, section, nav...) 1) 사용가능한 최대 가로 너비를 사용(width: 100%; height: 0;) 2) 크기 지정이 가능 3) 수직으로 쌓임 4) margin, padding이 상하좌우 모두 적용 가능 5) 레이아웃을 위한 용도 인라인요소(span, img, a...) 1) 필요한 만큼의 너비만 사용(내용이 있는 만큼만 사용) 2) 크기 지정이 불가 3) 수평으로 쌓임(수직으로 작성하면 띄어쓰기 발생) 4) margin, padding이 좌우만 적용 가능(상하는 미적용) 5) Text를 위한 용도 ※display: block/inline으로 변경 가능

인라인 방식 인라인 내용 위와 같이 요소 내에 직접 style을 적용하는 것으로 변경시 하나하나 다 바꿔줘야 하기 때문에 지양된다. (js로 조작되는 경우는 사용됨) 내장 방식 HTML의 head 태그 내에 style을 작성하여 해당 html 파일 내에 적용하는 방식으로 재사용에 적합하지 않다. (쓰기 제일 애매한듯...) 링크 방식 가장 권장되는 방식으로 변경과 유지보수 모두에 용이하다. *세가지 모두가 쓰였을 때 적용의 우선순위 인라인 방식 > 내장 방식 > 링크 방식 (링크 방식을 기본으로 하고, 필요한 경우 인라인 방식을 쓰는게 BEST?)

VScode에서 파일 종류를 *.html로 저장하고 나서 빈 에디터에 ! + Tab/Enter를 입력하면 나오는 HTML 요소들은 위와 같다. (기본 틀은 굳이 타이핑 할 필요 없다...) head 요소들을 몇가지 추가 해보았다. 웹브라우저 탭 아이콘은 파비콘(Favicon)이라고 하는데 즐겨찾기 시에도 추가되는 이미지라 하니 웹사이트 대표 아이콘이라 할 수 있겠다. 파비콘 이미지 파일은 *. ico 형식으로 해야 IE에서 지원한다고 하니 신경 쓸 부분이다.