Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
Tags
- MYSQL
- 가상메모리
- level1
- 구현
- 그리디
- 다이나믹 프로그래밍
- programmers
- 재귀
- 브루트포스
- N과M
- python
- 가상메모리 관리
- 힙
- 파이썬
- level2
- dfs
- level0
- DP
- BFS
- 수학
- 딕셔너리
- 프로그래머스
- BOJ
- 코딩테스트
- dict
- 스택
- 운영체제
- level3
- 백준
- 다익스트라
Archives
- Today
- Total
동캄의 코딩도장
BOOTSTRAP 본문
BOOTSTRAP
- Semantic UI와 함께 레이아웃 제작에 도움이 되는 CSS FRAMEWORK이다.
사용법
- 먼저 BOOTSTRAP 사이트에 들어가 소스 파일을 다운받고, 사용하고자 하는 디렉토리에 다운로드 받은 파일의 압축을 푼다. 링크
- 다음으로, 디렉토리의 위치를 잘 파악하고, 해당 다운로드 받은 파일 내의 bootstrap.css 와 bootstrap.js 파일에 접근할 수 있도록 주소를 연결해준다.
- Semantic UI의 홈페이지에 들어가서 해당 요소의 사용법과 예시를 찾아보고, 해당 코드를 가져와서 사용한다.
<div class="mb-3">
<label for="formGroupExampleInput" class="form-label">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
<label for="formGroupExampleInput2" class="form-label">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
- Semantic UI 사용법과 마찬가지로 동적으로 작동하는 요소를 동작시키고 싶다면, 자바스크립트 코드를 추가하여 사용한다.
'front > HTML&CSS&JS' 카테고리의 다른 글
CSS KEYFRAME (0) | 2023.03.13 |
---|---|
Semantic UI (0) | 2023.03.11 |
JSON (0) | 2023.03.08 |
XML (0) | 2023.03.08 |
Ajax (0) | 2023.03.08 |