스파르타코딩클럽 웹개발종합반 강의 후기
본격적으로 항해99를 시작하기 전, 사전강의로 4종의 강의를 제공받았다.
그 중 2회독 필수인 '웹개발종합반'강의에 대한 회고록을 작성하려한다.
배운 것을 정리하는 위주로 글 작성.
1주차
1주차 강의에는 프론트엔드의 기본 구성인 HTML, CSS, Javascript에 대해 배웠다.
이미 아는 내용이 많았지만 복습하는 느낌으로 강의를 들었다.
실습은 제공해 준 Pycharm Professional 구버전을 사용했다.
HTML
- HTML :
<Head>와<Body>로 구성되어 head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다. 구역과 텍스트를 나눈다.
<Head>안에는 meta, script, link, title 등이 쓰이고
<Body>안에는 아래의 태그가 쓰인다.
<div>구역을 나눈다</div>
<p>문단을 나눈다</p>
<!-- 아래는 글머리 기호 -->
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<H1>제목을 나타내는 태그. 페이지마다 하나씩 써주는게 좋다.</H1>
<H2>소제목</H2>
<H3> H3~H6까지 소제목으로 쓸 수 있다.</H3>
<span style="color:red">특정 글자를 꾸밀때</span>
<a href="주소"> 하이퍼링크 </a>
<img src="이미지 주소"/> : 이미지 삽입
<input type="text"/> : 유저가 글자 입력할 수 있는 텍스트 박스
<button> 버튼 </button>
<textarea> 텍스트박스안에 텍스트를 넣음 </textarea> CSS
-
CSS : CSS는 HTML에서 잡은 구역을 꾸며주는 역할을 한다.
HTML의<Head> ~ </Head>안에<Style> ~ </Style>로 공간을 만들어 작성한다.
<Body>에서<h1 class=”name”>식으로 이름표를 붙이고
<Head>의 <Style>에서 아래와 같이 이름표를 수식하는 태그를 작성한다..name { 안에 CSS태그 }
자주쓰는 CSS 태그
배경관련
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-famliy
color
간격 (바깥여백과 안쪽여백)
margin
padding
이미지 배경 깔 때 3종세트
background-image: url("주소");
background-size: cover;
background-position: center;
이미지 어둡게 하려면 위의 url을 아래 껄로 대체 (0.5를 조정하면서 밝기 조정)
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("주소");
가장자리 둥글게
border-radius: 10px;
위쪽 안쪽 여백(띄우기) 40픽셀
padding-top: 40px;
상하좌우를 다 최대한 밀어 가운데정렬
margin: auto;
내용물 가운데 정렬 해주는 4종세트 (direction에서 column을 row로 쓰면 가로로 정렬)
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
모바일 사이즈 고려해서 크기 정하기
max-width: ???px;
width: 95%;
박스에 그림자효과
box-shadow: 0px 0px 3px 0px gray;
가운데정렬
text-align: center;- 폰트 : 구글 폰트에 들어가서 원하는 폰트의 Style을 고르고 Use on the web의
<link>에 3번째줄을 복사해서<Head>에 삽입.
CSS rules to specify families에 적힌 것은 복사해서<Style>에 아래와 같이 삽입.
- 폰트 : 구글 폰트에 들어가서 원하는 폰트의 Style을 고르고 Use on the web의
<!-- HTML의 Head에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">/* CSS에 이 부분을 추가하면 완성!(*{}는 모든 태그에 적용한다는 뜻) */
* {
font-family: 'Jua', sans-serif;
}- 부트스트랩 : 미리 CSS를 만들어 정리해 놓은 것.
Get Bootstrap 사용 시 아래의 내용<Head>에 넣어야
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>- CSS는 너무 길어지면 style부분 다 잘라내서 css파일로만들고 아래 방법으로 불러올 수 있다.
<!-- (css파일이름).css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">기타
-
파이참에서 주석처리 하고싶으면 ctrl+/
Ctrl+alt+L : 줄맞춤.
Tap과 shift+tap으로 들여쓰기 넣고 빼기 가능 -
일일이 이름 붙일 필요없이 스타일에서
.mytitle > button {} 하면 됨 -
버튼에 마우스 올렸을 때 : .mytitle > button:hover {}
실습내용 & 어려웠던 점
-
간단한 로그인 페이지
-
폰트 부트스트랩 적용 연습
-
포스팅박스 외형 만들기
-
미세먼지 javascript 연습
-
팬명록 외형 만들기
-
1주차 내용에서 어려웠던 점은 딱히 없다.
Full-Stack Dev / MLOps