본문 바로가기

전체 글130

wecode 사전스터디(7/26) 로그 개발한 것/배운 것 CSS Grid 열과 행(2차원)의 방식으로 문서 내 요소들을 배치하기 위한 레이아웃 방식 Grid 컨테이너 그리드 배치 방식을 적용할 요소들의 부모 요소이며, 해당 컨테이너에 display: grid 입력을 통해 적용할 수 있다 Grid Container를 위한 속성들은 다음과 같다 display 그리드 컨테이너(Container)를 정의 grid-template-rows 명시적 행(Track)의 크기를 정의 grid-template-columns 명시적 열(Track)의 크기를 정의 grid-template-areas 영역(Area) 이름을 참조해 템플릿 생성 grid-template grid-template-xxx의 단축 속성 row-gap(grid-row-gap) 행과 행 사이.. 2020. 7. 26.
wecode 사전스터디(7/25) 로그 개발한 것/배운 것 CSS Flexbox 기존의 CSS만으로 구현이 어려웠던 레이아웃의 구현을 돕기 위해 CSS3에서 새로 도입된 구현 방법. 복잡한 계산 없이 요소들의 정렬, 크기, 방향 등을 쉽게 정리할 수 있다. Flexbox의 구성 flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성된다. Flexbox를 만들기 위해서는, 정렬하려는 요소의 부모 요소에 display:flex;를 설정하면 된다. display: flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 된다. Flexbox의 부모 요소 속성과 자식 요소 속성 구분 전체적인 정렬이나 흐름에 관련된 속성은 fl.. 2020. 7. 26.
자바스크립트 array 위코드 개강(8/17) D-27. ☆ 2주차 mission : array method 중 slice, splice, push, pop, filter, map 을 활영한 함수를 작성해보세요 자바스크립트 Array 1. Slice (참조) - arr.slice([start[, end]]) - 배열의 일부분을 추출하여 새로운 배열을 리턴하는 함수 let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] let citrus = fruits.slice(1, 3) // fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] // citrus contains ['Orange','Lemon'] 2. splic.. 2020. 7. 22.
wecode 사전스터디(7/21) 로그 - (노마드코더 리뷰 3) 위코드 개강(8/17) D-27. 배운 것/개발한 것 ☆ 노마드코더 JS 강의 : 강의 끝내기 + 코드 리뷰 글 올리기 (링크) 1. #3.5 Making a To Do List (Part 1) 1) html 코드 일부 2) JS 코드 일부 const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS = "toDos"; function paintToDo(text) { const li = document.createElement("li"); const delBtn = d.. 2020. 7. 21.
wecode 사전스터디(7/20) 로그 - 2 (노마드코더 리뷰) 위코드 개강(8/17) D-28. 배운 것/개발한 것 ☆ 노마드코더 JS 강의 : 강의 끝내기 + 코드 리뷰 글 올리기 - 2 (링크) 1. #3.2 Saving the User name (Part 1) 1) html 코드 (일부) 00:00 form 문과 form 내부의 input창 추가 greeting.js 파일 연결문 추가 2) CSS 코드 (일부) .form, .greetings { display: none; } .showing { display: block; } .form, .greetings의 display가 none인 이유 : 브라우저의 currentUser 명이 저장되어 있지 않을 경우(null) 이름을 입력하는 창인 .form과 이름이 표기되는 greeting의 display를 안보이게 .. 2020. 7. 20.
wecode 사전스터디(7/20) 로그 - 1 (노마드코더 리뷰) 위코드 개강(8/17) D-28. 배운 것/개발한 것 ☆ 노마드코더 JS 강의 : 강의 끝내기 + 코드 리뷰 글 올리기 (링크) 1. #3.0 Making a JS Clock (Part 1) 1) html 코드 00:00 문을 통해 index.html에서 실행할 자바스크립트 포함 각 기능별로 별도의 자바스크립트 파일로 최대한 세분화하는 것이 나중에 구조를 파악하기 좋음 2) JS 코드 const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime() { const date = new Date(); const minutes = date.getMi.. 2020. 7. 20.
wecode 사전스터디 1주차(7/19) 로그 위코드 개강(8/17) D-29. 배운 것/개발한 것 ☆ 2주차 과제 mission template literal을 이용해 변수와 string을 동시에 작성해보세요 for문과 while문을 반복문을 작성해보세요 1. template literal (참조) ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation)이라 한다. 문자열 인터폴레이션은 ${ … }으로 표현식을 감싼다. 문자열 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다. const template = `템플릿 리터럴은 '작은따옴표(sin.. 2020. 7. 19.
wecode 사전스터디 1주차(7/18) 로그 위코드 개강(8/17) D-30 배운 것/개발한 것 ☆ 2주차 과제 mission : javascript에서 var, let, const를 이용해 변수를 선언하고 각각의 차이점을 조사해보세요 1. 선언 방식 var은 ES6 이전의 변수 선언 방식 여러 차례 var변수를 선언해도, 계속해서 재사용 가능 -> 코드가 길어질 수록 해당 변수의 선언 위치를 모두 파악하는게 어려워짐 ES6에서 let과 const 변수 선언 방식 도입 let : 변수 선언 후 재할당이 가능함 const : 변수의 재선언 및 재할당이 모두 불가능 2. 변수 호이스팅 호이스팅 (hoisting) : var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 자바스크립트 속성 (참조) -> 자바스크립트는 .. 2020. 7. 18.
wecode 사전스터디 1주차(7/17) 로그 위코드 개강(8/17) D-31 1. 배운 것 : freecodecamp.org css 'learn applied accessibility' 1) html label 태그 - label 태그는 form의 양식에 이름을 붙이는 태그 - label의 for의 값과 양식의 id의 값이 같으면 연결됨 2) html fieldset 태그 - form 양식 내에서 관계된 요소들끼리 묶어주고, 박스로 표기할 수 있는 기능 - 박스의 이름을 legend 요소를 통해 표기할 수 있음 What level ninja are you Newbie Kitten Developing Student Master 3) input 태그 사용해서 날짜 입력창 생성하기 - input의 type을 "date"로 설정하여 일자를 입력하는 inp.. 2020. 7. 17.

티스토리툴바