Study
-
semantic elementsStudy/html 2020. 6. 24. 20:47
semantic elements = 의미를 가진 요소들. 시멘틱 요소는 분명하게 이것의 의미를 브라우저와 개발자 모두에게 전달한다. 예를들어, non-semantic요소인 와 은 이것의 내용에 대해 아무것도 말하지 않는다. semantic 요소의 예인 과 , 은 분명하게 이것의 내용을 정의한다. HTML에서의 시멘틱 태그 많은 웹사이트들은 네비게이션, 헤더, 푸터를 가리키기 위해 아래와 같은 HTML 코드를 가진다. HTML에는 웹페이지의 각각 다른 부분들을 정의하기 위해서 사용될 수 있는 시멘틱 요소들이 있다. HTML ELEMENT 요소는 문서 안에서의 한 section을 정의한다. W3C의 HTML 문서에 따르면 : "section은 일반적으로 제목이 있는 주제별 콘텐츠 그룹이다" 홈페이지는 일반적..
-
날짜와 시간Study/JavaScript 2020. 6. 24. 17:37
new Date() 날짜 객체 우리는 new Date() 날짜 객체를 이용해서 현재 날짜와 시간을 받아올 수 있다. 자세히 하나하나 뜯어보면 아래와 같다. let rightNow = new Date(); let year = rightNow.getFullYear(); let month = rightNow.getMonth()+1; // getMonth 함수로 값을 받을 때, 현재 달보다 1 작은 값이 반환되므로 주의 let date = rightNow.getDate(); let day = rightNow.getDay(); let currentHour = rightNow.getHours(); let currentMin = rightNow.getMinutes(); console.log(rightNow); // ..
-
string, Number 변환Study/JavaScript 2020. 6. 24. 16:22
JS 언어의 특징 중 하나가 데이터 타입을 신경쓰지 않는다는 것이다. 이것은 양날의 검이라고 할 수 있다. let a = '900'; let b = 350; let c = Math.random(); let d = '5' + 5; console.log(typeof a); // string console.log(typeof b); // number console.log(typeof c);; // number console.log(typeof a); //string 위와 같은 코드에서 우리는 당황할 것이다 string인 '5'와 숫자인 5가 서로 더해질 수 있따고??? 😵 자바스크립트에서는 가능하다. 자바스크립트는 스스로 타입을 변동시켜 연산을 하기 때문이다. 심지어 아래의 상황은 프로그램을 잘 못 짜면 날 ..
-
sliceStudy/JavaScript 2020. 6. 24. 13:36
정의와 사용 slice() 메소드는 string의 부분을 추출하고 새로운 string에 추출된 부분을 리턴한다. 우리가 추출하기 원하는 string의 부분을 명료화하기위해 start와 end 매개변수를 사용한다. 첫번째 글자는 포지션이 0이다. 두번째는 1이다. 이런식으로 index값을 갖는다. 팁: 문자열 끝에서 부터 사용하려면 음수를 사용하라. 매개변수 값 Parameter Description start Required. The position where to begin the extraction. First character is at position 0. end Optional. The position (up to, but not including) where to end the extracti..
-
배열의 최소값 구하기:: for문 알아보기Study/JavaScript 2020. 6. 24. 11:48
Q. findSmallestElement 함수를 구현해 주세요. findSmallestElement 의 arr 인자는 숫자 값으로만 이루어진 array 입니다. array 의 값들 중 가장 작은 값을 리턴해주세요. 만일 array가 비어있으면 0을 리턴해주세요. 예를 들어, 다음과 같은 array이 인자(input)으로 들어왔다면: [20, 200, 23, 1, 3, 9] 1이 리턴되어야 합니다. 자바스크립트 for문을 이용해 위의 문제를 해결해보자. 그러려면 먼저 js의 for문에 대해 알아야 할 것이다. for문이란? for문이란 코드를 원하는 만큼 반복시킬 수 있다. for문에 실행 조건이 언제부터 언제까지 될 것이라고 알려주면 동작을 그 만큼 반복 할 수 있다. for문을 왜 사용하는가? 개발을 ..
-
2020.06.23:: 오늘의 TILStudy/TIL 2020. 6. 23. 22:17
오늘의 한 일 css float layout 홈페이지 구현 css media query 이용한 반응형 웹페이지 구현 자바스크립트 함수, if문, 데이터활용 복습 (위코드-리플잇) 새롭게 배운 것 inline 요소와 inline-block요소의 차이점 media query 활용하여 구축 보완해야할 부분 media query 활용한 구축 실제 부분 scss 배우기 위코드 오늘은 멘토님들과의 티타임을 가졌다. "타인과 비교하지 말고, 예전의 나와 현재의 나를 비교하세요" 멘토님들께서 강조하시고 강조하셨던 부분이다. 그런데 생각보다 이게 참 쉽지가 않다. 나에게 보완해야할 부분이 보이는 동시에, 앞서가는 동료가 보인다. 점점 뒤쳐질까 두려워지고, 내가 놓치는게 있을까 두려워져 나도 더 속도를 내게 된다. 그러나..
-
2020.06.22 :: 오늘의 TILStudy/TIL 2020. 6. 23. 10:40
오늘의 한 일 html, css 전체 정리 (리플잇) css float 블로그 정리 css inline & block 블로그 정리 css position 블로그 정리 새롭게 배운 것 css float layout 보완해야할 부분 css media query 적용실습해보기 및 블로그 정리 css float 과 clear 보완 위코드 오늘은 위코드 개강 첫날이었다. 그동안 고대하고 고대하던 시간이 드디어 왔다... 🐣 오늘은 위코드의 오리엔테이션 시간과 개별공부 시간을 가졌다. 개발자로서, 그리고 위코드인으로서 반드시 기억해야할 3가지!! 절대적 시간투자 (12시간 매일) - 절대적 시간을 투자하면 누구나 개발자가 될 수 있다. 같은 답도 누군가에게 여쭈어 얻는것과 혼자 3-4시간 삽질한것에는 습득에 차이가..
-
floatStudy/css 2020. 6. 22. 22:51
float은 한 요소(element)가 보통의 흐름으로부터 빠져나와 텍스트 및 인라인 요소가 컨테이너의 좌우측을 따라 배치되는 것을 지정한다. 일반적인 정렬과는 다르게 float 정렬된 것 주위로 다른 컨텐츠가 흐르듯이 배치가 된다. 이렇게 흐르는 듯한 배치가 가능함으로 사이트를 레이아웃할 때도 사용한다. 문법 /* Keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /* Global values */ float: inherit; float: initial; float: unset; 값 left 는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해..