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] 포트폴리오 페이지 제작, 깃헙, 부트스트랩
✍ 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; 단어가 길면 끊고 다음 줄로 줄 ..
[TIL] CSS 레이아웃, 선택자
✍ Today I Learned 태그는 inline 속성, 태그는 block 속성이다. 이미지 불러올 때 항상 유의할 것! CSS class의 변수화 - 각 기능마다 class를 줘서 재사용성 증가! float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다. 이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 된다. 모든 태그에 class를 주기보다 :nth-child() 등 선택자를 잘 활용하자. 웹폰트는 임포트 하는 것보다 직접 다운로드하는 게 더 안전하다. box-sizing: border-box; 로 설정하면 내가 설정한 width값이 실제 값이 된다. ..