1-4. HTML, CSS 기본내용
＃ HTML → 뼈대
＃ CSS → 꾸미기
＃ Javascript → 움직이기
＃ 비어있는 창에 html:5 또는 !를 입력 후 엔터를 누르면 html 작성을 위한 기본 구조가 자동으로 만들어진다.
▶ 태그 간단 정리 (따로 한마디라도 설명하신 것들만 그대로 필기)
＃ 구역을 나누는 태그 → div(가장 많이 사용할 태그), p, ul, li
＃ h1 태그 → 문서의 제목을 나타내는 태그이므로 페이지마다 하나씩 꼭 넣어주어야 한다.
＃ span 태그 → 특정 글자를 감쌀 때 사용
1-5. 간단한 로그인 페이지 만들기
＃ 강사님이 먼저 보여주신 결과물 ↓
👩🏻 : 현재 2회독 중이기 때문에 먼저 최대한 코딩을 해보고 강의를 마저 듣기로 결정..!
＃ 내가 쳐 본 코드 ↓
<body>
<div>
<h1>로그인 페이지</h1>
ID: <input type="text"><br>
PW: <input type="password"><br>
<button>로그인하기</button>
</div>
<hr>
<form action="#">
<h1>로그인 페이지</h1>
ID: <input type="text"><br>
PW: <input type="password"><br>
<input type="submit" value="로그인하기">
</form>
</body>＃ 결과물 ↓
👩🏻 : 생각나는대로 두 가지 버전으로 작성하였는데(hr태그로 구분하였다.)
상단은 div로 감싸고 로그인하기를 button태그를 사용하였고 하단은 진짜 로그인을 하기 위해 동작하는 페이지라고 가정 하에 form태그와 로그인하기를 input type="submit"으로 구현해보았다.
＃ 강사님 코드 ↓
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>👩🏻 : 나는 br태그로 줄바꿈을 해서 id, pw를 구분했는데 강사님은 문단 나눔 설명을 위해 p태그를 사용하신게 아닐까 하는 생각이 든다..
1-6 ~ 1-7. CSS기초
＃ CSS는 어떻게 사용되는가? 1-4에서 CSS를 꾸미기라고 설명하였는데 우리가 꾸미기를 사용하기 위해서는 우선적으로 무언가를 지정할 수 있어야 한다. (명찰 필요!)
＃ 명찰 종류 : class, id
＃ 해당 요소를 꾸며주기 위해서 head 영역에 style 태그를 작성하는데 이때 명찰 종류에 따라 class는 '.' 으로 id는 '#'으로 적어서 구분한다.
＃ style 태그에서 꾸며주는 속성을 적용시킬 때는 마지막에 ';'를 꼭 붙여줘야 한다.
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<style>
.mytitle{
color: red;
font-size: 40px;
}
.mybtn{
font-size: 12px;
color: white;
background-color: green;
}
.mytxt {
color: green;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<p class="mytxt">ID: <input type="text"/></p>
<p class="mytxt">PW: <input type="text"/></p>
<button class="mybtn">로그인하기</button>
</body>1-8 ~ 1-9. 자주쓰이는 CSS 연습하기
＃ 강사님이 먼저 보여주신 만들어 볼 결과물 ↓
＃ 단축키 꿀팁 : 정렬을 정리하고자 할때는 Shift + alt + f 키를 사용한다.
＃ 추가적 설명 내용을 코드에 주석처리하여 작성하였다.
<head>
<meta charset="UTF-8">
<title>sparta login page</title>
<style>
.mytitle {
/* 구역을 꾸밀 때는 backgroud-color 속성을 사용하여 구역이 눈에 보이도록 하고 작업하는 것이 좋다. */
background-color: green;
/* div는 기본적으로 화면의 가로 길이 전체를 차지하기 때문에 필요 시 원하는 값을 지정해줘야 한다. */
width: 300px;
height: 200px;
/* 모서리 둥글게 */
border-radius: 10px;
color: white;
/* 글자 가운데 정렬 */
text-align: center;
/* 여백에 관련된 */
/* 해당 요소 바깥쪽 여백 → margin */
/* 해당 요소 안쪽 여백 → padding */
padding-top: 30px;
/* = padding : 30px 0px 0px 0px 와 같은 의미이다. */
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
/* 이미지 위치 및 사이즈 맞추기 */
background-position: center;
background-size: cover;
}
.wrap{
/* 전체 내용을 화면의 가운데로 옮긴다. */
/* 양쪽 여백이 같다는 것은 해당 요소가 가운데에 있다는 뜻! */
width: 300px;
margin: 20px auto 0 auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요.</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button class="mybtn">로그인하기</button>
</div>
</body>1-10. 구글 폰트 사용하기
＃ 링크 접속하여 원하는 폰트-종류 선택-우측 화면에서 import 선택 후 style 태그 속 내용 복사하여 vscode style 시작 부분에 붙여넣어 주면 된다.
＃ 그리고 하단 font-family 속성 적용 코드도 복사하여 vscode에 가져온 후 style 태그에 작성 시 *{} 하여 중괄호 안에 적어준다. 여기서 ＊표시는 전체(모두 다)를 나타내는 코드입니다.
1-11. 코딩의 꿀팁 1. 주석
＃ 주석이란 개발자에게는 보이는데 컴퓨터(화면 및 결과물)에는 안보이는 것
＃ 주석 단축키 : Ctrl + /
＃ 주석이 사용되는 경우 : 메모를 남기고 싶을 때, 소스 코드를 쉽게 이해할 수 있도록 하여 협업시에 유용하게 사용된다.
＃ 주석은 문법 등에 따라 모양이 다를 수 있다.
1-12. 코딩의 꿀팁 2. 파일 분리
＃ CSS 파일의 경우
1. style.css 파일을 새롭게 생성한다. (style이라는 이름은 예시이다.)
2. 기존에 html파일에서 style 태그 안에 작성하던 내용을 style.css 파일에 그대로 작성한다.
3. html파일에 style.css 파일이 적용되도록 하는 연결 방법 : head 태그안에 주석을 제외하고
이 코드를 작성해주면 된다. href 속성의 경우 파일 경로에 따라서 달라질 수 있다.
1-13. 부트스트랩, 예쁜 CSS 모음집
＃ 부트스트랩 : 남이 만들어놓은 CSS 꾸러미, 예쁜 CSS를 모아둔 것이다.
＃ 강의에서 사용된 부트스트랩 사이트
1-14 ~ 1-16. (스파르타피디아 제작과정)
＃ 주석으로 정리 하였기 때문에 완성 코드만 올리기로 결정😉
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
width: 100%;
height: 250px;
/* 하나의 트릭으로 linear-gradient 값을 주어 배경 이미지를 어둡게 하는 코드 */
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
background-position: center;
background-size: cover;
color: white;
/* 내용물을 정렬시키는 방법 중 display:flex 활용 */
display: flex;
flex-direction: column; /* 세로로 정렬 + 가로 정렬은 값으로 row 입력*/
align-items: center; /* 수직적으로 중앙에 배치 */
justify-content: center; /* 요소들을 컨테이너의 중앙으로 정렬 */
}
.mytitle>button {
width: 200px;
height: 50px;
/* background-color가 없게 하는 방법 */
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}
/* :hover를 입력하면 마우스가 올라갔을 때 변화를 줄 수 있다. */
.mytitle>button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
width: 1200px;
margin: 20px auto;
}
.mypost {
width: 500px;
margin: 20px auto;
padding: 20px;
/* 그림자 효과 : x-position / y-position / blur(그림자의 길이) / spread color */
box-shadow: 0px 0px 3px 0px gray;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtn > button {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화 URL</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<!-- row-cols-md-3 : 한 줄에 가로로 몇 개가 들어갈지 지정하는 코드 -->
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">코멘트</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">코멘트</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">코멘트</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목</h5>
<p class="card-text">코멘트</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견</p>
</div>
</div>
</div>
</div>
</div>
</body>1-17 ~ 1-19 내가 만든 웹페이지 배포해보기
＃ 정적인 웹페이지는 배포가 비교적 간단하다. (간단한 예 : 모바일 청첩장)
＃ 깃허브를 사용하여 배포
＃ 깃허브를 이용하여 파일 배포시에는 반드시 파일이 하나여야 하고 그 이름은 index.html이어야 한다.
▶ 파일 업로드
＃ 로그인 후 Create repository 클릭 → repository 이름 설정 → 하단 Create repository 버튼 클릭
＃ 페이지 이동되면 uploading an existing file 클릭 → 만들어 놓은 index.html 파일 드래그 앤 드롭 → 하단 Commit changes 버튼 클릭
▶ 업로드 파일 남들이 볼 수 있게
＃ 중간 메뉴 Settings의 좌측 메뉴에서 Pages 클릭 → Branch의 값을 main으로 변경 후 Save 버튼 클릭
＃ 배포를 잠시 기다린 후 Settings의 Pages를 다시 들어가보면 배포가 완료 되어서 링크가 떠있는 것을 볼 수 있다.
▶ 배포 한 페이지 수정 방법
프로그램을 이용하여 파일에서 수정 후 저장 → 중간메뉴 <>Code 클릭 → 파일 이름 클릭 → 연필 모양 아이콘 클릭 → 코드 전체 삭제(Ctrl+a) → 수정 된 코드 전체 복사 후 붙여넣기 → 하단 Commit changes 버튼 클릭
후기
👩🏻 : 작게나마 팀 프로젝트를 하고 부족한 점을 채우기 위해서 다시 강의 2회 독을 시작하였는데 내가 1회 독 때 얼마나 급하게 그리고 머릿속에 담지 못하고 들었는지 간단한 내용인 1주 차부터 아주 아주 아주 많이 느낄 수 있었다.. 필기하는 습관의 중요성도..! 확실히 머리속에 더 남는 듯하고 혹시 다시 헷갈리는 부분이 생겨도 이렇게 중요 부분 및 어려움을 느끼는 내용을 글로 남겨 놓으면 해결 또한 빠르게 할 수 있을 듯하다! 앞으로 더 어려워지겠지만 나 자신 화이팅✨
끝!
