스파르타 웹 수업 1주차 기록이다.
1주차는 html로 뼈대를 잡고 잡은 것들에 이름을 붙여서 꾸며주는 CSS를 배웠다.
div, botton, p태그등 나눠 놓은 태그들에 이름을 붙여서 헤드에서 style을 입력해 만들어둔 코드 안에
.이름{
꾸밀 내용 ex) color, background-color, border-radius 등
}
으로 테두리를 둥글게 하거나 글자색을 바꾸는 등 웹 화면을 꾸밀 수 있다.
<div class="mytitle">
<button class="mybutton"> 버튼 입니다. <button/>
<div/>위 예시와 같이 class="이름"으로 이름을 정해주고 head의 style에서 .이름{}으로 지정해서 꾸며줄 수 있다.
h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding
자주 쓰이는 CSS들
- h1, h5 : 글자크기
- background-image : 말 그대로 설정해둔 구역 뒤 이미지를 링크를 이용해 삽입한다.
- background-size : 배경 이미지의 사이즈를 조절
- background-position : 백그라운드이미지의 위치
- color : 글자색
- width : 가로길이
- height : 세로길이
- border-radius : 테두리의 둥근정도
- margin : 바깥여백 ★★★
- padding : 안쪽여백 ★★★
팁 ! 그림자 생성하는법
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('백그라운드 이미지 주소');
background-position: center;
background-size: cover;
구글폰트 이용하기
구글폰트 주소 : https://fonts.google.com/?subset=korean¬o.script=Kore
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
language를 korea로 바꾸고 쓰고싶은 폰트를 선택하고 우측 상단의 공유화면을 열어 @import를 선택하고 <style>내의 코드를 복사 그리고 본인 코드의 style태그내에 넣어줍니다.
주석달기
주석은 필요한부분 선택한 뒤 커맨드 + /(mac기준)
⌘ + /
코드분리
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">부트스트랩
부트스트랩이란 위 코드분리 원리를 이용하여 넷상에 다른 사람이 만들어둔 예쁘게 꾸며놓은 CSS들을 가져와서 사용할 수 있도록 모아둔 사이트 입니다.
부트스트랩 사이트 주소:
https://getbootstrap.com/docs/5.0/forms/input-group/
Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
getbootstrap.com
CSS배경 어둡게하기
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
깃으로 내가 만든 웹 배포하기
repository를 만들고 Upload Exsiting Files를 클릭 index.html파일을 업로드 (주의: 꼭 파일명이 index.html인 파일 하나만 업로드 할것)
저장소->setting->pages->Deploy from branch를 눌러 main으로 저장->5분정도 기다렸다가 새로고침을 하면 주소가표시되고->visit site를 누르면 내가 만든 사이트에 접속해볼 수 있다.
