TechLabs

1. 글꼴 font-style : 기본값 normal, italic (기울어진 체) font-weight : 기본값 400 (normal), 700 (bold), 100 ~ 900 font-size : 브라우저 기본 폰트 16px line-height : 한 줄의 높이, 요소의 글꼴 크기의 배수로 지정하는 것을 권장, height와 동일한 px를 넣으면 수직 정렬 가능하다! font-family : 여러 개 지정, 왼쪽에서 오른쪽 방향으로 진행된다. 시도를 하는데 안 되면 오른쪽으로 넘어가고, 되는 경우 오른쪽 모든 것을 무시한다. 맨 오른쪽에 serif (바탕체) 적어주기. san-serif 고딕체 의미. Google a{ display: block; width: 200px; height: 100px;..

1. 박스 모델 기본값 잘 알아두기 →다른 값 명시하여 제어 가능하게 만들 수 있기 때문이다. 1-1. width, height 기본값 : auto 1-2. max-width, max-height 기본값 : 최대는 none, 최소는 0 .parent{ width: 400px; height: 200px; background-color:royalblue; } .children{ max-width: 600px; height: 100px; background-color: orange; } 자식 태그가 최대 너비가 600px 이므로, 600px까지 넓어질 수 있다. 만약에 너비를 600px 라고 지정하면, 잘 지정된다. 미디어 쿼리에서 min-width와 max-width 많이 이용된다. 1-3. 단위 px : ..

2일차에는 알바와 퀸메이커 보느라 못하였다... 오늘도 알바를 끝내고 진행하였다. 1. html 문법 시작 태그 + 요소 (태그 사이에 있는 코드) + 종료 태그 부모 요소, 자식 요소 상위(조상) 요소, 하위(후손) 요소 속성과 값 (Attribute, Value) 상위 요소 ≠ 부모 요소 하위 요소 ≠ 자식 요소 빈 태그 : 이미지 태그, 메타 태그, 인풋 태그 등 내용 없는 태그 각각의 역할을 명확히 하기 위하여 속성과 값 명시하는 경우가 많다. 엄격한 문법 지키는 것이 안전하다. 이미지 태그는 이미지 경로와 이미지 이름 → 필수 속성 인풋 태그는 데이터 입력받는 태그 요소가 화면에 출력되는 특성 글자 : 인라인 요소 상자 : 블록 요소 인라인 요소 블록 요소 수평으로 쌓임 상하좌우 자동으로 줄어듦..

Side Bar 구현 방법 구현 여부 document.querySelector O addEventListener O classList.toggle O classList.add O 인라인 스타일 요소를 hover 시에 변경하고 싶은 경우에는 js를 이용하여 변경해야 한다. getComputedStyle : 인라인 스타일에서 원하는 스타일 가져오는 방법이다. cssText : 인라인 스타일 변경하는 방법이다. 트랜지션, @keyframes 애니메이션, 트랜스폼 모두 사용하였다. 차이점 명확하게 기억하기!

기능은 모두 구현하였지만, 문제점이 2가지가 존재한다. 버튼을 누르면 countMaker가 1초마다 반복된다. 하지만 입력값을 변경하면 그 숫자대로 변경된다. 이 문제를 해결하기 위하여 입력값은 버튼이 누를 때에만 갱신되도록 만들어야 한다. 유효하지 않는 시간과 지난 시간은 clearInterval을 진행하는 바람에, 원하는 메세지가 뜨지 않고 "D-Day를 입력해주세요" 가 뜬다. 이 문제를 해결하기 위하여 기능에 따라 함수를 구분해야 한다. 함수 1번 문제를 해결하기 위하여 전달 인자와 매개 변수의 개념을 이해해야 한다. 두 가지 모두 함수 외부에서 데이터를 전달 받아, 내부에서 사용하기 위한 수단이다. 매개 변수 : 함수 선언 시에 소괄호 안에 정의되는 변수이다. 전달 인자 : 함수 호출 시, 함수..

script defer 스크립트의 위치는 body 태그 안에 맨 끝에 넣어야 한다. 그래야 html에서 태그들을 js가 읽어올 수 있기 때문이다. 하지만, 가독성을 고려한다면 head 태그 안에 있는 것이 보기 좋다. 그러나 head 태그 안에 넣으면 js에서 html 태그를 읽어올 수 없기 때문에 오류가 발생한다. (코드는 위에서 아래로 순서대로 읽어나가기 때문이다.) 그래서 defer를 이용하여 이러한 문제점을 없애줄 수 있다. 반복문 반복되는 코드, 코드의 양을 획기적으로 압축한다. 반복문에는 for문과 while문이 있다. for 반복문 for(최초식; 조건식; 증감문){ 반복 실행하고자 하는 코드 } 최초식 : 최초에만 실행, 반복의 기준이 된다. 조건식 반복 실행하고자 하는 코드 증감문 실행 ..

조건문 1. 조건문 데이터가 들어왔을 때, 조건을 확인한다. true인 경우 run code. false인 경우 skip code. if(조건){ 조건 성립 시 실행하는 코드 }else{ 조건 성립하지 않을 시 실행하는 코드 } 경우에 따라 run another code 가능. if(조건 1){ 조건 1 성립 시 실행되는 코드 }else if(조건 2){ 조건 2 성립 시 실행되는 코드 }else{ 위의 조건 모두 성립하지 않을 시에 실행되는 코드 } 2. 논리 연산자 && : AND 연산자, 모두 true인 경우에 true || : OR 연산자, 하나라도 true인 경우에 true 3. 비교 연산자 두 개의 데이터 서로 비교하는 연산자 === : 엄격한 비교, Boolean 값 반환한다. == : 느슨..

Responsive Navigation Bar 만들기 구현 방법 구현 여부 document.querySelector O addEventListener O classList.toggle O 고민 끝에 이렇게 html 구조를 짜주었다. 버튼은 타이틀 옆에 위치하고, 너비가 넓을 때에는 보이지 않도록 설정하였다. css 부분에서 고민과 시행착오가 많았다. 미디어 쿼리를 이용하여 800px 기준으로 보여야 되는 요소와 보이지 말아야 되는 요소를 나누어서 css를 설정해주었다. 거의 전체 구조는 flex를 이용하였으나, 미디어 쿼리 적용 시에 변경되는 부분이 생기면 처음에는 flex로 고쳐보다가 안 되는 경우에 fixed를 이용하여 자체적으로 위치를 조정하였다. 미디어 쿼리에 따라서 너비를 조정하였다. 노란색 박..

Review Carousel 만들기 구현 방법 구현 완료 array O DOMContentLoaded X addEventListener O array.length O textContent X 앞에서 counter와 비슷한데, 좀 더 복잡한 구조로 이루어져 있다. 먼저, infoObject와 imgArray라는 데이터의 정보를 담은 객체와 배열을 만들어주었다. 그런 다음에 forEach + addEventListener를 이용하는데, forEach를 버튼과 info items에 두 개를 중복하여 돌려주면서 조건문을 이용하여 왼쪽 버튼인 경우에는 왼쪽으로 변경되게 만들고, 오른쪽 버튼인 경우에는 오른쪽으로 변경되게 만들면 된다. 조건은 버튼의 id를 기준으로 나눠주었다. 또한 나머지 값을 이용하여 범위를 벗..