항해99 6기 시작일(3월 7일) 전 사전준비를 위한 강의인 '웹개발 종합반'을 약 이틀에 걸쳐 전부 수강했다.
2회차를 진행하는 지금은 포스팅하며 진행해볼 예정이다.
인터넷에 조금만 구글링을 해봐도 다양한 정보들이 일목요연하고 깔끔하게 정리되어 있지만, 흩뿌려진 지식을 나만의 것으로 만드는 과정이 필요하다고 생각한다.
강의 내용을 기본으로 하되 다른 웹 문서나 서적을 참고하여 작성하겠다.
웹의 동작 개념
우리가 보는 웹페이지는 서버가 미리 준비해둔 것을 (1)받아서 (2)그려주는것이다.
웹 표준 기술
- html: 웹 사이트의 기본 골격
- css: html로 작성된 문서의 스타일을 제공
- javascript: 사용자의 반응 및 웹 사이트의 동적 기능 처리
HTML5는 작은 의미로 HTML 마크업 언어 그 자체를 뜻하기도 하지만 큰 의미로 웹 표준 기술을 총칭한다.
HTML5의 주요 기능
- 멀티미디어: 음악과 동영상의 재생
- 그래픽: 2차원, 3차원 그래픽
- 통신: 서버와 실시간으로 쌍방향 통신을 수행
- 장치 접근: 장치 정보(배터리 잔량, 현재 위치 등)
- 오프라인 및 저장소: 인터넷이 연결되지 않은 상태에서 응용 프로그램을 동작 시킬 수 있음
- 시맨틱: SEO 최적화
부트스트랩(Bootstrap)의 사용
부트스트랩 5.1.3 [2022.02.11 기준 최신]
부트스트랩이란 예쁜 CSS를 미리 모아둔 것을 말한다.
- 부트스트랩의 사용
<!doctype html>
<html lang="ko-KR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>타이틀</title>
<!-- 부트스트랩 CSS, 다른 스타일시트보다 상위에 놓는다 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- 부트스트랩의 자바스크립트 플러그인을 위해 필요하다 -->
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>기존에 부트스트랩은 jQuery에 대한 의존도가 굉장이 높았으나, 현재 Vanilla JS 만으로도 충분히 여러 브라우저에서 동일한 기능을 사용할 수 있기 때문에 더이상의 jQuery는 필요하지 않다.
❓읽어보면 좋을 포스팅
새롭게 돌아올 Bootstrap 5!
배열(Array) vs 리스트(List)의 특징 및 차이
keep going