루체

용어(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) 는 현재 문서와 외부 리소스와의 관계를 명시합니다. 이 요소는 네비게이션을 위한 관계형 프레임워크의 정의에도 사용될 수 있습니다. 이 요소는 스타일 시트에 링크하는 데에 가장 많이..

Head부분의 meta 태그는 뒤에 닫는 태그가 없어 사용을 하면 오류가 생길 수 있다! 그리고 meta 태그는 속성을 가지지 않으면 역할을 충실히 이행을 할 수가 없습니다. meta 태그의 속성으로는 name이나 content나 charset등이 사용이 됩니다. charset Character Sets의 약자로 문자가 인코딩 되는 방식을 정해주는 것입니다. 대부분이 UTF-8을 값으로 정해준다. 문자가 인코딩되는 방식을 정해주는 것이기 때문에 title 태그와 같이 문자가 작성이 되어있는 것보다 상위에서 작성이 되어야 한다! EUC-KR이라는 것도 사용이 되긴 하는데 EUC-KR은 완성형이고 UTF-8은 조합형입니다. 완성형은 제대로 된 문장이 없으면 한글이 깨지는 현상이 발생할 수도 있습니다. .....

이번에는 인라인 요소와 블록 요소로 왜, 어떻게 구분되고 어떻게 바꿔서 쓸 수 있는지 알아보겠습니다. 우선 인라인 요소를 블록으로 바꾸는 것을 알아보기 위해 아래 코드를 작성을 해주세요. 안녕 body{ margin:0; padding:0; } span{ background: red; width : 120px; hegith : 80px; } 지금 CSS에 span에 높이와 너비를 입력을 했지만 인라인 요소라서 적용이 안됩니다. 이것을 적용시키기 위해 인라인 요소를 블록 요소로 바꿔보겠습니다. span{ background : red; width : 120px; hegith : 80px; display : block; } 이렇게 display : block 을 사용하면 인라인요소를 사용하는 태그를 블록으로..