html element
다음과 같이 생긴것들을 엘리먼트라고 한다.
<p>이것은 문단입니다.</p>
즉 내용을 포함해 시작태그와 종료태그까지를 엘리먼트라고 한다.
또 이런것도 엘리먼트이다.
<br />
빈요소(empty element)라고 하여 내용이 없는 경우를 말하며 <hr />, <img />와 같은 것들이 있다.
html head
<head> 요소는 모든 헤드 요소를 담는 컨테이너다. <head> 내부의 요소들로는 스크립트와 브라우저에게 스타일 시트가 어디에 있는지를 알려주는 것, 메타정보제공 등이 올 수 있다.
다음 태그들이 head 섹션에 올 수 있다.
<title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
html body
<body> 태그는 해당 HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용한다.
HTML 문서에는 단 하나의 <body> 요소만이 존재할 수 있다.
css - selector
전체 선택자 Universal Selector
전체 선택자는 HTML페이지 내부의 모든 요소에 같은 CSS속성을 적용합니다. 그렇기 때문에 보통 margin이나 padding값을 초기화하는 등 기본값을 정해둘 때 사용합니다. 하지만 이를 사용하면 문서안의 모든 요소를 읽어내려야 하기 때문에 페이지 로딩의 속도가 느려질 수 있습니다. 따라서 자주 사용하지 않는 것이 좋습니다.
태그 선택자 Type Selector
태그 선택자는 HTML요소를 직접 지칭하는 가장 간단한 선택자입니다. 태그에 대한 스타일만 지정이 되어있으므로,
태그에는 개발자가 지정해주는 스타일이 적용되지 않습니다.
클래스 선택자 Class Selector
클래스 선택자는 주어진 값을 class속성값으로 가진 HTML요소를 찾아 선택합니다. 이때 선택하려는 속성값 앞에 마침표를 추가해서 작성합니다.
ID 선택자 ID Selector
ID 선택자는 마침표 대신 #을 사용하고, class속성이 아닌 id속성을 사용하는 것을 제외하곤 클래스 선택자와 매우 유사합니다.
복합 선택자 Combinator
복합 선택자는 두개 이상의 선택자 요소가 모인 선택자입니다.
이는 꼭 태그 선택자 간의 결합이 아니어도 됩니다.
box model
박스 모델
모든 HTML 요소는 박스 모양으로 구성되며, 이것을 박스 모델이라고 부릅니다.
박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다.
1. 내용 : 텍스트나 이미지가 들어있는 박스의 실질적이 내용 부분
2. 패딩 : 내용과 테두리사이의 간격, 패딩은 눈에 보이지 않는다.
3. 테두리 : 내용과 패딩 주변을 감싸는 테두리
4. 마진 : 테두리와 이웃하는 요소 사이의 간격, 마진은 눈에 보이지 않는다.
inline styles
HTML 파일 태그 안에 직접 지정하여 사용합니다.
태그에 직접 스타일을 지정할 때 용이합니다.
HTML과 섞여 있으므로 인라인 스타일을 많이 사용할 경우 가독성 하락 및 유지보수가 용이하지 않습니다.
css 적용 우선 순위
1. inline styles
2. IDs
3. Classes, attributes, and pseudo-classes
4. Elements and pseudo-elements
5. Browser defaults
'HTML CSS' 카테고리의 다른 글
| [HTML CSS] 키워드 정리 3 (0) | 2023.01.19 |
|---|---|
| [HTML CSS] 키워드 정리 1 (0) | 2023.01.17 |
| [HTML CSS]HTML이란? CSS란?, 요소, 선택자 (0) | 2023.01.15 |
