Block / inline 구조
* 기본적으로 HTML 태그는 Block/inline 으로 나뉘어있다.
- Block 속성 태그는 1줄 모두 차지하며 위에서 아래로 쌓입니다.
- inline 속성은 글자처럼 가로로 배치된다.
Flex
* 기본적인 배치 흐름이나, 위치를 조정할 수 있다. ( display: flex; css 추가 )
* justify-content : 주축 방향(화살표 머리)으로 배치할 수 있다.
* justify-contnet: center; : 주축이 가로니까 가로로 배치된다.
align-item
* 교차축(주축의 90도)로 정렬된다.
bootstrap
1. 시작 템플릿
* <head> 안에 추가 : <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
* <body> 태그 안에 추가 : <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
'Flask > 웹개발' 카테고리의 다른 글
| [GPT] 웹개발 4주차 | Flask & DB (0) | 2023.10.15 |
|---|---|
| [GPT] 웹개발 3주차 | Python (0) | 2023.10.15 |
| [GPT] 웹개발 2주차 | Javascript&JQuery (1) | 2023.10.15 |