STUDY/HTML 36

CSS : position

CSS : position position은 문서상의 요소를 배치하는 방법을 정하는 태그이다. positon으로 요소의 배치 방법을 정하면 top, right, bottom, left로 최종 위치를 정한다. top : 위에서 어느 정도 떨어질 것인가 right : 오른쪽에서 어느 정도 떨어질 것인가 bottom : 바닥에서 어느 정도 떨어질 것인가 left : 왼쪽에서 어느 정도 떨어질 것인가 position : Static 기본값이며, position을 적용하지 않았을 때와 동일하다. #aaa { width: 100px; height: 100px; background-color: red; position: static; } #bbb { width: 100px; height: 100px; backgrou..

STUDY/HTML 2022.08.02

HTML : 목록을 나타내는 <ul>, <ol>, <li>

HTML : 목록을 나타내는 , , : Unordered List 비정렬 목록 순서 없이 아이템을 나열할 때 사용한다. ex: 메뉴 요소에 중첩되어 사용할 수 있다. 과 섞어서 사용할 수 있다. 예제 : 비정렬 목록 - 순서가 없이 아이템을 나열할 때 사용 HTML 삽입 미리보기할 수 없는 소스 비정렬 목록 순서가 없이 아이템을 나열할때 사용 ex:메뉴 예제 : 과 섞어서 사용할 수 있다. HTML 삽입 미리보기할 수 없는 소스 Nestion 리스트 : Ordered List 정렬하는 목록 각각 숫자를 갖고 있다. ex : 순위표, 레시피 등 예제 : 정렬할 때 사용하는 목록 HTML 삽입 미리보기할 수 없는 소스 정렬 목록 각각 숫자를 갖고 있음 ex: 순위표. 레시피 예제 : reversed 내부의 ..

STUDY/HTML 2022.07.07

HTML : 엔티티 (Entity) HTML 내에서 특수문자 작성하기

HTML : 엔티티 (Entity) - HTML 내에서 특수문자 작성하기 엔티티 (Entity) HTML 에서 문자 ," 및 & 은 특수문자이기때문에 해당 특문을 작성하면 코드로 인식한다 (예약어) 그렇기에 코드로 인식되지 않게 하기 위해서 entity 를 사용한다. 사용법 : &이름; - 앰퍼센트 (&)로 시작하고 세미콜론(;)으로 끝나는 텍스트 모양 코드 ( greater than) > " " ' &apos; & & 띄어쓰기 (non breaking space) 더많은 엔티티 (Entity)를 보려면 아래 웹페이지를 참고하면 된다. HTML Standard HTMLLiving Standard — Last Updated 6 July 2022 ← 13.2 Parsing..

STUDY/HTML 2022.07.07

HTML : a 와 하이퍼링크

HTML : a와 하이퍼링크 : anchor (닻) href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일 , 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만들 때 사용한다. 안의 콘텐츠는 링크 목적지의 설명을 나타내야 한다. 별도의 스타일링을 하지 않아도 파란색 글씨에 밑줄이 그어져 있는 게 기본값이다. 예시 HTML 삽입 미리보기할 수 없는 소스 You can reach Michael at: Website Email Phone 절대 경로 현재 위치와 관련 없이 절댓값의 위치로 이동함 (언제 어디에서 이동하든 같은 경로) google 상대 경로 현재 위치를 기준으로 목적지까지의 경로를 작성한다. ../ : 상위 디렉터리 ./ : 현재 위치의 디렉터리 경로 속성 herf ..

STUDY/HTML 2022.06.15

HTML : 컨테이너 요소 div, span

HTML : 컨테이너 요소 div, span div : The Content Division - 구획 HTML 는 플로우 콘텐츠를 위한 블록 컨테이너 이다. "순수"컨테이너로서 아무것도 표현하지 않는다.→ 의미를 갖고 있지않음 아무런 내용을 담고 있지 않으면, 보이지않음 class나 id로 여러 요소를 묶어서 스타일링 하기 쉽다. 예제 : HTML 삽입 미리보기할 수 없는 소스 div 블록요소이며, 한줄을 모두 사용합니다. 기술 요약 콘텐츠 카테고리 : 플로우 콘텐츠 가능한 카테고리 : 플로우 콘텐츠 태그 생략 : 종료태그 생략 불가능 가능한 상위 요소 : 플로우 콘텐츠를 허용하는 모든 요소 span : The Content Span 폭이나 넓이 HTML 은 구문 콘텐츠를 위한 인라인 콘테이너 "순수"컨..

STUDY/HTML 2022.06.10

HTML : 시맨틱 웹(Semantic Web) - <section>

