Markup?
- 구조를 표현하는 언어
1.HMTL
- Hypertext Markup Language
- tag들의 집합
- tage : <>로묶인 기본구성요소
- 여닫는 순서가 있다.
- 셀프 클로징 방법도 있다.
img
- 확장자 : 파일명.html
<!DOCTYPE html>: html 문서임을 명시- 트리 구조
- tag에는 속성이 있다.
2.Tags
1) 컨텐츠 관련 태그
- div
- 한 줄을 차지합니다.
- span
- 컨텐츠의 크기만큼 공간을 차지
- img
- src
- alt
- a : 링크삽입
- href
- target
- "_blank" 새창으로 띄우기
- "_self" 현재 창에서 열기(기본값)
- ol,ul,li
- ol(ordered list)
- 숫자나 로마자 기호로 표기되는 리스트
- ul(unordered list)
- 번호가 아닌 점 등의 도형이 붙는 리스트
- li : list
- ol(ordered list)
- table
- thead- tbody
- tr
- th
- td
- code
- pre
폼 관련 태그
- form
- input
- type
- text
- password
- radio : 선택지 중 택1 (그룹설정 가능 name이라는 속성을 이용)
- checkbox : 다중선택 가능
- placeholder
- type
- textarea : 멀티라인(줄바꿈가능)
- button
- select
- option
스크립트 삽입
- 내부
<body>안에 작성한다.
<html>
<head>
</head>
<body>
<script type="text/javascript">
console.log("hello world")
</script>
</body>
</html>- 외부
- 별도의 js 파일을 생성 후,
<script>태그의src속성을 이용하여 링크를 진행한다.
- 별도의 js 파일을 생성 후,
<script src="main.js"></script><meta> 태그
- 메타 데이터를 나타내는 태그
charset페이지 내 문자 인코딩 선언
<meta charset="utf-8">참조사이트
MDN - HTML 요소
3.CSS
- Cascading Style Sheets
- 웹페이지 구성요소의 스타일을 정의
- Selector
- 요소를 선택하는 규칙
- # : id 지칭
- 고유한 이름을 붙일 때
- . : class 지칭
- 반복되는 영역을 유형별로 분류할때
HTML과 연결
- inline : style 안에 직접 설정
<h1 style="color:red; font-weight:bold">hi</h1> - 안에
- 별도의 css 파일을 만들어, 태그로 연결한다.
<link rel="stylesheet" type="text/css" href="mystyle.css">
레이아웃
- 좌표
- 위 → 아래, 왼쪽 → 오른쪽
- 절대적/상대적 위치 포지셔닝 가능
- display 요소
- block : 한 줄 다 차지
<div> - inline : 컨텐츠 공간만 차지
<span> - inline-block : 컨텐츠의 너비와 높이를 지정
- block : 한 줄 다 차지
- 박스모델
- margin / padding / border
- width, height, top, left, bottom, right
- position
- static : 디폴트값
- relative : 기본+상대적 위치
- fixed : 브라우저 좌상단 기준 절대적 위치
- absolute : 부모 중 기준점이 있는 경우, 그 기준으로 절대적인 위치
- sticky : 기본적으로 relative처럼 작동하지만 스크롤 영역을 벗어나면 fixed처럼 작동 - box-sizing
box-sizing: border-box;
- 레이아웃 고급
- z-index
- float, flex
- 기본스타일링
- font-, background-
- 의사클래스(Pseudo-class)
차곡차곡 쌓아가는 나의 개발 기록