HTML (Hypertext Markup Language)
- 정의: 웹 페이지를 만들기 위한 마크업 언어
- 이를 활용하여 웹 페이지의 구조를 잡을 수 있음
- 브라우저는 HTML파일을 가지고 뭘 어떻게 그릴지 파악 후에 웹페이지를 생성
HTML tag
관련 용어
tag(태그): HTML을 기술하기 위해 사용하는 명령어 집합
보통 시작태그와 종료태그가 있으며, 그렇지 않은 태그도 일부 있음content(내용): 시작 태그와 종료 태그 사이의 내용 부분attribute(속성): 태그 요소에 여러 속성을 지정함element(요소): 시작태그와 종료태그 사이에 내용이 있는 개별 구조
시작-종료태그가 없는 경우 그 자체로 하나의 요소로 봄
기본 구조
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>
<body>
</body>
</html><!DOCTYPE><html><head>: 사이트 제목, 설명, 부가정보, 기술적 내용 등을 표현
<meta>,<title><body>: 화면에 보여질 각종 태그들이 레이아웃대로 배치
-<h1>,<h2>,<h3>,<h4>,<h5>: heading의 준 말, 주로 제목 텍스트를 표시하며, 숫자가 높아질수록 글자 크기가 작아짐
-
폰트 이름 표기 시, 띄어쓰기가 있으면 쌍따옴표
-
Span은 text-align 값이 다르게 먹힘
Span은 inline-element, span만큼의 영역을 차지하며 해당 영역에서 정렬하게 되어, 정렬이 제대로 먹히지 않는것처럼 보일 수도 있음
- text-indent: 4px이 1개 스페이스 정도
- 요소의 값은 padding과 border 값이 포함된 값
8-1. 밑줄옵션으로 원하는 밑줄을 만들기 어려우므로 (커스터마이징 여지가 적음) -> border-bottom, padding-bottom을 활용할 수 있음
8-2. 요소값을 계산할 때, padding, border, margin 값을 모두 더해서 계산해야하는 문제 발생
-> box-sizing: border-box; 를 활용해서 보이는대로 width 값을 주고, 안쪽으로 padding을 줌
- Selector 의 적용 우선순위에는 점수가 있음
Inline: 1000, id: 100, class: 10, tag:1
Tag << class << id << inline css
11-1. 이미지가 있을 때, CSS를 활용한 백그라운드 이미지인지, html을 이용한 img인지는 직관적으로 알 수 없음
- block요소와 inline 요소 -> 추후 자세히 배움
12-1. block과 inline 요소
Block 요소라도 CSS를 통해 inline 요소 처럼 바꿀 수 있음 (display: inline-block; or float)
Inline 요소라도 CSS를 통해 block 요소처럼 바꿀 수 있음
(Display: block;)
- display: none을 활용한다면, 존재하는 html 요소를 보이지 않게 가릴 수 있음
12-2
Margin 에 auto 값을 넣으면 가운데 정렬 - margin: 20px auto (첫번째는 위아래, 두번째는 왼,오른쪽)
Margin-top: 20px
Margin-right: auto
Margin-bottom: 20px
Margin-left: auto
- html에서 ol, ul 등을 활용하여 리스트를 짰을 때
아무런 효과도 주고 싶지 않다면 CSS를 활용 (list-style: none;)
- 브라우저에서 자동 적용하는 padding 값(CSS의 padding-inline-start 등)을 수정하는 방법: padding에 의도적으로 0값을 주어 없앨 수 있음
- padding vs. margin: 둘 중 어느쪽을 사용해도 같은 결과
- 순서를 고려한 CSS 셀렉트
First-child, last-child, nth-child(odd), nth-child(even) 등 -> selector:first-child{ } 방식으로 활용
