💡 URECA/🗒️ 스터디 노트

[URECA] Day 4 부트스트랩(2), JavaScript(1)

코딩하세현 2025. 1. 23. 22:04
728x90

개발자 도구를 통해 브라우저의 사이즈 조정 가능하다. (부트스트랩은 기본적으로 반응형 웹이다.)

 

부트스트랩 접근 2가지 방법

  1.  파일을 로컬에 저장해서 접근하는 방법
  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 속성 값을 변경할 수 있다.

왼쪽 사진: Click Me! 버튼 누르기 전 오른쪽 사진: Click Me! 버튼 누른 후

document.getElementById("demo").innerHTML = "Hello JavaScript";

왼쪽 사진: Click Me! 버튼 누르기 전 오른쪽 사진: Click Me! 버튼 누른 후

자바스크립트는 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 요소를 숨길 수 있다.

왼쪽 사진: Click Me! 버튼 누르기 전 오른쪽 사진: Click Me! 버튼 누른 후

<!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에서 데이터를 표시하는 일반적인 방법

 

728x90