23.01.03 TIL (Day1)

배운 내용을 정리하기 위해 TIL을 작성하기로 했다.

Frontend

부트스트랩 : https://getbootstrap.com/docs/5.0/components/card/
구글 폰트 : https://fonts.google.com/
이모티콘 : https://kr.piliapp.com/facebook-symbols/

1. CSS

자주 찾아서 쓸 것 같은 것들을 모아보았다.

1) background image
url 앞쪽 문구는 어둡게 출력하는 문구다. 0.5 부분을 조절하면 밝기가 조절된다.

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 30%;
background-size: cover;

2) Flex 레이아웃
direction이 나열 방향이 된다. (가로-row, 세로-column)

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

3) mobile 처리
box-shadow 같은 경우는 박스 모양 내기 좋아 보인다.

/*  mobile 처리
max-width는 이 값 이상의 px로는 안올라간다는 뜻이고,
그 이하의 px 안에서는 95%의 크기를 유지합니다. */
max-width: 1200px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;

2. JavaScript

많이 궁금했었던 내용이다. 앞에 자바라는 글자가 있어 자바와 연관이 있다고 생각했지만 그렇지 않다고 한다.
바다-바다코끼리 느낌...? ㅎㅎ...
원래 자바를 써왔어서 자바 언어와의 문법에서 차이나는 것들을 메모했다.

1) 변수 선언을 let으로 퉁친다.
2) 문자열에 ""가 아닌 '' 사용.

let a = 5
let name = 'kyungyeon'

3) 리스트 자료형

let a_list = ['수박', '참외', '배']
a_list.push('감')
b_list = ['철수', '영희']
a_list.push(b_list)

a_list[4][0] = '철수'

4) Dictionary
Hashmap이 생각나는 key:value 형태.

let a_dict = {'name':'bob', 'age':27}
a_dict['height'] = 180

a_dict = {'name':'bob', 'age':27, 'height':180}

3. jQuery

jQuery는 개인적으로 기능이 직관적이어서 좋았다.

백틱(``) : ~키. 헷갈리지 않게 조심하자.
아래와 같이 하면 버튼 내용에 '타이타닉'이 나오게 된다.

$('#url').val('뭔가를 입력하고 싶다')
$('#url').val()

$('#post-box').hide()
$('#post-box').show()

let mytitle = '타이타닉'
let temp_html = `<button>${mytitle}</button>`
$('#cards-box').append(temp_html)

이미지 및 텍스트 변경은 아래와 같이 하면 된다.
attr : 'src' 속성 의 코드를 url로 대체한다.

$('#img-rtan').attr('src', url)
$('#text-rtan').text(msg)

문서 호출 하면 바로 실행 하는 스크립트

$(document).ready(function(){
	alert('다 로딩됐다!')
});

script 내장 함수
star 숫자 만큼 ⭐가 반복되는 함수

let star_image = '⭐'.repeat(star)