HTML
HyperText Markup Language
웹 페이지의 구조(뼈대)를 만드는 언어
- 프로그래밍 언어가 아니라 마크업 언어
- 브라우저가 읽고 해석해서 화면에 보여줌
server를 가동하기 위한 것임
📌 문서 구조 관련
| <!DOCTYPE html> | HTML5 문서 선언 |
| <html> | 전체 HTML 문서 |
| <head> | 문서 정보 (제목, 문자 인코딩, CSS, JS 등) |
| <body> | 실제 화면에 보여지는 부분 |
태그 하나하나는 어떤 특정한 크기를 가진 네모난 상자임
div inline display의 블록 대표주자 -> 가능한 커질 수 있는 만큼 커짐
span block display inline 특성을 가짐 ->너비가 안쪽의 컨텐츠 내용만큼 커짐
img태그도 display inline특성
*박스모델
-콘텐츠 : 박스에 들어가는 텍스트나 이미지 등의 내용물
-패딩 : 콘텐츠와 경계선 사이의 간격
-경계선 : 콘텐츠와 패딩을 포함한 경계를 나타내는 선
-마진 : 경계선과 외부 요소의 간격
width 는 어쩔 수 없이 건들어야할때 쓰고 웬만하면 쓰지마셈
특히 block에서 컨트롤 never!.?!
마진은 박스와 박스 사이의 거리를 넓힐 수 있다
패딩은
남는 공간이 있을때만 마진을 활용
더 만들 시에 오버플로우 발생
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
js는 body안에 맨 아래다가 넣기
아이콘 쓰려면 이거 복붙하고 원하는거 사용 가능@!
'중앙정보기술인재개발원 > HTML&CSS&JS' 카테고리의 다른 글
| [JS] | 비동기, Promise,async,await (0) | 2025.04.23 |
|---|---|
| [JS] | 클로저, Closer (0) | 2025.04.22 |
| [JS] | 변수,연산자,조건문 (1) | 2025.04.21 |
| [CSS] 클래스, 아이디, 우선순위 (0) | 2025.04.16 |
| [HTML] 기초 정리 (5) | 2025.04.16 |