21.2.15
-
(HTML) id와 class 속성의 차이
class
(학습 자료 중)class도 태그에 이름을 주는 속성
id와 비슷한 역할이지만, class는 여러 태그에 중복된 이름을 부여할 수 있음. -
(CSS)
(학습 자료 중)"Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데,
폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용 -
(CSS) RGB 컬러 표현법
.pink {
color: rgb(255, 192, 203);
}
- (CSS) css로 들여쓰기 하기
### indent
.js-description {
text-indent: 50px;
}
- (CSS)margin과 padding
참고 블로그
- margin은 객체와 외부와의 영역
- padding은 객체와 이를 둘러싼 border와의 영역
-
(CSS) 프로퍼티 모두에 적용하는 방법 -> *
-
(CSS) Box-Sizing
box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성. inherit, initial, content-box, border-box 기준을 속성으로 사용 가능
-
(CSS) CSS 선택자 우선 순위
tag <<<<< class <<<< id <<<<<< inline css
(연장선)
.container header p.title {
font-size: 50px;
}
를 표현하기 위해 했던 작업 : div를 생각하자.
<div class="container">
<header>
<p class="title">나는 p태그</p>
</header>
</div>
#### Semantic Web과 Semantic Tag에 대한 이해
- img vs div 이미지 넣는 것에 대한 차이
img : HTML 태그로 직접 이미지를 삽입.(바탕에 띄운다)
div : CSS 태깅을 통해 구분된 영역에 백그라운드 형식으로 이미지를 삽입.(바탕 그 자체, 인라인과 블럭 차이가 있음.)
따라서 코드를 보기 전까지는 사이즈 변경 등 다양한 요소가 있어 구분하기 어렵다.
- Semantic Web과 Semantic Tag에 대한 이해
-
배경 : 편리한 웹에 겉잡을 수 없이 많은 정보가 누적. 이로 인한 정보 처리 및 분석에 대한 필요성이 생겨서 나옴. 기계가 읽고 해석할 수 있는 웹을 개발하고자 나온 것이 Semantic Web.
이 의미 있는 웹에서 나온 것이 현재 우리가 HTML에서 사용하고 있는 태그인 Semantic Tag -
Semantic Tag의 와 Non-Semantic Tag의 차이 : 태그 자체가 특정한 속성이나 역할, 사용자가 의미를 담을 수 있는가 없는가 차이.
예 : 단순한 구획(header, div...) / 그 자체가 의미가 있고 추가로 사용자가 전달할 수 있는 태그(form, img...)
(이해한 바) 무분별한 정보가 웹상에 개재되는 것을 막고 일종의 형태를 만들고자 태그라는 이름표를 달아줬고, 태그마다 의미와 그 속성을 부여하여 웹이 보다 효율적으로 작동할 수 있게 해줬다는 것을 이야기.
-
img vs div 의 최종 차이 : img는 alt 라는 다소 편리한 속성을 지니고 있다. 혹 이미지가 문제가 발생하더라도 사용자가 볼 수 있는 부연 설명을 할 수 있고 다소 독립적이며 의미 있는 태그다. 반면 div는 구획에 종속되어 있으며 속성을 통한 정보를 담을 수 없다.
-
그래서 언제 사용하면 좋은가?
img : 사용자의 편의를 위한 설명이 덧붙여져야 할 때.(e.g 시각 장애인) 배경과 상관 없이 텍스트 등과 이미지를 사용할 때 편할 것으로 판단
div : 부연 설명이 필요 없으며 특정 영역에 배경이 되는 이미지가 필요할 때 편할 것으로 판단
Author And Source
이 문제에 관하여(21.2.15), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sinichy7/21.2.15저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)