스파르타 코딩클럽 웹개발 1주차 강의
초보도 할 수 있다더니 정말 쉽고 이해잘 될 수 있도록 설명해주신다.
지금 듣는 백엔드 수업은 사실 너무 지루하고, 강사님도 자꾸 버벅거려서 (사실 실강이라 다들 코딩하면서 버벅대는 건 알지만)집중이 잘 안된다 T^T .. 그래서 선택한 스파르타 코딩 클럽 ! 만반잘부 ^^💕
1주차 강의는 총 20편으로 구성되어 있는데 제일 긴 게 11분 정도고 한 편이 5분 내외라 집중해서 나눠서 듣기 딱 좋다 ㅎㅎ
이렇게 개발자의 길로 들어서는 나 .. 너무 재밌어요 어쩜 좋아 ..
일단 하루에 4편씩은 듣자 라는 마인드로 시작. (뭘 하든 시작은 창대함 ;)
1주차 3강까지는 OT느낌이라 하루 분량에 안넣었고 26(월)일에 HTML, CSS
기본 내용과 CSS 기초를 살짝 맛보는 느낌으로 수강했다. (1-7까지 수강,
너무 기초 of 기초라 딱히 정리할 부분이 없을 것 같아 오늘부터 정리 시작 - !)
오늘 정리할 내용은 자주 쓰이는 CSS 연습하는 부분, 구글폰트 사용하는 법,
꿀팁(주석, 파일분리)까지만 정리할 예정. 이 글에서는 CSS 연습만 다룰듯 !
❤ 헤드부분에서 배운 내용 (12/26일자)
< title > 부분은 해당 문서의 제목, 말 그대로 title을 정의 할 때 사용하는 태그라는 사실 !
첫 페이지 제목을 뭐라고 할까 하다가 영어 이름 Chloe 넣어서 Chloe's page 라고 적었다.
<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>Chloe's page</title>
</head>오늘 배울 내용 : 사진 위에 글씨 적용하기
❤ css 적용하는 style 태그랑 body 부분을 보면, 아래 코드처럼 먼저 div 태그 안에 class="title" 이라는 이름을 적용함. 이걸 style 태그 안에서 .title 이라고 호출(?)
--div 태그는 division의 약자로, 레이아웃을 나누는 데 주로 쓰임
(해당 블록 즉 영역 설정을 위해 넣는 태그라고 보는 편이 쉬울 듯)
(전에 class를 부를 때는 . id를 부를때는 # 이라고 배웠는데 배우면서 더 정리해야겠다.)
.title{
color: white;
background-color: black;
}위처럼 코드를 입력해서 div 태그에 background-color를 적용하면 글자의 배경만큼만 색상이 적용되는 게 아니라 가로 전체에 색상이 먹는다는 사실.
아래 사진처럼 나옴 !
디폴트 값은 글자가 블랙, 배경이 화이트로 나온다. 그렇지만 div 태그의 영역을 봐야 하니까 흰색으로 나오면 알아볼 수가 없음..
그래서 배경색을 background-color: black; 이라고 주고 글씨를 color: white;로 바꿔줬다.
그렇지만 이렇게 width, height를 적용해 준다면 ?
.title{
color: white;
background-color: black;
width: 500px;
height: 300px;
}아래 사진처럼 가로(width), 세로(height)가 적용되서 500*300 사이즈의 박스 생성
근데 네모 박스가 싫고 모서리가 조금 둥글었으면 좋겠다면 ?!
여기서 정말 .. 코딩 쉽게 하는구나 어려운 건 아닌데 라고 생각했다 ㅋㅋㅋ
border까지만 쳐도 border에 관한 태그들이 아래 그림처럼 쭉 나온다.
그치만 주로 쓰는 건 border나 border-radius !
모서리를 둥글게 만들기 위해서 border-radius를 적용.
.title{
color: white;
background-color: black;
width: 500px;
height: 300px;
border-radius: 30px;
}적용 한 후에 아래 그림처럼 모서리가 둥글게 나왔다.
튜터님은 10px정도로 하셨는데 나는 30px로 적용함.
(극단적이게 변화해야 잘 느껴진다고 생각하는 1인)
적용하고 보니까 위에 L에 조금 잘리는 게 거슬리기 시작함.
이제 이 글자가 가운데로 보여진다면 좋을 것 같음.
text까지만 치면 아까 border처럼 태그가 쭉 나온다. (아래 사진 참고)
필요한 건 텍스트를 가운데로 정렬시키는 거라서 text-align을 선택
align은 한국어로 정렬하다 라는 뜻이 있음 (여기서 영문학과 티내기 크크)
text-align: center; 이렇게 코드 작성.
.title{
color: white;
background-color: black;
width: 500px;
height: 300px;
border-radius: 30px;
text-align: center;
}적용하고 나면?
위 사진처럼 텍스트가 가운데 정렬됨. 근데 ... ! 정말 ppt처럼 가로세로 딱 맞춰서 가운데 있으면 좋겠다 생각함. (가운데 정렬에 환장한 사람)
text-align으로는 앞, 뒤, 양옆 맞춰서 가운데 오는 게 아니라 줄의 가운데로 텍스트가 배치됨. 그럼 어떻게 위를 띄우지 .. ?
정답은 여백 !
코딩에서는 margin이나 padding을 사용한다고 한다.
바깥쪽으로 여백을 주고 싶다면 ★margin★
margin : top right bottom left;
ex) margin : 30px 40px 30px 40px;
안쪽으로 여백을 주고 싶다면 ★padding★
padding : top right bottom left;
ex) padding : 30px 40px 30px 40px;
이렇게 쓰면 위, 아래는 30px씩 오른쪽, 왼쪽은 40px씩 여백이 적용됨.
(안쪽은 뭐고 바깥쪽은 뭐지라고 생각했는데 일단 적용해봄 일단 봐야 감이 와서..)
내가 원하는 건 div 영역 안에서의 여백인 것 같아서 먼저 padding 써봄
위 사진처럼 style 태그 안에 padding을 치면 위에서부터 얘기했던 것처럼 많은 태그들이 존재한다.
아니 시간은 금이고 나는 위에만 여백을 주고 싶은데 padding: 30px 0px 0px 0px; 이렇게 다 치고 있음.. 그냥 편리하게 padding-top:을 선택
.title{
color: white;
background-color: black;
width: 300px;
height: 200px;
border-radius: 30px;
text-align: center;
padding-top: 40px;
} 위 코드처럼 위쪽 여백을 위해 padding-top: 40px;로 적용하고
div 영역이 너무 큰 것 같아서 width, height도 살짝 수정했다.
그러면 아래 사진처럼
이렇게 원하는 것 처럼 위쪽 여백이 주어져서 가운데에 맞춰졌다. (속이 편안 ,,ㅎㅎ)
자 그럼 오늘 배울 내용이였던 이미지 위에 글씨쓰기 할 수 있을 듯.
배경 이미지를 적용하는 데에는 세 줄이 늘 같이 다닌다.
아래 사진을 보면서 코드로 확인해보자.
일단 배경이니까 background를 치면 background-image:가 나온다.
그러면 적용할 수 있는 많은 코드들이 나오는데, 나는 이미지를 웹에서 가져올 거라 url();을 치고, '' 작은 따옴표 안에 링크를 복사해서 넣어줬다.
엥 ? 그런데 적용하고 저장했는데 ㅋㅋㅋㅋㅋㅋㅋ
내가 원하는 이미지는 왼쪽처럼 에펠탑 위에 글씨가 있을 거라고 상상했는데 실상은 오른쪽처럼.. 딱 왼쪽 이미지에서 왼쪽 귀퉁이만 나오는 거 ㅋㅋㅋㅋㅋ 왜그런가 들어봤더니 이미지 사이즈를 맞춰야 한다고 하셨음.. (정말 손 많이 가 ..) 아무튼 ! 여기서 사용되는 코드는 background-pisition: 이랑 background-size:
아래 코드 ↓
.title{
color: white;
background-color: black;
width: 300px;
height: 200px;
border-radius: 30px;
text-align: center;
padding-top: 40px;
background-image: url('https://cdn.sanity.io/images/1wyn2xo2/production/ffa5c1eac62729439af1304ed93847ea56c50e5e-2272x1128.jpg?fp-x=0.5&fp-y=0.7525672156054148&w=1088&h=612&fit=crop&crop=focalpoint&auto=format');
background-position: center;
background-size: cover;
}이렇게 설정해주고 나면 .. !!!!
이렇게 너무 예쁜 배경 이미지가 지정이 된다구요 ~~~ ! 앞에서 말했던 배경 이미지를 적용하는 데에는 세 줄이 꼭 같이 다닌다고 했던 건 바로
background-image, background-position, background-size !! 메모메모
이렇게 1-8강 배운 내용 끝 !
10분 59초짜리 영상이고, 다 배웠던 건데 이렇게 정리하려니까 정말 오래 걸린다. 그치만 이렇게 정리 해놓으면 절대 안 까먹을 것만 같은 .. 그런 예감이 . . ㅎㅎㅎ
요 아래 코드는 오늘 배운 배경이미지 설정하는 코드 전문 !
(background-color는 필요없을 것 같아서 코드 삭제함)
다음 강의에서는 전부 가운데로 옮기는 작업을 한다고 한다.
27일 2번째 일지로 넘어가야지.
<!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>Chloe's page</title>
</head>
<style>
.title{
color: white;
width: 300px;
height: 200px;
border-radius: 30px;
text-align: center;
padding-top: 30px;
background-image: url('https://cdn.sanity.io/images/1wyn2xo2/production/ffa5c1eac62729439af1304ed93847ea56c50e5e-2272x1128.jpg?fp-x=0.5&fp-y=0.7525672156054148&w=1088&h=612&fit=crop&crop=focalpoint&auto=format');
background-position: center;
background-size: cover;
}
</style>
<body>
<div class="title">
<h1>Log in page</h1>
<h5>ID, PW를 입력하세요.</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="password" /></p>
<button>로그인</button>
</body>
</html>