HTML : 시맨틱 웹(Semantic Web) - : 일반 구획 요소 과 은 비슷하지만 다르다. 과는 다르게 제목요소 (h1~h6)는 필수요소가 아니며, 전체글의 흐름에서 문맥적으로 호흡이 끊길때 사용한다. 과 을 쉽게 구분하는 방법은 이 될수있다면, 을 쓰고 아니면 을 사용한다. 요소의 컨텐츠를 따로 구분해야할 필요가 있다면 을 사용한다. 일반 컨테이너로 사용하면 안되며, 단순 스타일링을 위해서라면 를 사용해야한다. 기술 요약 콘텐츠 카테고리 : 플로우 콘텐츠, 구획 콘텐츠 가능한 콘텐츠 : 플로우 콘텐츠 태그 생략 : 종료태그 생략 불가능 가능한 상위요소 : 플로우 콘텐츠를 허용하는 모든 요소 단, 요소는 의 하위요소가 될수 없다. 2022.05.27 - [TIL/HTML] - HTML : 시맨틱 ..

STUDY/HTML 2022.06.10

HTML : 시맨틱 웹(Semantic Web) - <article>

HTML : 시맨틱 웹(Semantic Web) - 문서, 페이지, 애플리케이션 또는 사이트 내의 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 말한다. 인터넷 뉴스 기사를 다른 웹사이트에 스크랩하더라도 내용을 이해하는 것에 문제가 되지 않는 것처럼 현재 페이지가 아니더라도 다른 웹페이지에 표시하더라도 문제되지 않는 콘텐츠를 담을때 사용한다. 여러 을 가질 수 있다. 기사 1 기사 2 기사 3, 정보 1 정보 2 정보 3 등 자체가 콘텐츠가 될 수 있지만 제목을 사용할 땐 ~ 을 이용하여 나타낸다. 기술 요약 콘텐츠 카테고리 : 플로우 콘텐츠, 구획 콘텐츠 가능한 콘텐츠 : 플로우 콘텐츠 태그 생략 : 종료 태그 생략 불가 가능한 상위 요소 : 플로우 콘텐츠를 허용하는 모든 요소 요소는 의 하위 ..

STUDY/HTML 2022.05.31

HTML : 시맨틱 웹(Semantic Web) - <aside>

HTML : 시맨틱 웹(Semantic Web) - 문서의 주 내용과 직접적인 연관은 없지만 간접적으로 연관이 있을 때 사용한다. 영어의 단어 뜻이나 블로그 류의 추가적인 콘텐츠(광고 등)를 나타날 때 사용한다. 와는 성격이 다르다. 는 부가적인 내용이지만 굳이 없더라도 문제가 되지 않는다. 예제 HTML 삽입 미리보기할 수 없는 소스 Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms. The Rough-skinned Newt defends itself with a deadly neurotoxin. Several spec..

STUDY/HTML 2022.05.31

HTML : 시맨틱 웹(Semantic Web) - <nav>

HTML : 시맨틱 웹(Semantic Web) - 문서의 부분중 현재페이지내 또는 다른 페이지로의 링크를 보여주는 구획이다. ( 예제 01참고 ) 현재 어느 경로에 있는지를 나타내며, 다른페이지로 넘어갈수있다. 예제 01 HTML 삽입 미리보기할 수 없는 소스 Bikes BMX Jump Bike 3000 메뉴,목차,색인 현재페이지내에서 누르면 이동하여 보여주는것을 말한다. 와는 성격이 다르다. 는 모든 웹페이지에 동일하게 들어가며, 전체를 아우르는 링크를 담고있다. 는 현재의 웹페이지의 상위나 현재 페이지내의 개요를 담고 있다. 기술요약 콘텐츠 카테고리 : 플로우 콘텐츠, 구획콘텐츠 가능한 콘텐츠 : 플로우 콘텐츠 태그생략 : 종료태그 생략 불가 가능한 상위요소 : 플로우 콘텐츠를 허용하는 모든 요소 ..

STUDY/HTML 2022.05.31

HTML : 시맨틱 웹(Semantic Web) - <footer>

HTML : 시맨틱 웹(Semantic Web) - 주로 웹의 맨 하단에 위치해있다. 웹페이지의 정보나 연관된 사이트를 나타낼 때 사용한다. 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다. 기술 요약 가능한 콘텐츠 : 플로우 콘텐츠 가능한 콘텐츠 : 플로우 콘텐츠 단, 와 다른 는 하위 요소가 될 수 없다. 태그 생략 : 종료 태그 생략 불가 가능한 상위 요소 : 플로우 콘텐츠를 허용하는 모든 요소 단, 요소는 , , 혹은 다른 의 하위 요소가 될 수 없다. HTML 삽입 미리보기할 수 없는 소스 레슈의 연락처 sol.reshur@gmail.com 123 456-78.." data-og-host="sol-reshur.tistory.com" data-og-source-url="https://sol-..

STUDY/HTML 2022.05.31