본문 바로가기

[자기계발]/유튜브로 코딩배우기

[자기계발]/유튜브로 코딩배우기 2021. 8. 23. 코딩 초보 반응형 웹사이트 만들기 피드백 드림코딩엘리 채널에서 반응형 웹사이트 만들기 실습을 해보았다. 따라 쓰는 것은 누구나 다 할 수 있으므로 여기서 제안하는 것은 먼저 결과물을 '스스로' 만들어보라는 것이다. 그래서 한 번 해보았다. 1차 시도: 30분 but 매우 허접함 이후 영상을 한 번 시청하여 아이콘, 폰트를 로드하는 사이트와 전체적인 윤곽을 배웠다. 2차 시도: 총 2시간이 걸렸고, 비슷하게 만들었으나 JavaScript 쪽으로 까지 미치지는 못하였다. 이후 영상을 시청하여 HTML과 JS를 연결시키는 방법과 여러 디테일에 관해 배웠다. 밑에 정리를 하였고, 이 지식을 바탕으로 3차 시도를 해볼 것이다. 3차 시도: 총 2시간 반이 걸렸고, HTML과 CSS에서 2가지 상황에서 막혔었다. 또한 CSS에서 :hover 를 a에다가 ..
[자기계발]/유튜브로 코딩배우기 2021. 8. 15. HTML <div> 대신 사용하는 것들. 바로 시맨틱(Semantic) 태그 웹사이트를 만들 때 div를 남발하는 경우가 많은데, 그렇지 않고 의미있는 태그들을 사용하는 것이 좋다. 이 태그들을 시맨틱 태그 (Semantic tag)라고 하며 "의미의"라는 뜻이다. 이것을 봄으로써 다른 사람이 만든 웹사이트를 볼 때, html 태그의 의미를 정확하게 파악할 수 있다. , 태그는 non-semantic 태그이고, ,, 등 밑에 나오는 태그들이다. header 웹사이트의 브랜드를 나타내줄 수 있는 로고나 사용자들을 위한 중요한 메뉴 아이템이 들어 있다면 대신에 를 사용하는 것이 좋다. 만약 안에 여러가지 메뉴들이 모여있으면 뒤에 보다는 를 사용하는 게 좋다. 는 다른 페이지로의 링크를 보여주는 구획을 담당한다. 메뉴, 목차, 색인에 주로 쓰인다. footer 웹사이트 제일 아래에 마..
[자기계발]/유튜브로 코딩배우기 2021. 8. 11. CSS 단위 총정리 - em과 rem이 제일 중요하다 이 편에서는 CSS 에서 중요한 단위인 em 과 rem 에 대해 알아볼 것이다. 흔히 쓰였던 px 는 반응형 웹사이트를 만들기에 좋지 않다. 기억해야 할 것은 html의 기본은16 픽셀 이고, 이것에 따라 상대적으로 em과 rem을 결정한다는 것이다. em은 부모 요소 대비 / rem 은 루트 요소 대비 상대적인 것 parents에 8em 이라는 것은 parent의 부모 요소인 HTML의 16픽셀의 8배가 곱해진 값이다. 즉, 16px * 8 = 128 parents 안에 있는 child가 0.5em 이면 128의 0.5배 = 64px 가 출력된다. em(relative to parent element)은 부모 요소 대비 상대적으로 글자 크기가 결정이 되고 rem(realtive to root eleme..
[자기계발]/유튜브로 코딩배우기 2021. 8. 9. CSS Flex-box , 반응형 웹사이트의 필수조건 미디어 쿼리 여기서는 CSS에서 유용하게 쓰이는 Flex-box에 대해서 알아볼 것이다. Flex-box가 나오기 전에는 float와 position으로 어렵게 아이템들을 배치 했지만 이제 float는 원래 목적에 맞게 image와 text를 어떻게 배치할 건지에 대해 정리할 때만 쓴다. Flex box margin, border, padding을 이용해여 box를 여러개 정렬하는 거는 한계가 있다. 여러개의 아이템을 수평/수직으로 정렬할 때, 박스를 동일한 '간격'과 '사이즈'로 배치할 때 사용하는 것이 flexbox이다. Flexbox 2가지만 이해하면 큰 그림을 이해할 수 있다. Flexbox에는 'container 에 지정되는 속성값들'과 'item 에 지정되는 속성값들'로 나누어져있다. flexbox를 만들..
[자기계발]/유튜브로 코딩배우기 2021. 8. 8. CSS 기초 이론, 레이아웃 정리, 색깔 코드 사이트, Emmet 사용법 CSS 복습을 다시해보려고 한다. 이번에는 생활코딩이 아닌 '드림코딩엘리' 유튜브 채널에서 공부를 하였다. 이 강의를 보고나니 생활코딩의 강의는 너무 오래됐다는 것을 알게되었다. 오래된 강의를 보고 어려운 방법으로 어렵게 개발하는 것은 좋지 않다고 생각한다. IT 쪽은 매년 많은 업데이트가 일어나는데 구식에 얽매여있기 보다는 좋은 기능을 유용하게 쓰는 현명한 사람이 되자. CSS 기초이론 padding은 안 쪽 여백 / border는 테두리 / margin은 바깥 쪽 여백 이다. padding: (top, bottom,) (right, left) 순으로 적는데 생략해서 쓰려면 ( ) 는 세트로 생각하며 된다. padding: 20px 0px; 이렇게 하면 (위 아래)는 20px (양옆)은 0px 이렇게 ..
[자기계발]/유튜브로 코딩배우기 2021. 8. 7. HTML, 프론트엔드를 위한 도움되는 사이트 모음. 포트폴리오, 프로젝트 팁 HTML이란? HTML은 브라우저에서 실행 가능한 가장 기본적인 파일이고, markup 언어로 구조적으로 tag들을 이용해서 보여주며 상위 tag안에는 총 2가지 head 와 body 가 있다. head에는 상세설명이 들어가고, body에는 사용자에게 보여지는 tag들로 이루어져 있다. 태그들은 어디서 확인하나? MDN에서 확인 할 수 있다. HTML elements reference - HTML: HyperText Markup Language | MDN This page lists all the HTML elements, which are created using tags. developer.mozilla.org HTML 기본 구조 배치보는 곳 Document and website structure -..
[자기계발]/유튜브로 코딩배우기 2021. 8. 6. [드림코딩 엘리] 자바스크립트 배열 개념 & APIs 정리 토끼와 당근 같은 비슷한 타입의 Object들을 묶어 놓는 것을 바로 자료구조라고 한다. 보통 다른 언어에서는 이런 자료구조에 동일한 tpye의 object만 담을 수 있다. 하지만 자바스크립트는 dynamically typed language로 type이 동적으로 정의가 된다. 즉, 한 바구니 안에 다양한 종류의 data들을 담을 수 있다. 그러나 이런식으로 프로그래밍 하는 것은 좋지 않다. 나중에는 자료 구조와 알고리즘을 꼭 공부해야하는데, 새로운 데이터를 얼마나 효율적으로 검색 / 삽입 / 정렬 / 삭제할 수 있는지 이런 효율성을 같이 공부하면 매우 도움이 될 것이다. 나중에 어떤 문제를 해결 하느냐에 따라서 많은 자료 구조들 중에 어떤 자료구조를 선택하는지, 그 선택할 때 '검색 삽입 삭제 정렬'..
[자기계발]/유튜브로 코딩배우기 2021. 8. 5. [드림코딩 엘리] 자바스크립트 Object를 만드는 방법, key 사용법, 이번 편에서는 자바스크립트 Object를 알아볼 것이다. 오브젝트란 자바스크립트의 데이터 타입 중 하나이며 관련 데이터 및 기능의 모음이다. Javascript의 거의 모든 객체는 Object의 사례이다. const name ='ellie'; const age = 4; print(name, age); function print(name, age) { console.log(name); console.log(age); } primitive 타입은 변수 하나당 값 하나를 담을 수 있고, 이름과 나이를 각각 parameter로 전달해줘야 한다. 만약에 위에처럼 코드를 작성하면 관리하기도 힘들고, logical 하게 골고루 생각할 수 없기 때문에 좋지 않다. 그래서 objet를 쓰는 것이다. 1. Literals..

티스토리툴바