CSS 및 Javascript

허기웅·2023년 12월 26일

CSS

-이미지 넣기-

3개가 한세트

background-image: url('주소');
background-position: center;
background-size: cover;

-박스 정렬-

width (위,아래)
height (오른쪽,왼쪽)

-여백-

padding: - 안쪽으로 여백 -
margin: 위 오른쪽 밑 왼쪽 (auto는 끝까지) -바깥쪽 여백-

-박스 안 내용물 정렬-

4개가 한세트

display: flex;
flex-direction: column; (column은 세로정렬 low는 가로정렬)
align-items: center;
justify-content: center;

Javascript

script안에서 쓰기

크게 5가지(변수,자료형,함수,조건문,반복문)

1.변수

값을 담아서 한방에 관리

(ex)
let a = ('...');
let b = ('..');
console.log(a); -console에 값 보여주는것(개발자도구)-
console.log(b);
console.log(a+b);

콘솔창에
...
..
..... 이런식으로 뜸(값) 이름은 a,b말고 나중에는 자기가 알기쉬운것으로 변경!!

2.자료형

리스트(종류묶음),딕셔너리(종속들묶음)로 나뉨

리스트
(ex)
let a = ['...', '....', '.....'];
console.log(a);
console.log(a[0]);
console.log(a[1]);
console.log(a[2]);

콘솔창에
(3)['...','....','.....']
...
....
..... 이런식으로 뜸(프로그래밍은 0부터 시작)

딕셔너리
(ex)
let a = {키:밸류, 키2:밸류2, 키3:밸류3}
console.log(a[키값])

콘솔창에
키값에 따른 밸류값이 뜬다
키를 넣으면 밸류, 키2 넣으면 밸류2, 키3 넣으면 밸류3 이런식

(ex2)
let a = {키:밸류, 키2:밸류2, 키3:밸류3}
let 키 = a[키] -밸류값-
let 키2 = a[키2] -밸류2값-
console.log(키, 키2)

콘솔창에
밸류, 밸류2가 뜸

오늘은 여기까지 정리..
보고 따라하기는 간단한데 이해하려니 점점 머리가 터질꺼 같다ㅠ...

profile
반가워요.

0개의 댓글