📝 TIL
[TIL] JS 이벤트, 문자열 메서드, 이미지 파일 판별
✍ Today I Learned html 태그에 속성으로 onclick을 사용할 수 있으나 이벤트 리스너의 등록 개수가 제한적이기 때문에 추천하는 방식은 아니다. let sbmBtn = document.getElementById('sbmBtn'); sbmBtn.addEventListener('click', saveList); // 이런 방식을 더 추천 객체는 순서가 중요하지 않다. 모든 함수에서 객체에 접근하려면 함수 밖에서 빈 객체를 선언 후 함수 안에서 객체에 값을 할당하면 된다! const me = {}; // 이렇게 빈 객체 선언 이벤트를 발생시킬 때 데이터를 받아오는 시점이 언제인지 주의해야 한다. 모든 코드에 정답은 없다! 효율성의 차이만 있을 뿐.. 문자열 데이터 타입은 시퀀스 특성이므로 순..
[TIL] JS 함수, 객체, 이벤트
✍ Today I Learned 항상 능동적으로 공부할 것! 함수를 사용하면 효율성이 올라간다. arrow function을 이용하면 함수 코드의 양을 줄이면서 변수화 할 수 있다. 그러나 return이 없는 함수라면 굳이 쓰는 의미가 없다. 객체란? 개념적으로 인지 가능해야 함 고유적인 이름으로 구분해야 함 시작과 끝이 반드시 존재해야 함 값이 바뀌어도 객체 자체의 주소값은 바뀌지 않기 때문에 객체는 const로 선언한다. 객체 안에 arrow function을 사용할 수도 있지만 정보가 많아 가독성이 중요하기 때문에 잘 사용하지 않는다. this 키워드는 내가 소속된 객체를 가리킨다. JSON (JavaScript Object Notation)은 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기..
[TIL] JS 연산자, 함수
✍ Today I Learned 논리 연산자의 우선순위에 따라 코드의 효율성이 달라진다. (우선순위 :! > && > ||) 삼항 연산자는 유일하게 피연산자를 3개나 가지는 조건 연산자이다. 짧은 if/else문 대신 사용할 수 있지만, 가독성이 떨어진다는 단점이 있다. // 표현식 ? 반환값1 : 반환값2 let x = 3, y = 5; let result = (x > y) ? x : y // x가 더 크면 x를, 그렇지 않으면 y를 반환함. console.log("둘 중에 더 큰 수는 " + result + "입니다."); 함수는 대부분 개발자가 직접 만들어낸 일반적 기능을 하는 것을 의미하고 메서드는 객체에 소속되어 있는 함수를 의미한다. 파라미터의 데이터 타입은 자유도가 높다. 자바스크립트는 스크..
[TIL] JS 자바스크립트 시작
✍ Today I Learned 자바와 자바스크립트는 전혀 다른 언어이다. 자바스크립트는 프론트 영역의 프로그래밍 언어이다. 서버가 아닌 브라우저가 해석 html과 css의 아키텍쳐를 다 품고 있음 프로그래밍을 왜 하는 걸까? 선택을 효율적으로 하기 위해서 컴퓨터의 주요 5대 장치는? 입력, 출력, 연산, 제어, 기억 백 틱(`)을 사용하면 ${}을 이용하여 내부에 코드를 삽입할 수 있다. 변수를 선언할 때 ES6(2015)부터는 let 사용을 권장한다. CamelCase → 자바, C, C++, C#에서 주로 사용 snake_case → 자바스크립트, 파이썬에서 주로 사용(권장 방식) 자바스크립트에서 선언 없이 변수를 할당하면 그 변수는 전역에 영향을 미치므로 가급적 사용 X (권장 방식은 아님) 변수..
[TIL] 포트폴리오 페이지 제작, 깃헙, 부트스트랩
✍ Today I Learned 오늘은 포트폴리오 웹 페이지 사이트를 제작했다 작성하다 보니 어떻게 만드는가 보다 내가 얼마나 열심히 해야 하는가를 깨닫는 중 처음부터 완벽하려는 욕심에 시간이 많이 걸렸다.. 일단 완성하는 게 목표! Git 이란? 소스코드 버전 관리 시스템 버전 관리란? 수정한 각 파일이 충돌하지 않도록 수정된 사항이 있을 때마다 사진 찍듯이 저장해주는 것 원격 repo와 로컬 repo를 연결하려면? 로컬 repo에서 원격 repo로 tracking 하고, 원격 repo commit 내역을 pull 해온다 또는 원격 repo를 clone해온다 (주로 원격 repo에 어떤 내용이 있을 때 사용) 내 파일을 원격 repo, 그러니까 Github에 만들어 놓은 repo에 올리려면? 파일 생성..
[TIL] CSS flex, table, 부트스트랩
✍ Today I Learned display: flex; display: table; 을 이용하면 중앙 정렬을 간단하게 할 수 있다. .flex-container { display: flex; justify-content: center; align-items: center; } .boxwrap { display: table; } .boxwrap .box { display: table-cell; table-layout: fixed; vertical-align: middle; text-align: center; } 쇼핑몰 페이지가 PC와 모바일 서버를 따로 두는 이유 트래픽 분산을 위해 기획적인 부분(노출되는 품목이 다름) 부트스트랩을 사용하는 2가지 방법 다운 받아서 사용 장점 - 내가 사용하는 버전으로..
[TIL] CSS 정렬, 반응형
✍ Today I Learned 오늘도 내비게이션 바와 아웅다웅하며 알게 된 것들 내비게이션 바 오른쪽 정렬하면 콘텐츠 내용 계속 바뀌던 거 에 display: inline; 설정으로 해결 내비게이션 바의 height이 정해져 있으면 line-height 똑같이 설정해서 수직정렬 높이를 굳이 지정하지 않았으면 padding으로 수직정렬 에 vertical-align: middle; 설정 vertical-align은 오로지 inline과 table-cell element에만 적용된다. (block level element에 사용 X) 예를 들면, img element를 text element 라인 속에서 정렬할 때 쓰인다. (참고자료) float으로 한쪽 정렬을 하지 않으면 아주 미세한.. 이상한 마진이 ..
[TIL] CSS 심화버전, 실습 위주
✍ Today I Learned table 마크업을 할 때는 웹 접근성을 준수하여 thead, tfoot, tbody 순서로 작성한다. colgroup 요소는 각 행(row)이나 셀(cell)의 스타일을 반복하지 않고, 열(column) 전체에 다른 스타일을 적용하고 싶을 때 사용한다. !important를 사용하면 최우선으로 적용된다. 꼭 필요한 경우에만 사용한다. 내비게이션 바 만들 때 overflow:hidden; 은 왜 사용하는 걸까? W3School TCPSchool currentcolor 키워드를 사용하면 color로 설정한 값을 그대로 사용할 수 있다. inherit 키워드는 부모 요소에게 값을 상속받는다는 의미이다. word-wrap: break-word; 단어가 길면 끊고 다음 줄로 줄 ..