본문 바로가기
반응형

코린이

반응형
[자기계발]/유튜브로 코딩배우기 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. 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..
[자기계발]/유튜브로 코딩배우기 2021. 8. 3. [드림코딩 엘리] class와 object의 차이점, 객체지향 언어 클래스 정리 이번 편의 핵심은 사물과 물체들을 class로 정리할 수 있는 눈을 기르는 능력을 갖는 것이다. 강의가 끝나고 어떻게 저것들을 class로 만들 수 있을지 생각해보라. 또한 쇼핑몰 만들 때 or 수강신청 프로그램을 만들 때 어떻게 class로 잘 정리할 수 있을까를 생각해보자. Class 와 Object class를 이용해서 상속과 다양성이 일어날 수 있는데 이런 모든 것들이 가능한 것이 바로 객체지향 언어이다. e.g.) 캡슐화, 상속, 다양성 등 person 이라는 class 안에는 name과 age 라는 속성이 있고, speak() 말하는 function이 들어있다. class 안에는 이름과 나이 같은 속성(field)가 들어있고, 말하는 행동(method)가 들어있다. class는 조금 더 연관이..
[자기계발]/유튜브로 코딩배우기 2021. 7. 23. [드림코딩 엘리] 자바스크립트 최신 ES6강의! 데이터타입, var 보다는 let을 쓰기, hoisting이란? 타입스크립트란? 코딩 유료강의를 찾다가 드림코딩이 괜찮다고 해서 강의를 신청하였다. HTML, CSS, JavaScript를 생활코딩에서 배웠으므로 유료강의중 이 3가지를 모두 활용하는 브라우저 101를 선택하였다. 가격은 $100불로 117,000원 정도이다. 하지만 진도를 나가자마자 콱 막히게 되었다. 까먹은 부분이 매우 많았으며 또 사용하는 코드도 달랐다. 다시 강의를 자바스크립트 강의를 듣자니 또 너무 시간이 걸리지 않나 하고 생각했지만 드림코딩 엘리님의 강의를 듣고 나니 겸손해졌다. 생활코딩도 물론 좋지만 강의가 너무 오래돼서 인지 엘리님과의 코드와는 많이 달랐다. 그래서 2배속으로 한번 훑어보자는 마음을 접고 다시 차근차근 배워나가기로 했다. 매일 1강씩 출발! 프로그래밍 언어에서 가장 중요한것은 입력 / 연..
[자기계발]/유튜브로 코딩배우기 2021. 5. 18. [생활코딩] JavaScript 기본문법 정리 (숫자와 문자, 변수, 주석, 줄바꿈과 여백, 비교) 웹을 만들어보다가 JS 복습이 필요하다고 느낀 것도 있고 여러 기능을 써보고 싶어서 생활코딩을 다시 공부하기로 했다. 이번엔 언어로 접근하여 조금더 자세하게 배워볼 것이다. 언어소개 https://opentutorials.org/course/743/4650 언어소개 - 생활코딩 JavaScript JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 opentutorials.org 자바스크립트 기본 실행방법과 실습환경 #크롬 개발자도구 맛보기 https://opentutorials.org/course/580/2865 둘러보기 - 생활코딩 둘러보기 2012-09-27 23:16..

티스토리툴바