루체

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에서 추가된 태그이기 때문에 보통 데스크탑 버전에선 사용을 하지 못하..

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 을 사용하면 인라인요소를 사용하는 태그를 블록으로..