개발 일기

20250827 CSS와 bootstrap을 배웠다. 본문

TIL

20250827 CSS와 bootstrap을 배웠다.

종현종현 2025. 8. 27. 18:00

CSS는 HTML 문서의 스타일을 지정하는 데 사용하는 언어이다.

Cascading Style Sheets의 약자이고 cascading은 폭포식, 계단식의 의미로

여러 단계나 요소가 위에서 아래로 연쇄적으로 영향을 미친하는 의미이다.

CSS는 여러 웹 페이지의 레이아웃을 한 번에 제어할 수 있다.

 

💪🏻 CSS로 <form> 개선하기

HTML에서는 브라우저의 내장 요소를 사용하여 웹 양식에 대한 지원을 제공한다. 

웹페이지에서 내 정보를 서버로 보내거나 혹은 서버로 보내지 않더라도 자체 웹페이지에서 사용자와 상호작용을 하기 위해

입력값이나 버튼과 같은 이벤트 요소가 필요할 때 사용되는 HTML의 태그가 바로 <form>이다.

 

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>Using CSS to style an HTML Form</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

 

 

위 코드를 실행한 결과

 

input[type=text]은 input 태그의 타입값이 text인 것을 꾸민다는 의미이다. input[type=submit]은 submit 타입을 꾸미게 되고

input[type=submit]:hover의 경우 submit 타입 컨텐츠에 마우스가 올라갔을 때를 꾸미게 된다.

 

 

BOOTSTRAP

부트스트랩은 트위터 개발자가 오픈소스로 제공해주는 프론트엔드 프레임워크이다.

부트스트랩을 이용하면 미리 만들어 둔 css와 javascript 코드를 가져다 쓸 수 있어 편리하게 꾸밀 수 있다.

 

❓  BOOTSTRAP 사용법

외부 스타일시트를 html의 <head></head> 사이에 추가 하면 바로 부스트트랩을 사용할 수 있다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

 

 

부트스트랩의 일부 컴포넌트들은 이벤트에 반응하는 구조로 되어 있어 jQuery를 비롯한 몇몇 자바스크립트 라이브러리를 필요로 한다.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

 

integrity와 crossorigin 속성은 보안과 관련된 것으로 자바스크립트를 이용한 보안공격에 대비한 것으로 사용하는 것을 권장한다.

 

 

integrity는 파일이 변조되지 않았는지 해시로 검증한다.
crossorigin은 교차 출처로 어떻게 가져올지(CORS/자격증명) 결정한다.

 

 

❕  link와 script 태그 몇 줄 적었을 뿐인데 어떻게?

Bootstrap은 미리 컴파일된(번들된) CSS와 JS를 배포하고 브라우저는 <link> <script> 로 그 번들을 받아 즉시 적용/실행할 수 있기 때문에 한두 줄로 바로 쓸 수 있게 된다.

 

1. 미리 빌드된 번들 (CSS & JS)

  • Bootstrap 팀은 개발용 소스를 빌드해서 bootstrap.min.css, bootstrap.bundle.min.js 같은 최종 산출물을 제공한다.
  • 이 파일들은 브라우저가 곧바로 해석할 수 있는 순수 CSS와 순수 JS로 되어 있어서 별도의 빌드 과정없이 사용 가능하다.

2. 표준 브라우저 기능 활용

  • <link rel="stylesheet" href="..."> → 브라우저가 CSS 파일을 가져와 렌더링 엔진에 적용한다.
  • <script src="..."> → 브라우저가 JS를 받아 실행
  • 즉시 적용 가능한 표준 포맷이라 특별한 라이브러리나 툴체인 없이 동작한다.

 

 

✅  느낀점

브라우저 동작 과정에 대한 이해와 공부를 더 해야겠다고 느꼈다. CSS 같은 경우는 어떤 기능들이 있는지 계속 훑어보고 많이 사용해보는 게 익히기 제일 좋은 방법 같다. 뭐든 그렇지만 결국 반복이다.

 

 

 

 

 

 

출처:

https://www.w3schools.com/

 

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

 

🏷️ 폼(Form) 태그 양식 & 종류 - 한방 정리

폼(Form) 양식 HTML 에선 브라우저의 내장 요소를 사용하여 웹 양식에 대한 지원을 제공한다. 예를들어 우리가 특정 사이트에 로그인 할때 아래와 같이 계정 아이디와 비밀번호를 입력하는 화면을

inpa.tistory.com

https://inpa.tistory.com/entry/BOOTSTRAP-%F0%9F%93%9A-%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9-v5-%EB%93%80%ED%86%A0%EB%A6%AC%EC%96%BC

 

🔮 BootStrap5 듀토리얼 입문 강좌

BootStrap 듀토리얼 Bootstrap 이란? 부트스트랩은 전세계적으로 가장 많이 사용되는 오픈소스 CSS 프레임워크 입니다. 부트스트랩을 기반으로 하는 다양한 응용 라이브러리가 있으며 부트스트랩에

inpa.tistory.com

 

저작자표시 (새창열림)

'TIL' 카테고리의 다른 글

20250902 JavaScript 비동기  (0) 2025.09.02
20250901 JavaScript 화살표 함수와 this  (0) 2025.09.01
20250829 JavaScript  (1) 2025.08.31
20250828 자바스크립트 기본을 배웠다.  (0) 2025.08.28
20250826 HTML을 배우면서 URL 구조, get과 post 차이에 대해 배웠다.  (1) 2025.08.26
'TIL' Related Articles more
Comments