html / css / javascript의 내용에 대해 훑어보고 간단한 웹페이지를 만드는 주차였다.
부트스트랩을 통해 css를 꾸몄는데 생각한거보다 훨씬 많은 css를 꾸밀 요소들이 많았고
잘 찾기만 한다면 웬만한 형태의 웹페이지는 모두 만들 수 있을 듯한 느낌이였다.
margin과 padding의 차이가 항상 헷갈렸는데 이번에 다시 보면서 바로 잡혔다.
java보다 javascript가 더 자유로운 형태의 언어인 느낌이 들었다.
변수를 선언할때 자료형을 선언하지 않는 것에서 크게 느꼈다.
1. 부트스트랩
부트스트랩의 탄생배경은 서로 다른 인터페이스를 사용하는 여러 개발자들이 공동 개발을 할때
디자인이 일치하지 않고 관리도 어렵고 코드의 양도 방대해지는 등의 문제로 일관성을 유지시키기위해 개발된 프레임워크.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>부트스트랩을 적용할때 사용할 html템플릿으로 html문서를 작성할때 활용하자.
https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
그리고 위의 링크를 통해 각종 컴포넌트들을 적용하자.
2. margin과 padding의 차이
margin과 padding의 차이가 은근히 헷갈렸는데 이번 주차를 훑어보면서 완전히 이해를 했다.
보통 margin과 padding 사이의 구분선은 div태그로 묶는 듯하다.
3. javascript
변수를 선언할때 자료형을 선언하지 않는 것에서 java보다 자유로운 언어라는 생각이 들었다.
또한 java의 map과 유사한 dictionary라는 것도 알게 되었다.
'legacy > 항해99 일지' 카테고리의 다른 글
| 20221108 (화) TIL (0) | 2022.11.08 |
|---|---|
| 20221107 (월) TIL (0) | 2022.11.07 |
| 항해99 TIL 시작 (0) | 2022.11.07 |
| 항해99 0주차 사전스터디 미니프로젝트 (0) | 2022.11.01 |
| 스파르타코딩클럽 웹개발종합반 2주차 (0) | 2022.10.19 |
