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
HTML - 블록 레벨(Block level)요소와 인라인(Inline) 요소 1. 블록 요소 1. DIV, H1, P 2. 사용가능한 최대 가로 너비를 사용한다. 3. 크기를 지정할 수 있다. 4. (width: 100%; height: 0; 로 시작) 5. 수직으로 쌓임 6. margin, padding 위, 아래, 좌, 우 사용가능하다. 7. 레이아웃 2. 인라인 요소 1. SPAN, IMG 2. 필요한 만큼의 너비를 사용한다. 3. 크기를 지정할 수 없다. 4. (width: 0; height: 0; 로 시작) 5. 수평으로 쌓임 6. margin, padding 위, 아래 사용을 할 수 없다. 7. TEXT 3. display: block; ☞ 강제로 블록요소 처럼 만든다. display: in..
index.html Personal Open Source Business Explore main.css body{ margin: 0; padding: 0; } .header { background: white; border-bottom: 1px solid lightgray; } .container{ width: 980px; margin: auto; } .container-left{ padding-top: 20px; padding-bottom: 20px; } .logo{ float: left; margin-right: 5px; } .logo img{ display:block; } .menu{ float: left; } .menu-item{ float: left; padding: 8px 10px; } .cl..
1) 정리 1. HTML 뼈대 2. CSS 이쁘게 3. JS 생동감 있게 2) 웹 표준: Web Standard: 웹에서 사용되는 W3C의 권고안에서 나온 기술들, 표준기술이나 규칙 크로스브라우징: 여러 브라우저에서 동일한 사용자 경험을 줄수있도록 제작하는기술, 방법 요소 element -> , 문단 paragraph 태그에 속성과 값을 사용 할 수있다. 기능의 확장 source -> src alternative -> alt 만약에 이미지가 출력이 안될때 대체되는 텍스트가 출력된다. 이미지를 삽일할때 쓰는 태그 div 분할 -> division 의미없는 분할 홍길동 class="별명" 닫히는 태그가 없으면 빈 태그라고 한다. Empty Tag 부모와 자식요소 과일 목록 -> h1태그 ->ul태그 사과 -..