초격차 #5.

상대경로 / 절대 경로

1. 상대경로
   ./ (생략 가능) : 주변 경로
   ../ : 상위 경로

2. 절대경로
   http(https) : 원격 사이트 주소
   /(//) : 루트 경로로부터 접근

브라우저 스타일 초기화

브라우저에서 기본적으로 설정한 css 값 초기화 -> 크로스 브라우징
파일명.min.확장자와 같이 min(Minify) 키워드는 파일이 난독화나 경령화되었음을 의미
외부에서 가져와 사용하는 플러그인, 라이브러리 등을 직접 수정할 상황은 드물기 때문에 굳이 원본을 사용할 필요가 없음.

https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css

emmet

HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인
emmet은 css 선택자를 활용해 사용하는 기능

• : 곱하기
  {} : 내용 삽입
  $ : 순서대로 숫자 입력

empty tag

확장 기능인 속성 지정

<태그>

html 1, 2, 3, 4, 5
편리함

<태그/>

xhtml(xml), html 5
엄격, 안전함

글자와 상자

• 요소가 화면에 출력되는 특성, 크게 2가지로 구분

인라인 요소 : 글자를 만들기 위한 요소

• 요소가 수평으로 쌓임
• span : 콘텐츠 영역을 설정하는 용도, 줄바꿈 처리 => 띄어쓰기로 인식, 위아래 margin/padding 지정 무의미
• margin : 요소의 외부 여백을 지정하는 css 속성
• padding : 요소의 내부 여백을 지정하는 css 속성
• 자식요소로 블록 요소 사용 불가
• 가로, 세로 지정 불가

블록 요소 : 상자(레이아웃)를 만들기 위한 요소

• 요소가 수직으로 쌓임
• div : 본절적으로 아무 것도 나타내지 않는, 컨텐츠 영역을 설정하는 용도, 부모 요소의 크기만큼 자동적으로 늘어남, 위아래/좌우 margin/padding 지정 가능
• 자식요소로 블록 요소 사용 가능

핵심 tag 정리

div (block)

• 특별한 의미가 없는 구분을 위한 요소

h1 (block)

• 제목을 의미하는 요소 (heading)
• 숫자 1~6 : 숫자가 작을수록 더 중요한 제목 정의
• css 초기화하면 글자 크기 같음

p (block)

• 문장을 의미하는 요소 (paragraph)

img (inline)

• 이미지를 삽입하는 요소
• src, alt(엑박) => 필수 속성

ul (block)

• 순서가 필요없는 목록의 집합을 의미

ol (block)

• 순서가 필요한 목록의 집합을 의미

li (block)

• 목록 내 각 항목

a (inline)

• 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소
• href : link url
• target : 링크 url의 표시 위치
  • target = "_blank" => 새탭에 표시

span (inline)

• 특별한 의미가 없는 구분을 위한 요소

br (inline)

• 줄바꿈 요소

input (inline-block)

• 수평으로 쌓이지만, 가로/세로 좌우/위아래 여백 설정 가능
• type 속성 : 입력받을 데이터 타입 결정
• value 속성 : 미리 입력된 값
• placeholder 속성 : 입력할 값의 힌트
• disabled 속성 : 입력 요소 비활성화

label (inline)

• 라벨 가능 요소(input)의 제목
• input type = "checkbox"
  • checked 속성: 체크박스 입력 요소 체크됨
• input type = "radio"
  • 하나만 체크 가능
  • name 속성으로 여러 input 태그 그룸 묶기

table (table 요소)

• 표 요소 행과 열의 집합

tr (table 요소)

• 행을 지정하는 요소

td (table 요소)

• 열을 지정하는 요소