#html #css #bootstrap
- Install
- 필수 프로그램 설치 : vsCode, LiveServer 확장프로그램(작성한 내용을 웹상에 바로 보여줌)
- vscode는 매우 가볍지만 아주 강력한 확장프로그램들이 많이 있다.
- html
- 웹은 개발의 기본이다.
- 앱 개발, 데이터 분석, 시스템 엔지니어 등의 기초가 되는 분야가 웹 프로그래밍이다.
- 브라우저: 서버로부터 html, css, javascript를 받아와서 내 환경에 보여주는 역할을 한다.
- html은 head와 body로 구성되어 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>First Web</title> </head> <body> Hello, World! </body> </html> - html 기본 tags
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>스파르타코딩클럽 | HTML 기초</title> </head> <body> <!-- 구역을 나누는 태그들 --> <div>나는 구역을 나누죠</div> <p>나는 문단이에요</p> <ul> <li> bullet point!1 </li> <li> bullet point!2 </li> </ul> <!-- 구역 내 콘텐츠 태그들 --> <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1> <h2>h2는 소제목입니다.</h2> <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3> <hr> span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요 <hr> a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a> <hr> img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> <hr> input 태그입니다: <input type="text" /> <hr> button 태그입니다: <button> 버튼입니다</button> <hr> textarea 태그입니다: <textarea>나는 무엇일까요?</textarea> </body> </html>
- css
- html로 뼈대를 잡아줬으면, css로 예쁘게 꾸며준다.
- 어떤 대상을 지목하기 위해 ‘class’, ‘id’ 같은 명찰을 달아준다.
- 그리고 그 대상에 적용할 디자인적 요소를 안에
- 로그인 페이지
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Page</title> </head> <body> <h1>Login Page</h1> <p>ID : <input type="text" /></p> <p>PW : <input type="text" /></p> <button> Login </button> </body> </html>
- 주석(comment) 달기
- 사용하는 언어마다 주석 다는 방법이 다르기 때문에 단축키를 활용하는 것이 편리하다.
- 단축키: crtl + ‘/’ (win) or cmd + ‘/’ (mac)
- css 분리
- style 영역에 작성한 css 부분은 style.css 파일로 따로 분리해서 관리할 수 있다.
- 개발자가 따로 작성할 수도 있지만, 인터넷에서 다른 사람이 작성한 코드를 가져올 수도 있다.
이것을 ‘라이브러리(library)’라고 부른다. - tip> shift + opt + f : 코드 자동 줄맞춤
- 부트스트랩(bootstrap)
- 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크
- 누군가가 만들어 놓은 CSS 꾸러미
- 부트스트랩 시작 템플릿
```html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- CSS 코드를 가져오는 부분 --> <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> <button type="button" class="btn btn-primary">Primary</button> </body> </html> ```
Walk on the water!