루체

용어(dt) 와 정의(dd) 쌍들의 영역(dl)을 설정하는 것입니다. 용어를 정의할 때는 태그를 사용을 하고 용어에 대한 설명을 명시할 때는 태그를 사용하고 이 용어와 정의의 전체 집합을 태그로 감싸주는 것입니다. dl은 Description List라는 약어이고 dd는 Definition Details라는 약어이고 dt는 Definition Term의 약어입니다. 주의사항 안에는 와 만을 사용해야 한다. dl 태그 안에 dd와 dt 태그만 사용이 가능하기 때문에 사용이 조금 덜 된다. 왜냐하면 주로 CSS로 디자인을 하려고 할 때 아무 의미없는 태그인 div를 사용해서 디자인을 많이 하는데 dl태그 안에는 dd와 dt태그만 사용이 가능하기 때문이다. 그래서 주로 이 태그 대신에 ul과 li 태그들을 사..

section 태그는 문서의 일반적인 영역을 설정을 할 때 사용을 합니다. article은 독립성을 가졌는데 section은 그 의미가 조금 더 희석되서 더 다양한 곳에서 사용이 가능하고 일반적으로 영역을 나누는데 사용이 됩니다. 그리고 이 section 태그 내부에는 article 태그를 집어넣을 수가 있습니다. 반대로 article 태그 내부에도 section 태그를 포함할 수 있습니다. 제약은 따로 없습니다. section을 가지고 영역을 나눌 때는 의미가 있기 때문에 제목 즉 h1~h6태그들을 포함을 합니다. 이게 바로 div 태그와 차이점입니다. 일반적으로 div는 의미없이 사용을 합니다. 반면 section은 의미를 가지고 있어서 제목을 가지고 있습니다. 특정 영역을 나누는 것은 동일 하지만 ..

article 태그는 독립적으로 구분되거나 재사용이 가능한 영역을 설정을 하는 것으로 블로그의 포스트나 매거진/신문 기사를 나타낸다고 생각하시면 됩니다. 일반적으로 h1 ~ h6태그를 포함하여 식별을 하며 작성일자와 시간을 의 datetime 속성으로 작성을 합니다. mozilla 사이트에 들어가서 예제를 확인을 해보겠습니다. 중간에 있는 article 부분이 forecast라는 곳의 바깥 쪽에 존재하더라도 이 콘텐츠로서의 가치가 유지된다라면 다른 태그보다 article태그를 사용을 하는 것이 좋습니다. 이것이 article 태그가 독립적으로 구분이 된다 라는 말입니다. 처음이라 사용이 어렵기 때문에 헷갈리다면 section이나 div 태그를 사용을 할 수도 있습니다.

main태그는 문서 내부의 핵심적인 콘텐츠를 나타낼 때 사용하는 태그입니다. 모질라 문서에서 확인해보면 주요 콘텐츠 구역은 문서의 핵심주제나 애플리케이션의 핵심 기능성에 대해 부연, 또는 직접적으로 연관된 콘텐츠들이라고 나와있습니다. 이 말을 조금 쉽게 풀어서 설명을 하자면 블로그 같은 곳에서 작성한 글들이 보이는 곳을 main 태그로 지정을 한다 라고 생각하시면 조금 더 편하게 생각할 수 있을 것 같습니다. 하지만 이 태그는 Internet Explorer에서는 지원을 하지 않기 때문에 인터넷 익스플로러를 필요로 하는 곳에서는 사용을 하시면 안됩니다.

h1 ~ h6태그는 목차에서 제목이나 컨텐츠의 제목같은 것을 지정을 할 때 사용을 합니다. 주의해야할 것으로는 몇가지가 있습니다. 첫번째로는 제목 폰트의 크기를 줄이기 위해 낮은 단계를 사용하시면은 안됩니다. 화면에서는 크기가 달라지게 지정은 되어있지만 각 태그마다 폰트의 크기를 정확하게 알지 못하기 때문에 h1~h6태그를 사용할 때는 폰트의 크기를 초기화해서 사용을 해야합니다. 왜 폰트의 크기를 줄이기 위해 낮은 단계를 사용하면 안되냐면 HTML은 구조를 나타내기 위해 사용을 하는 것이고 CSS는 표현, 즉 디자인을 하기 위한 용도의 언어이기 때문입니다. 두번째로는 제목의 단계를 건너뛰는 것을 피하셔야 합니다. 무슨말이냐면 우리가 html구조를 작성을 할 때 일반적으로 h1태그를 먼저 작성을 하게 될 ..

