개발자 도구를 통해 브라우저의 사이즈 조정 가능하다. (부트스트랩은 기본적으로 반응형 웹이다.)
부트스트랩 접근 2가지 방법
- 파일을 로컬에 저장해서 접근하는 방법
- 파일을 네트워크 경로로 저장하는 방법
부트스트랩을 적용하면 많은 리소스를 가져오게 된다.
부트스트랩5는 모바일 우선이다.
<meta name="viewport" content="width=device-width, initial-scale=1">
부트스트랩의 사이즈는 픽셀 단위가 아니라 0~5단위로 구성되어 있다.
부트스트랩에서 각가의 div에 mb-5, mt-5로 설정할때 한개의 마진만 설정이 된다.
<div class="container-fluid p-6 mb-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5 border">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris...
</p>
</div>BS5 타이포그래피 - 약어 부터 정리
<!--Rounded Corners-->
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
<!--Circle-->
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
<!--Thumbnail-->
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
이미지 정렬
.float-start: 이미지를 왼쪽으로 띄우기
.float-end: 이미지를 오른쪽으로 뛰우기
<img src="paris.jpg" class="float-start">
<img src="paris.jpg" class="float-end">
중심 이미지
이미지를 중앙 배치
.mx-auto(margin: auto) 그리고 .d-block(display: block)
<img src="paris.jpg" class="mx-auto d-block">
반응형 이미지
반응형 이미지는 화면 크기에 맞게 자동 조정된다.
반응형 이미지를 만들려면 <img> 태그에 .img-fluid 클래스를 추가한다. 그러면 이미지가 부모요소에 맞게 깔끔하게 크기가 조정된다.
.img-fluid 클래스는 이미지에 max-width: 100%와 height: auto; 스타일을 적용한다.
<img class="img-fluid" src="ny.jpg" alt="New York">
JavaScript
- 세계에서 가장 인기있는 프로그래밍 언어
- 웹의 프로그래밍 언어
- 웹 페이지의 동작을 프로그래밍!
getElementById()
자바스크립트는 HTML 속성 값을 변경할 수 있다.
document.getElementById("demo").innerHTML = "Hello JavaScript";
자바스크립트는 CSS를 변경할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
자바스크립트는 HTML 요소를 숨길 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
자바스크립트는 숨겨진 HTML 요소를 표시할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>자바스크립트 출력
- innerHTML.을 사용하여 HTML 요소에 쓰기
- document.write().을 사용하여 HTML 출력에 쓰기
- window.alert().을 사용하여 알림 상자에 쓰기
- console.log().을 사용하여 브라우저 콘솔에 쓰기
innerHTML 사용하기
HTML 요소에 접근하기 위해 JS는 document.getElementById(id) 메서드를 사용할 수 있다.
속성 id는 HTML 요소를 정의한다. innerHTML 속성은 HTML 콘텐츠를 정의한다.
📌 HTML에서 데이터를 표시하는 일반적인 방법
'💡 URECA > 🗒️ 스터디 노트' 카테고리의 다른 글
| [URECA] Day 19 | 알고리즘 | 그래프 (0) | 2025.02.20 |
|---|---|
| [URECA] Day 18 | 알고리즘 | 비선형 자료구조 (0) | 2025.02.19 |
| [URECA] Day 3 | CSS(2), 부트스트랩(1) (3) | 2025.01.22 |
| [URECA] Day 2 | HTTP 메서드, RESTful, 그리고 CSS(1) (0) | 2025.01.21 |
| [URECA] Day 1 | Computer Paradigm의 변천과 Web 사용 버전 그리고 HTML(1) (1) | 2025.01.20 |
