- [ Frontend/HTML ][HTML] 목록(리스트) 태그 [3/13 Study]2024-03-13 23:54:07HTML 목록(리스트) 태그 : 순서가 없는 리스트 (Unordered List)순서가 없기 때문에 앞에 ●과 같은 불릿이 붙는다CSS에서 list-style: none; 으로 순서 표시 없앨수 있음 : 순서가 있는 리스트 (Ordered List) 태그와 달리 태그는 기호가 아닌 숫자나 영문 순서가 들어감사용할 수 있는 속성들이 있다 속성!! 1) type=" "1숫자(기본값)a영어 소문자A영어 대문자i로마숫자 소문자I로마숫자 대문자 2) start=" "(중간 부터 시작하고 싶을때): list item 태그와 태그 안에서 각 항목을 나열할 때 사용한다 마지막으로 , , 모두 쓰이는 예제 목록1 목록2 목록1 목록2 목록3 목록3-1 목록..
- [ Frontend/HTML ][HTML] 글자/폰트 관련 태그 [3/13 Study]2024-03-13 23:43:11HTML5의 기본요소시작태그 속성1="속성값" ...속성n="속성값">내용종료태그> 글자/폰트 관련 태그 : 제목 태그까지 있다 - 숫자가 커질수록 폰트 크기는 작아진다.h를 사용한 것과 같게 보이는 태그들 도 많지만 태그를 사용한다는 것은 제목이 된다는 정보를 준다는 것이기 때문에 다른 내용과 구별해서 사용해야 된다.: 긴 가로선 표시----------------------------- 실선으로 표시: 줄 바꿈 태그를 그 맨뒤에 붙이면 삽입된 위치에서 줄이 바뀐다. ( 닫는 태그 x): 단락, paragraph태그를 사용하면 사용한 앞, 뒤로 빈 줄이 생기면서 단락이 생긴다.: 기울임 태그로 감싸진 내용을 기울임 꼴로 표현한다.: 기울임 태그보다 더 강조되고 중요한 태그이다.기울임 꼴로 표현한다.:..
- [ Frontend/HTML ][HTML] OG Tag(Open Graph Tag)란? [3/12 Study]2024-03-12 15:40:20https://doit-fwd.tistory.com/10 태그와 오픈 그래프(Open Graph)" data-og-description="오픈 그래프 프로토콜이란 SNS에서 특정 웹 페이지를 공유하면 짤막한 미리보기 화면이 나타나면서 마치 그 SNS의 게시물인 것처럼 자연스럽게 삽입됩니다. 어떻게 그럴 수 있을까요? 이것은 바" data-og-host="doit-fwd.tistory.com" data-og-source-url="https://doit-fwd.tistory.com/10" data-og-url="https://doit-fwd.tistory.com/10" data-og-image="https://scrap.kakaocdn.net/dn/bUzIWz/hyVADtu6mO/Do1OyBx3pSkiKMV..
- [ Frontend/HTML ][HTML] 메타 태그(Meta Tag)란 ? [3/12 Study]2024-03-12 15:29:46메타 태그 (Meta Tag) : 메타 태그란, 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 말한다.HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있다. 브라우저나 검색 로봇에게 해당 페이지의 정보를 알려주는 역할임, 웹 페이지 내에서 HTML 에 대한 메타데이터를 제공하는 역할을 한다. 따라서 메타태그를 이해하기 위해서는 메타데이터에 대한 이해가 필요하다. 메타 데이터(Meta Data): 데이터를 위한 데이터, 어떠한 목적을 가지고 만들어진 데이터웹사이트의 메타 데이터의 경우 주로 웹페이지에 대한 정보 제공 목적으로 사이트 설명, 키워드 등을 뜻한다. 메타 태그 속성에는..
- [ Frontend/HTML ][HTML] 시맨틱 태그 (Semantic Tag)란? [3/12 Study]2024-03-12 15:07:30시맨틱 태그 (Semantic Tag)란?:우선 시맨틱(Semantic)이란 단어는 무엇일까? 시맨틱 단어 그 자체에는 ‘의미의, 의미론적인’ 라는 뜻이 담겨있습니다.이로 유추해보았을 때, 시맨틱 태그는 태그 내용에 의미를 부여하는 태그라고 할 수 있습니다. 시맨틱 태그는 웹 페이지에 보이는 것 이상의 정보를 제공합니다. :시맨틱 태그 (Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그입니다.시맨틱 태그의 요소로는 , , , , , 등이 존재합니다. 이러한 시맨틱 태그 요소는 콘텐츠를 섹션으로 구성하고 각 부분의 역할과 기능을 전달하는 데 도움이 됩니다. HTML5에서는 시맨틱 태그의 등장으로 좀 더 명시적이면서 직관적인 구조의 설계가 가능해진 것 입니다.시맨틱 태그 ..
- [ Frontend/HTML ][HTML] HTML이란? [3/10 Study]2024-03-10 23:56:28HTML(HyperText Markup Language) : html은 웹페이지를 만들기 위한 가장 기초적인 마크업 언어입니다. html은 태그로 이루어져있고, 태그들을 이용하여 웹 브라우저 상에 텍스트, 이미지, 하이퍼링크등을 표시합니다. 태그들은 (꺾쇠)사이에 표기되며, 몇개의 태그들을 제외하고 내용처럼 반드시 닫아주어야 합니다. html은 혼자 쓰이기 보다는 CSS, 자바스크립트 등과 함께 쓰여 브라우저에 디자인적, 기능적 요소를 더해서 사용됩니다. 이하는 html문서를 작성하기 위한 가장 기초적인 html5의 기본 틀입니다. : 문서의 시작부분에 명시하며, 문서유형을 나타내 줍니다. 해당 문장은 웹 브라우저에게 html문서를 처리 하라고 알려주게 됩니다.: html문서가 시작되고 ..
- [ Frontend/CSS ][CSS] 캐스케이딩 (Cascading) 이란? [3/10 Study]2024-03-10 18:31:55Cascading 소개 : 스타일 규칙 및 선언이 어떻게 적용되는지에 대한 규칙 및 우선 순위가 결정되어야 합니다. 이를 캐스케이딩 이라고 하는데, 다양한 스타일 규칙이 충돌하는 상황에서 어떤 스타일이 최종적으로 적용되는지 결정합니다.CSS의 정식 명칭은 Cascading Style Sheets 라는 이름에서 볼 수 있듯이 Cascading은 CSS의 핵심이라고 할 수 있습니다.캐스케이딩은 다음의 3가지에 의해 결정됩니다.중요도(Importance) - !important로 선언된 스타일 규칙은 다른 모든 규칙보다 우선순위가 높습니다.명시도(Specificity) - 구체적인(특정한) 선택자가 높은 우선순위를 갖습니다. 예를 들어, ID 선택자가 클래스 선택자보다 높은 우선순위를 갖습니다.소스 순서(So..