#7 HTML 코딩연습
[강의내용 메모]
css 선택자 라는 것은 픽업의 의미와 똑같다.
속성선언규칙을 따라 종류에 상관없이 사용해도 무방하다. <- html의 관대성
ex) #dog ul li span{color:red;}
각각의 태그를 한 칸씩 띄운다. 기본속성, id, css
특정값을 부여한다.
<h1>태그의 의미
<span>을 줘서 충분히 사이즈를 키울 수 있으나, 왜 <h1>을 써야만 하나?
그 해답은 씨멘틱이다..
MDN 사이트에 그 해답이 있어 참고한다.
우리는 왜 Semantic을 필요로 할까?
Semantic(직역 : 의미를 담은, 의미론적인)은 우리 주변 어디에서나 사용됩니다. 우리는 과거의 경험으로부터 일상적인 대상의 기능이 무엇인지 구분합니다. 우리가 어떤 것을 보면 그것의 기능은 무엇일지 알 수 있습니다. 그래서, 예를 들어, 우리가 빨간 신호등을 '멈춤'으로, 초록 신호등을 '출발'로 인식합니다. 잘못된 semantic들이 적용될 경우 상황은 복잡해집니다. (빨간색을 '출발'로 사용하는 나라가 있을까요? 없기를 바랍니다.)
비슷한 맥락에서, 우리는 정확한 요소를 사용하고 있는지, 우리의 컨텐츠에 정확한 의미, 기능, 모습을 담았는지 확실히 해야 합니다. 이 맥락에서 <h1> 요소 또한 텍스트에 "내 페이지 최상위 heading"의 역할로 감싸는 semantic 요소입니다.
<h1>This is a top level heading</h1>
기본적으로, 브라우저는 이에 큰 사이즈의 폰트를 적용해 heading처럼 보이게 할 것입니다. (비록 당신이 CSS를 사용해 원하는 어떤 모습으로도 스타일 할 수 있지만 말입니다.) 더 중요하게, 이것의 의미론적인 가치는 다양한 방식으로 사용될 것입니다. 예를 들어 검색 엔진이나 screen reader들에서 말이죠. (위에서 서술한 것처럼.)
반면에, 당신은 어떤 요소도 최상위 heading처럼 보이게 할 수 있습니다. 다음을 고려해 봅시다:
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>이것은 <span> 요소입니다. 의미가 없죠. 당신은 컨텐츠에 추가적인 의미를 더하지 않고 CSS 를 적용하고 싶을 때 (혹은 JavaScript를 적용해 무언가를 하고 싶을 때) 이것을 사용합니다. (이것들에 대해서는 코스 뒤에서 더 알게 될겁니다.) 우리는 이것에 CSS를 더해 최상위 heading처럼 보이게 했지만, 이것이 semantic(의미론적인) 가치는 없기 때문에, 위에서 서술된 추가적인 이득들은 얻지 못할 것입니다. 작업에 관계있는 HTML 요소를 사용하는 것이 좋은 생각입니다.