짧고도 긴 3주의 시간이 지났다.
코딩에 'ㅋ' 자도 모르는 예체능 전공인 내가.... 3주동안 생소한 단어들로 아직 머리가 빙글빙글 하지만
그동안 배운것들을 돌아보는 시간을 갖으려 한다.
그 중, 첫주에 프리캠프로 배운 html, css, javascrip를 정리해 보겠다.
✔️ What I Learned
- HTML
- CSS
- JAVASCRIPT
1. HTML
- html이란 네트워크가 연결된 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해 만들어진 체계이다. 문서를 작성하는데 정해진 약속이며, 태그를 통해 엡페이지에서 보여질 내용을 나타낸다.
- 태그의 특징에는 크게
block(페이지의 가로 넓이 전체를 차지하는 요소) ,
inline(자신의 크기만큼만 차지하는 요소) 이 있다.block-> h1, div, p ....
inline-> span, input, a, button, label ...... - 종속태그란 다른태그와 함께 상호작용을 해야 작동하는 태그. 혼자있으면 아무것도 못해!!
ex) 선택박스 태그, 목록 태그, 표 태그 ...
2. CSS
- 정렬 종류
flex: 여러 태그를 하나로 묶어 정렬
position: flex에 종속되지 않고, 박스를 개별적으로 위치시킴justify-content는 다음의 것들을 인자로 받아 요소들을 가로선 상에서 정렬한다.
➡️ flex-start: 요소들을 컨테이너의 왼쪽으로 정렬
➡️ flex-end: 요소들을 컨테이너의 오른쪽으로 정렬
➡️ center: 요소들을 컨테이너의 가로선상의 가운데로 정렬
➡️ space-between: 요소들 사이에 동일한 간격을 준다.
➡️ space-around: 요소들 주위에 동일한 간격을 준다.
align-items는 다음의 것들을 인자로 받아 요소들을 가로선 상에서 정렬한다.
➡️ flex-start: 요소들을 컨테이너의 꼭대기로 정렬
➡️ flex-end: 요소들을 컨테이너의 바닥으로 정렬
➡️ center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
➡️ baseline: 요소들을 컨테이너의 시작 위치에 정렬
➡️ stretch: 요소들을 컨테이너에 맞도록 늘림
flex-direction은 다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정한다.
➡️ row: 요소들을 텍스트의 방향과 동일하게 정렬
➡️ row-reverse: 요소들을 텍스트의 반대 방향으로 정렬
➡️ column: 요소들을 위에서 아래로 정렬
➡️ column-reverse: 요소들을 아래에서 위로 정렬
3. JAVASCRIPT
- 변수(var, let) 와 상수(const)는 데이터를 담는 공간이다.
- 변수와 상수를 만들때는 선언과 할당으로.
- 자바스크립트에서
=는 같다의 의미가 아닌 할당의 의미이다. 배열의 생김새는 ["고구마", "연어", "초밥"]- 여러가지 메서드
length, push(), pop(), sort(), includes(), concat(), join(), splice(), filter(), mmap()
- 문자열도 배열과 같이 메서드를 이용할 수 있고, 인덱스를 이용해 요소를 가지고 올 수 있다.(메서드는 너무 많아서 mdn참고하기)
// 문자열(배열)
const classmates1 = "철수"
classmates1[0] // "철"
classmates1[1] // "수"// 문자열 쪼개기
const classmates2 = "철수&영희"
classmates2.split("&") // ["철수", "영희"]// 문자열 양쪽 공백 제거하기
const classmates3 = " 철수 & Milk "
classmates3.trim() // "철수 & Milk"// 문자열 대소문자 변환하기
classmates3.toUpperCase() // "철수 & MILK"
classmates3.toLowerCase() // "철수 & milk"// 문자열에 빈칸 채우기
const chulsooNumber = "1234"
chulsooNumber.padStart(10, "0") // "0000001234"
chulsooNumber.padEnd(10, "0") // "1234000000"
-
객체란? 성격이 다른 데이터의 모음을 저장. 키와 값으로 구성된 데이터를 묶을 때는 중괄호 { } 를 사용하여 콤마로 묶는다.//** 객체 선언하기**
const classmate = {
name: "철수",
age: 8,
school: "꽃샘초등학교"
}// 객체의 값 꺼내기
classmate.name // 철수
classmate['name'] // 철수// 객체의 키&값 삭제하기
delete classmate.name
classmate = {
age:8,
school: "꽃샘초등학교"
} -
데이터 타입의 종류
➡️ 문자열(string)은, "" 안에 적는다. 따엄표 안에 적힌 값들은 숫자여도 문자열로 취급된다.
➡️ 숫자(number)는 숫자를 나타내는 자료향이며 모든 숫자를 실수로 처리한다. ❗️(따옴표 없이 적어야 함)
➡️ 불린(boolean)은, 참/거짓으로 나타내는 자료형이다.
➡️ undefined 은, 변수를 선언했지만 값이 할당되지 않았을 때 자바스크립트 엔진이 암묵적으로 초기화 하는 값이다.
➡️ null은, 의도적으로 값이 없음을 명시하기 위해 할당하는 값이다. -
연산자
산술연산자: 더하기(+) , 빼기(-), 곱하기(*), 나누기(/), 나머지(%)
비교연산자: 좌우의 두 값을 비교해야 할 때 사용하는 연산자
논리연산자: 그리고( && ), 또는( || ), 부정( ! ) 을 나타내는 기호 -
조건문
if: 특정 조건을 만족하면 명령문을 실행한다.
else: 특정 조건이 거짓일 경우.
else if: 조건이 거짓일 경우 다른거 실행.(중첩될 수 있다. 여러개가 있어도 무방!) -
반복문(for)
for( 초기식; 조건식; 증감식 ){ // 반복해서 실행할 코드 } for(let I= 0; I < 5; I = I+1) { console.log(“hello”) }➡️ 초기식: 반복문의 시작점을 만든다. 어디부터 카운트 할지 정하는것.
➡️ 조건식: 반복문의 끝점을 만든다.
➡️ 증감문: 카운트를 어떻게 할 것인가를 정한다.
➡️ const는 반복이 안되므로 사용이 불가함. -
수학 객체의 종류
// 최대값
Math.max(4, 29, 1, 12) // 29// 최소값
Math.min(4, 29, 1, 12) // 1// 반올림
Math.round(2.712) // 3// 올림
Math.ceil(4.1) // 5// 버림
Math.floor(12.8) // 12 -
DOM 이란?
웹브라우저가 정적인 웹페이지를 변경하거나 조작하기 위해 HTML 파일을 자바스크립트 객체로 만들어 준다. dom을 통해 html과 자바스크립트가 상호작용 가능해짐.: document.getElementByld(“tagID”). InnerText, value, style, TextContent
: html 파일에서.”tagID”라는 id를 가진 태그를 선택하여 제어한다.
:html 에서 div id=“hi” 하면 hi 라는 아이디를 가져올 수 있음. -
내장함수
➡️ alret - 메세지를 지정할 수 있는 경고 대화 상자를 띄운다.
➡️ setTimeout(func,time) - 시간 지연 함수. 일정한 시간 기다렸다가 실행
➡️ setInterval(func, time) - 시간 반복 함수. 일정 시간 마다 반복하는 함수 -
이벤트 핸들러
버튼을 눌렀을 때 함수를 실행해야 한다거나 인풋창이 변할 때 함수를 실행해야 하는 등 적절한 시기에 함수를 실행해야 할 때 사용한다.// 버튼 클릭시, 자바스크립트함수 실행 <button onclick="자바스크립트함수();"> 버튼 </button> // 텍스트 변경시, 자바스크립트함수 실행 <input type="text" onchange="자바스크립트함수();" /> // 포커스 아웃시, 자바스크립트함수 실행 <input type="text" onblur="자바스크립트함수();" />
4. 개인적으로 알게된 것
- Placeholder -> input 안에 보이는 글자 설정
- 싸이월드 과제중 표(table) 만들기
테이블의 구성 요소
table: 테이블을 만드는 태그
th: 테이블의 헤더부분을 만드는 태그(굵은 글씨, 가운데 정렬이 기본값)
tr: 테이블의 행을 만드는 태그
td: 테이블의 열을 만드는 태그
- 제일 바깥쪽에
<table></table>태그가 들어간다. - 가장 위에는
<th>라는 테이블 헤더 태그를 사용한다. - 행을 만드는 태그인
<tr>태그가 들어간다. <tr>태그 안에는 열을 만드는 속성<td>가 들어간다.
만들었던 코드는 아래와 같다.
<table class="albumTable"> <tr> <th class="albumTable__checkbox"><input type="checkbox"></th> <th class="albumTable__number">번호</th> <th class="albumTable__song">곡명</th> <th class="albumTable__artist">아티스트</th> </tr> <tr> <td class="albumTable_checkbox"><input type="checkbox"></td> <td class="albumTable_number">1</td> <td class="albumTable_song">눈의 꽃</td> <td class="albumTable_artist">박효신</td> </tr> <tr> <td class="albumTable_checkbox"><input type="checkbox"></td> <td class="albumTable_number">2</td> <td class="albumTable_song">사랑스러워</td> <td class="albumTable_artist">김종국</td> </tr> <tr> <td class="albumTable_checkbox"><input type="checkbox"></td> <td class="albumTable_number">3</td> <td class="albumTable_song">내사람 : Partner For Life</td> <td class="albumTable_artist">SG워너비</td> </tr> <tr> <td class="albumTable_checkbox"><input class="box" type="checkbox" ></td> <td class="albumTable_number">4</td> <td class="albumTable_song">Love Love Love</td> <td class="albumTable_artist">에픽하이</td> </tr> <tr> <td class="albumTable_checkbox"><input type="checkbox"></td> <td class="albumTable_number">5</td> <td class="albumTable_song">애인...있어요</td> <td class="albumTable_artist">이은미</td> </tr> </table>
요렇게 나오게 된다.
-
랜덤번호 생성하기!!!!!!
Math.floor,Math.random을 사용해서 만드는 것이었다.(1) 0 <= random < 1
Math.random();
Math.random() 함수는 0~1 사이의 실수를 리턴합니다.(1 미포함)(2) 0
Math.floor(Math.random());
Math.floor() 함수는 소수점 1째자리 이후의 숫자를 버림하고, 정수를 리턴합니다.
Math.random() 함수는 0~0.99999...인 숫자를 리턴하기 때문에,
Math.floor(Math.random()) 의 결과는 항상 0입니다.(3) 0 <= random <= 9
Math.floor(Math.random() 10);
Math.random() 함수의 결과는 0~0.99999...이고,
Math.random() 10 의 결과는 0~9.99999...입니다.
따라서, Math.floor(Math.random() * 10)의 결과는 0~9 범위의 정수입니다.
Math.random() 함수를 이용하여 정수 범위의 난수를 생성할 때는
이렇게 Math.random() 함수를 호출한 결과를 조작하고, Math.floor()를 사용합니다.(4) 0 <= random <= 10
Math.floor(Math.random() * 11);
10을 포함하는 정수 난수를 얻고 싶다면
Math.random() 함수의 결과에 11을 곱하고, 소수점 이하를 버림합니다.(5) 0 <= random <= 99
Math.floor(Math.random() * 100);
0~99 범위의 정수 난수를 생성하려면
Math.random() 함수의 결과에 100을 곱해주고, 소수점 이하를 버림합니다.(6) 0 <= random <= 100
Math.floor(Math.random() * 101);
0~100 범위의 정수 난수를 생성하려면
Math.random() 함수의 결과에 101을 곱하고, 소수점 이하를 버림합니다.(7) 1 <= random <= 10
Math.random() 10) + 1;
최소값을 지정하고 싶을 때는
Math.random() (max - min + 1) 값을 계산하고, 소수점 이하를 버림합니다.
그리고, min 값을 더해줍니다.
1~10 범위의 정수 난수를 계산하기 위해서 아래와 같이 계산하였습니다.
Math.floor(Math.random() (10 -1 + 1)) + 1
= Math.floor(Math.random() 10) + 1(8) 2 <= random <= 5
Math.floor(Math.random() 4) + 2;
(7)번 예제와 같이 범위를 지정하는 예제입니다.
Math.floor(Math.random() (5 - 2 + 1)) + 205
= Math.floor(Math.random() * 4) + 2실습
Math.floor( Math.random() * 1000000 ) // 숫자가 출력됨 String(Math.floor( Math.random() * 1000000 )) // string 넣어서 문자로 바꿔주기! // 출력되는 숫자가 6자리인데, 앞에 0 이 붙으면 '098765'로 나와야 하는 값이 '98765'로 나오는 것을 볼 수 있음. String(Math.floor( Math.random() * 1000000 )).padStart(6,"0") // 해결을 위해 padstart를 이용해줌
아래 처럼 '099557' 로 잘 출력이 됨!
- onclick은 버튼이 눌리면 활성화, oninput은 인풋에 뭐가 써지면 활성화
✔️ What I Liked
-
일주일 이라는 짧은시간 이었지만 오히려 자바스크립트 배우면서 css, html을 이해했다.
읭? ㅎㅎㅎ 신기한것은 배울 당시에는 이해를 못해도 한단계 앞서면 그 전것들이 갑자기 이해된다거나
조금 더 발전하는 느낌을 받는다. 수영배울때도 피아노배울때도 영어배울때도 그랬었다. -
그래도 모르는 것을 끈질기게 찾아보고 해결하려고 노력했었던 한 주였다. 사실 마지막 자바스크립트 가서는 도저히 모르겠어서 final과제때 완성은 못했지만 할만큼 했다고 생각해..🫠
✔️ What I Lacked
- 자바스크립트 이해도 부족
- 난 비전공자니까 이정도 했으면 되었지. 하는 내 생각이 나를 멈추게 하는 것 같다. 정신건강에는 좋음
- 집중을 잃으면 시간을 약간 낭비한다. 해야해! 하는 내 마음과 조금 쉬자 하는 마음이 싸우느랴 컴퓨터 앞에서 휴대폰을 만진다던지 등등..
✔️ What I long for
- 흥미 잃지 않고 계속 즐겁게 공부하기
- 혼자 공부하는 능력을 조금 더 기르기
- 집중하는 시간에 다른생각 하지 말기
- 내가 할 수 있을까? 라는 셀프 의심 하지말기..ㅎㅎ 다른사람들 보다 느리더라도 할 수 있다.
- 꾸준함의 힘을 믿기
