본 내용은 스파르타코딩 웹개발 종합반 강의를 토대로 작성
1. 서버/클라이언트/웹의 동작 개념
- 클라이언트(브라우저)는 서버에게 웹 페이지를 요청한다.
- 서버는 웹페이지를 전달한다.
- 클라이언트(브라우저)는 출력
2. HTML, CSS 기본 내용
- HTML: 뼈대, 문서형태 기반, 태그문법
- body: 페이지의 내용
- head: 페이지의 속성 정보
- CSS: 꾸미기
3. CSS 기초
- HTML의 부모-자식 구조 : 부모 태그가 영향을 받으면 그것의 자식 태그도 영향을 받는다.
<div> <!-- 부모 -->
<div> <!-- 자식 1 -->
</div>
<div> <!-- 자식 2 -->
</div>
</div>CSS 사용하기
- head태그안에 style태그를 생성하여 작성한다.
- 꾸밀 요소를 선택하여 적용한다.
- 예시
<head>
<meta charset="UTF-8">
<title>로그인페이</title>
<style>
.mytitle{
color: tomato;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>4. 자주 쓰이는 CSS 연습하기
## margin, padding
요쇼의 경계를 기준으로
- padding: 안쪽 여백
- margin: 바깥 여백
가운데 정렬
- width를 설정
- margin : auto
태그가 inline인 경우, display: block
5. 폰트, 주석, 파일분리
구글 웹 폰트 입히기
-
위 사이트에서 원하는 폰트를 가져와 웹 페이지에 적용할 수 있다.
-
link 태그와 font-family를 복사하여 각각 head와 style에 붙여넣기한다.
-
예시
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
</style>
</head>주석
- 코드에 대한 설명을 할 때 사용
- 브라우저 / 컴퓨터가 읽지 않는다.
단축키 : command + /(슬래시)
CSS 파일 분리
-
style 태그의 내용을 별도의 파일로 분리할 수 있다.
-
같은 디렉토리에 style.css와 같은 파일을 만들고 head 태그에 link한다.
-
예시
<head>
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
</head>6. 부트스트랩
- 현업에서 미리 완성된 CSS를 모아둔 것
- 검증되고 좋은 디자인의 CSS들이 많이 있다.
7. 부트스트랩 사용하기
적용하는 법
- 부트스트랩 시작 템플릿을 head에 붙여넣는다.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</head>- 아래의 부트스트랩 컴포넌트에서 적용하고 싶은 것을 가져와 붙여넣는다.
<body>
<button type="button" class="btn btn-primary">버튼입니다.</button>
</body>느낀점
스파르타코딩의 부트캠프인 항해99를 시작하게 되면서, 사전과정인 웹 개발 종합반 수업을 듣게 되었다. 여러 커뮤니티에서 후기가 별로 없는 편이라서 살짝 걱정했지만, 너무 만족스럽다. 강의 퀄리티가 매우 좋고 중간에 퀴즈도 있어서 좀 더 와닿게 코딩을 공부할 수 있는 것 같다. 그리고 무엇보다, 노션으로 강의 요을 제공하는데 진짜 너무 너무 너무 너무 좋다… 항상 강의를 보고 TIL을 작성하는 나에게는 너무 유용하다.
3월에 본격적으로 시작하기 전까지 웹개발 과정을 빠르게 끝내고 자바스크립트와 파이썬 등 부족한 것들을 좀 더 준비해야겠다.
'programming study > web' 카테고리의 다른 글
| [스파르타코딩] 웹개발 종합반 항해 1기 3주차 (2)(2021.2.3 ~ 4) (0) | 2021.02.04 |
|---|---|
| [스파르타코딩] 웹개발 종합반 항해 1기 3주차 (1)(2021.2.3) (0) | 2021.02.03 |
| [스파르타코딩] 웹개발 종합반 항해 1기 2주차 (2)(2021.2.2 ~3) (0) | 2021.02.03 |
| [스파르타코딩] 웹개발 종합반 항해 1기 2주차 (1)(2021.2.2) (0) | 2021.02.02 |
| [스파르타코딩] 웹개발 종합반 항해 1기 1주차 (2)(2021.2.2) (0) | 2021.02.02 |