Programmers

IMG : 이미지를 삽입 IMG 속성 src: 필수, 이미지 url alt: 필수, 이미지가 안 들어왔을 때 대체 텍스트 width: 이미지의 가로나비 height: 이미지의 세로 너비 ※width, height는 크기를 조절하는 용도라면 둘 중 하나만 입력하는 것이 바람직하다. width, height 예제 1 px로 사이즈를 지정하지 않았다. 숫자만 넣었다. width, height 예제 2 - index.html - main.css img { width: 666px; } css를 이용해서도 이미지의 사이즈를 조절할 수 있다. srcset: 브라우저에게 제시할 이미지 url과 원본 크기의 목록을 정의 값 w, x sizes: 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의 srcset..

: definition 용어의 하나를 정의할 때 사용 ↔ dl dt dd 용어와 설명을 나열, 많을 때 사용 the internet is useful : 창작물에 대한 참조를 설정, 이탤릭체로 표시 The Scream by Munch : inline quotation 짧은 인용문을 설정, 조금 길다싶으면 blockqoute태그를 사용 cite속성을 통해서 url로 명시할수있다. : underline 밑줄이 있는 글자 설정, css에서 사용하자. 순수하게 꾸미는 용도 안 쓰는 게 낫다. 와 헷갈리지 않게 주의 - 밑줄 그어져 있으면 클릭이 될 거 같으니깐, 을 활용할 수 있을 경우에는 태그 사용하지 말자 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 u태그를 이용해서 밑줄을 그었다. - ..

1. ABBR abbreviation 약어를 지정 보통 title속성(전역 속성)을 사용, title에는 설명 abbr 예제 Using HTML is fun and easy! HTML텍스트 아래에 점선이 그 여지는 것을 볼 수 있다. 마우스를 올리면 코드에서 설정했던 title의 내용을 볼 수 있다. 2. B, MARK, EM, STRING, I : bring attention 문체가 다른 글자의 범위를 설정, 특별한 의미를 가지지 않음 읽기 흐름에 도움을 주는 용도 정도로 사용 다른 태그가 적합하지 않을 때 마지막 수단으로 사용 글자를 두껍게 표시되나 이용도로 사용하면 안 된다. css를 이용해야 한다. : mark text 사용자의 관심을 끌기 위해 하이라이팅을 할 때 사용 의미보다는 시각적인 것이 ..

A : anchor 다른 페이지, 같은 페이지 위치, 파일, 이메일 주소, 전화번호 등 url로 연결할 수 있는 하이퍼링크 설정 속성 download: 파일은 다운로드하는 용도 href: 링크 url, 필수처럼~ 써야한다. 생략 가능하지만. hreflang: 링크 url의 언어를 설정 rel: relation 현재 문서와 링크 url의 관계를 설정 target: 링크 url의 표시위치, _self 현재 화면에서 페이지 뜨도록(default), _blank 새로운 화면에 페이지 뜨도록 type: 해당하는 url의 MIME타입, 굳이 명시 안 한다. 인라인 요소이지만 버튼을 css로 꾸미게 될 경우 블록 요소로 변경 후 사용하는 게 일반적이다. a태그 예제 Google README.md Image downl..

1. DL, DT, DD 용어를 정리하는 태그 dt: description list dd: definition details dl: definition term dd, dt만을 포함해야 한다. 키는 값이다! → 용어는 ~ 설명! coffee Coffee is good milk milk is delicious coffee coffee is good milk milk is delicious 윗부분은 dl dt dd로, 아래는 li, dfn, p로 스타일링 2. P, HR p: 하나의 문단을 설정, 다음 문단으로 넘어갈 수 있는 단축키를 제공 hr: 문단의 분리를 위해 설정, 빈 태그, 수평선(시각적)으로 표현되지만 의미적 관점에서 사용해야 한다. 표현되는 부분은 css로 없애거나 수정이 가능하다. p태그 예..

HTML / 요소 - 문자 콘텐츠 목록을 만드는 태그 + + ol: ordered list 순서대로, 중요도를 의미할 수 있다. 블록 요소 ul: unordered list 순서 필요하지 않은 리스트 아이템 li: 는 단독으로 사용 안되고 이나 의 자식으로 포함되어야 한다. ul태그 예제 Apple Apple Banana Mango Banana Mango ol태그 예제 1 Apple Apple Banana Mango Banana Mango ol태그 예제 2 Apple Apple Banana Mango Banana Mango ol태그의 type속성을 통해서 a, A, 1,.. 등 을 사용할 수 있다. reversed속성은 값의 순서를 바꾸는 것이 아닌 순서를 역순으로 바꿔준다. 우선순위를 역순으로 할 때 ..

https://heropy.blog/2019/05/26/html-elements/ 한눈에 보는 HTML 요소(Elements & Attributes) 총정리 인터넷에 검색 가능한 많은 HTML 문서들의 내용을 요소(Elements), 속성(Attributes)의 개념으로 핵심적인 내용들만 요약해서 정리했습니다. 각 요소들의 자세한 설명은 패스트캠퍼스 온라인 강의(online heropy.blog Body태그 내의 태그 메뉴1 메뉴2 메뉴3 Section Article1 Contents... Article2 Contents... Article3 Contents... Aside nes0410@gmail.com 010-3356-5548 - main.css header { background: tomato; m..

https://developer.mozilla.org/ko/docs/Web/HTML HTML: Hypertext Markup Language | MDN HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기 developer.mozilla.org 검색을 통해서 메타 데이터 속성들을 확인하면서 사용하자. LINK STYLE MIME Type BASE