TIL 4 | HTML & CSS (4)
1. Semantic Web & Semantic Tag
1) 시맨틱 웹(Semantic Web)이란?
1998년 Tim Berners-Lee가 제안한 차세대 웹 기술.
사람이 이해할 수 있도록 구현된 기존의 웹문서가 가진 한계를 보완하고, 컴퓨터가 스스로 의미(semantic)를 파악하고 사용자가 필요로 하는 정보를 추출할 수 있도록 한다.
2) 시맨틱 태그(Semantic Tag)
Semantic tag는
<form>
,<table>
,<article>
과 같이 자신의 컨텐츠를 명확하게 정의하는 tag를 의미한다.
-
Semantic tag의 장점
<div>
,<span>
과 같이 자신의 컨텐츠에 대해 아무것도 설명해주지 않는 non-semantic tag를 이용하는 경우, class, id를 부여하여 구역을 나누고 스타일을 지정해야 한다.
반면, semantic tag를 사용하게 되면 개발자가 의도한 요소의 의미를 명확히 드러냄으로써 코드의 가독성을 높이고 유지보수를 용이하게 한다.
-
<img>
태그와<div>
를 이용하여 이미지를 삽입하는 경우, 어떠한 차이가 있을까?-
<img>
태그를 이용하는 경우
Semantic element인<img>
태그를 이용하는 경우, 태그명에서도 알 수 있듯 image라는 요소의 의미를 명확히 드러낼 수 있다.
Semantic tag는 검색엔진 최적화(SEO: Search Engine Optimization)에 영향을 미치는데,<div>
,<span>
만 사용한 문서는 중요성을 가늠하기 어렵지만,<title>
,<header>
,<article>
등의 semantic tag로 구성된 semantic web은 검색 결과 상위에 노출 된다.-
<div>
태그에 CSS의 background-image 속성을 추가하여 이미지를 삽입하는 경우
background-image 속성을 이용하는 경우,<img>
태그에서 사용할 수 있는 attribute인 alt를 이용할 수 없기때문에, 지속적으로 노출을 할 필요가 없거나 중요하지 않은 이미지를 삽입할 경우에는 오히려 유용할 수 있다. 왜냐하면 에러가 날 경우 대체할 이미지가 없기 때문에 실패한 이미지나 텍스트 노출 대신 아무것도 노출되지 않는 것이 더 유리할 수도 있기 때문이다.
2. Weegle 검색페이지 만들기
지금까지 배웠던 개념들을 이용해 웹페이지를 만드는 과제.
이 과제를 수행하며 논리적이고 효율적으로 구조를 짜는 것에 대한 중요성을 한번 더 깨닫게 되었다.
구조를 짜면서 아직 개념이 모호하거나 공부가 필요하다고 생각했던 부분에 대해 정리하려고 한다.
CSS의 display 속성
-
display: flex;
flex
는 수평구조를 만들 때 편리하게 만들 수 있도록 도와주는 display의 속성값으로 요소의 크기가 불분명하거나 동적인 경우에도 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다 (간단한 수직구조도 가능).flex
는 item과 그 item들을 담는 container, 2개의 개념으로 나눠지는데, 여기서 container는 부모 요소이고, item들을 정렬하기 위해 필수적이다.
container에는display
,justify-content
등의 속성을 사용할 수 있다.display
flex 정의
justify-content
주 축(main-axis)의 정렬 방법 설정여기서는
button-wrap
이 item,grid-wrap
이 container가 되고, container에display:flex;
와justify-content:center;
를 주어 위치를 맞췄다.
/* HTML */
<div class="grid-wrap">
<div class = "button-wrap">
<button class="btn">Weegle 검색</button>
<button class="btn">I'm feeling Lucky</button>
</div>
</div>
/* CSS */
.grid-wrap {
width: 100%;
display: flex;
justify-content: center;
margin: 20px 0 20px 0;
}
-
display: grid;
grid
는 2차원의 레이아웃을 제공하는 display 속성값으로flex
보다 복잡한 레이아웃을 만들 수 있다.grid
역시flex
와 마찬가지로 container와 item으로 나뉘어져 있으며, container 내에서 각 item을 배치할 수 있으며,grid-template-columns
,align-items
,grid-gap
등의 속성을 사용할 수 있다.grid-template-columns
열의 크기 정의
align-items
grid 아이템들을 수평 정렬
grid-gap
grid 내 아이템들의 행과 열 간격 정의아래에서 보면 두 버튼이 하나의 grid로 묶여 있음을 알 수 있다.
/*CSS*/
.button-wrap {
display: grid;
grid-template-columns: 130px 130px;
align-items: center;
grid-gap: 10px;
}
Author And Source
이 문제에 관하여(TIL 4 | HTML & CSS (4)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hjulee12/TIL-4-HTML-CSS-4저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)