우리는 외부에 있는 CSS파일을 읽어올 때 link 태그를 아래와 같이 사용을 했다. 경로는 임의로 설정 지금은 간단하니까 문제가 되지 않지만 이렇게 필요한 경로를 매번 ./css/ 이런식으로 작성을 하는 것은 생각보다 복잡하고 귀찮아질 수도 있다. 이럴 때 사용을 하는 것이 base 태그이다. base 태그는 head의 어느 위치에나 있어도 상관은 없다. 사용법은 아래와 같다. 특정 상대경로를 작성을 할 때 하나씩 타고타고 들어갈 필요 없이 base에 이렇게 작성을 해두면 됩니다. 자주 쓰이는 태그는 아니라고 하는데 그래도 유용하게 쓰일 것 같다. 단 주의 사항으로는 이 base라는 태그는 기본적으로 HTML문서에 단 한번만 작성을 할 수가 있습니다. 기준으로 삼는 것이기 때문에 딱 한 번! 주요하게 ..

각각의 파일이나 어떤 특정한 개념이 어떤 타입인지를 명시를 꼭 해줘야 되는 부분이 있을 수 있는데 이것을 MIME 타입이라고 합니다. MDN 문서에는 MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘이라고 합니다. 간단히 설명을 드리면 연결하는 문서 즉 가지고 오는 문서의 타입 종류를 명시를 해줘야 서버나 클라에서 정확하게 인지하고 오류가 발생하지 않기 위한 방식을 설정을 해야된다는 것입니다. 이 MIME 타입도 종류가 엄청 많으니 다 외울 필요는 없습니다. text/html image/jpen, png 외부에 있는 html, jpeg, png 페이지를 가지고 오겠다라는 말입니다. audio나 video 등 종류가 많습니다. 이렇게 타입을 설정을 해줘야 문제가 발생하지 않고 ..

rel은 relationship의 약자이다. 현재 문서와 참조하려는 문서의 관계를 나타낼때 사용을 합니다. link 태그를 사용을 할 때 확실하게 설정을 해줘야 합니다. href(Hyper Text Reference)로 불러오려는 문서의 경로를 적어줘야 합니다. 항상 CSS파일을 외부로 빼는데 이 태그를 사용해서 다른 기능이 있는지 자세히 살펴보기 위해 MDN 사이트에 들어가보겠습니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/link HTML Link 요소 (link) 는 현재 문서와 외부 리소스와의 관계를 명시합니다. 이 요소는 네비게이션을 위한 관계형 프레임워크의 정의에도 사용될 수 있습니다. 이 요소는 스타일 시트에 링크하는 데에 가장 많이..

이부분은 우선 결과와 코드를 캡쳐해서 올리고 코드를 왜 이렇게 썼는지 쓰는게 나을 것 같다.. 뭐라 설명하기가 어렵다.. 제품 소개 완속 급속 휴대용 .section_product_wrap{ border: 1px solid black; position : absolute; width : 60%; display : grid; grid-template-columns: 1fr 1fr 1fr; } .section_product{ border: 1px solid black; width : 100%; text-align : center; position : relative; } 코드를 짜면서 든 생각은 div 태그의 사용을 조금은 줄여야 하지 않나 라는 생각이 들었다. 왜냐면 HTML에서는 단락을 나누는 태그, 이..

HTML에는 레이아웃을 위한 태그들이 있습니다. 따라서 레이아웃을 만들 때 그 의미에 맞는 것들을 사용을 하면 나중에 알아보기가 더 편하겠죠?? header section nav footer aside 레이아웃이 무엇이냐면 HTML화면을 구성하는 어떠한 기본적인 모습들을 이야기 하는 것입니다 상단의 Header 하단의 footer 그리고 가운데에는 본문영역이 있습니다. 또 웹사이트를 보면 네비게이션해주는 그런 영역도 있습니다. 이런 영역들은 대부분 다 의미를 가지고 있습니다. 주의 사항이라고 해야될지는 모르지만 footer를 그냥 써도 되지만 제대로 인식하게 되는 브라우저 지원범위가 사실은 제한이 있습니다. footer가 새로 HTML5에서 추가된 태그이기 때문에 보통 데스크탑 버전에선 사용을 하지 못하..