1주차 강의 정리

1.필수 프로그램 설치

2.간단한 로그인 페이지 만들기

_

로그인페이지

로그인 페이지

ID:

PW:

로그인하기

3.CSS 기초

변환시킬 코드를 CLASS로 지정 하고 헤드안에 스타일란을 생성하고 .CLASS명 {변환시킬내용}으로 편집한다.

4.자주쓰는 CSS

배경관련

background-color
background-image
background-size

사이즈

width
height

폰트

font-size
font-weight
font-family
color

간격

margin 안쪽간격
padding 바깥쪽간격

연습해야하는 것들

h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, padding

이모티콘 모음 주소

https://kr.piliapp.com/facebook-symbols/

부트스트랩 주소

https://getbootstrap.com/docs/5.0/components/buttons/

5.포스팅 박스 만들기

1.기본적으로 위쪽 헤더를 만들기 위해 class를 지정하고 background url을 통해 이미지를 가져왔다.

.mytitle{

              height: 350px;
              width: 100%;

              background-image:url("https://pds.joongang.co.kr/news/component/htmlphoto_mmdata/202205/05/e57a4657-bd89-4332-8b1a-0507f293b4d7.jpg");
              background-position:center 35%;
              background-size: cover;   >>이미지를 설정해둔 크기에 맞게 해줌

              color: white;

              display: flex;
              flex-direction: column;    >>> 내용물을 중앙 정렬하기위해 사용
              justify-content: center;
              align-items: center;
              

2.헤더이미지 밑에 포스트는 부트스트랩을 이용했고 응원남기기라는 버튼을 넣어주었다.

닉네임 박스

 Forms 의 Floating Labels 참조

응원댓글

 Forms 의 Floating Labels의 Textareas 참조

아래 댓글 카드

 Card → Quot를 참조
 

응원남기기 버튼은 class mbutton 을 지정하고 검정색 버튼을 부트스트랩에서 가져왔다.

div class="mbutton"
button type="button" class="btn btn-dark">응원 남기기</button
응원 남기기

6.자바쿼리 함수 기억해야 하는 것

(1).기본 선언 형태

let txt=$('#input-q2').val() // let 은 선언 txt는 변수 이름 input-q2는 id 이름을 뜻한다.

(2).includes 문 및 split 활용하기

if (txt.includes('@') == true) { /includes문 @를 포함할경우 트루/

alert(txt.split('@')[1].split('.')[0]) /스플릿을 이용해서 만든함수/

} else {

alert('이메일이 아닙니다')

}

*/txt.split('@')을 할 경우

abc,gmail.com으로 나뉨

[1]을 출력하니까 gmail.com 이출력

한번 더 .split('.')을 하게되면

gmail , com 으로 나뉘고

[0]을 출력하니까 gmail만 출력함/*

(3).temp_html 이용하기

let temp_html = <li>${txt}</li> <<< txt를 입력받아서

$('#names-q3').append(temp_html)

<<<append(temp_html)을 이용해서 붙인다.