Treasure Treasure

인프런 '판다코딩'님 강의 참조!! 판다코딩님의 강의에 나오는 모든 자료는 상업적 사용을 엄격히 금지합니다!!!!! 기본 레이아웃 어느 클론코딩이 그렇듯 반듯이 기본 레이아웃을 그려보고 섹션을 꼭 나누는게 좋다 Main섹션이 실행이 되면 나머지 섹션은 보이지 않도록 하고 버튼으로 이동하며 다른 섹션이 실행이 되면 나머지 섹션은 자동으로 보이지 않도록 기본 세팅이 된다 부트스트랩이란? -> 이번 코딩은 부트스트랩을 쓴다 웹 혹은 앱을 만들때에는 반응형으로 만드는것을 권장한다. 반응형이아닐시에는 앱용 따로 웹용 따로 만드는 번거로움이 있다. 또한 반응형을 개발자가 스스로 CSS를 일일히 코딩을 할 수 있지만 창의적인 고통(?) 또는 코딩의 번거로움을 줄일 수 있는것이 부트스트랩이다. 또한 부트스트랩은 그리드..

1) 함수 함수는 어떤 기능을 가지고 있는 객체로 어디에서든 불러서 쓸 수 있는 것 또는 반복작업 및 코드의 효율성을 줄이는 중대한 역할을 가짐 함수는 기본적으로 매개변수와 인수를 가짐 매개변수(parameter) - 함수를 '호출할 때' 인수로 전달된 값을 함수 내부에서 사용되는 변수 인수(argument) - 함수가 '호출될 때' 함수로 값을 전달해주는 변수 매개변수의 이름은 아무거나 써도 되지만 반드시 자신이 만드는 프로그램에 관련이 있는걸로 짓는게 좋다 function sayHello(a) { // a = 매개변수(parameter) console.log(a + ' Hello!'); } sayHello('Sehwan'); //('sehwan') = 인자(argument) Sehwan Hello! ..

유투버 '드림코딩by엘리'님 강의 참조! 1) 준비사항 Visual Studio / Node.js / VS 안에 code Runner 설치 'Hello World' 가 출력되는지 테스트 var a = 'Hello World'; console.log(a); VS를 통해 HTML 문서와 JS를 연결하여 진행! * HTML 에 삽입 2) 시작전 HTML에 JS를 포함할 때 'async' vs 'defer' 의 차이를 알아야 한다! 사용자가 어떠한 웹페이지를 오픈하면 태그부터 컴파일이 되는데 거기서 JS를 위한 의 위치를 넣냐 아니면 끝부분에 넣느냐에따라 사용자가 보게되는 화면이 갈리는데 둘다 그렇게 좋은 선택지는 아니다. 는 HMTL 다운시 병렬로 JS를 다운받는다. 장점으로는 병렬로 받기때문에 JS를 읽어오..

유투버 '드림코딩by엘리'님 강의 참조! 1. 전체 레이아웃 2. 뼈대 잡기 단순 로 구역을 나누지말고 헤더 + 섹션으로 4 구역을 나누자 2-1 헤더 HTML YouTube 2-2 첫번째 섹션 HTML 비디오관련 태그 삽입전에 한번 읽어보면 좋은 링크 (https://developer.mozilla.org/enUS/docs/Web/HTML/Element/video) 항상 자기가 쓰려는 태그가 모든 브라우저에서 사용가능한지 필히 확인! HTML에서 자동 지원해주는 controls 를 쓰면 비디오면 넣으면 자동 적용 된다! 2-3 두번째 섹션 HTML 정말 특별한거 없는 HTML 뼈대다. 하지만 정말 중요한 기초이다. 어떻게 공간이 배치되는지 기억하자 또한 한 섹션에 타이핑할시에는 반드시 을 써서 구역을 ..

유투버 '드림코딩by엘리'님 강의 참조! 1. 레이아웃을 먼저 나눈다. 항상 화면이 클때와 작았을때를 기준으로 나눈다. 2. 나눈 후에 각각의 박스를 그려보고 몇개가 필요한지 보자 두개다 flex-box를 잘 활용 해야한다! 3. HTML 뼈대 잡기 각종 이쁜 아이콘은 다음 링크로!(https://fontawesome.com/) Dreams Home Gallery Wedding FAQ Bookings 4. CSS 입히기 - CSS시에는 항상 최상위에 있는거부터 하는게 좋다! 1) 전체 네브바 body { /*body가 가지고있는 기본 마진 없애기 */ margin: 0; font-family: 'Source Sans Pro'; } a { /*링크줄 없애고 흰색주기*/ text-decoration: non..

유투버 '개발하는 정대리'님 강의 참조! 1) 구글 사이트의 검사를 누르면 HTML과 CSS가 어떻게 정의가 되어있는지 볼 수 있다. 2) 뼈대 잡기 (섹션 나누기) 크게 섹션은 로고 제외 전체부분과 로고 부분으로 나눈다. 메인섹션에서 로고부분, 검색부분으로 또 나눈다 Google 검색 I'm Feeling Lucky 3) 디자인 하기 로고 삽입 전체페이지 조절 /* 랩퍼 정의 */ .wrapper { display: flex; flex-direction: column; min-height: 100%; } display:flex; -> 레이아웃을 유연하게 flex-direction:columnl; -> 주축은 열이고 방향은 콘텐츠와 동일 min-height:100%; -> 최소높이를 100%으로, 화면 ..

유투버 유노코딩님 강의 참조! - CSS 기본 문법 및 태그 설명 Cascading Style Sheets 의 줄임말로 계단식으로 스타일을 동적으로 정의하는 것 선택자 { 속성명 : 속성값; } 으로 선언 CSS를 적용하는 방법은 3가지 인라인 - 태그에 직접 기술 스타일 - 스타일 태그를 추가하여 기술 문서간 - CSS 파일을 따로 작성하여 연결 스타일 태그! 인라인 적용! 문서간 연결! - CSS 선택자 6가지의 선택자가 있지만 주로 기본/그룹 선택자를 많이 쓴다 선택자가 겹치면 아이디 > 클래스 > 태그 선택자 우선순위로 선택 된다 기본선택자 1-1 전체 선택자 - *(애스터리크)를 써서 선택, 문서내의 모든 요소를 의미 1-2 태그 선택자 - 주어진 이름을 가진 요소를 선택, '유형선택자' 라고도..

유투버 유노코딩님, 어라운드허브님 강의 참조! 1. HTML 태그/속성/바디 HTML의 기본 구성요소는 태그로 이루어지며 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있고 종료시 /을 붙임 속성은 태그의 부가적인 정보를 제공하는 방법 (, , width, height 등) 바디는 태그와 태그사이의 콘텐츠를 의미 HTML의 기본 골격은 / - HTML에서 가장 많이 쓰는 기본 태그 6가지 1. 텍스트 태그 - , (단락 태그) 등 등 - 단락태그사이에는 자동으로 공백이 들어감 - 수평선 태그 - HTML/CSS 에서는 엔터는 공백을 의미 하지 않고 스페이스 또한 한번만 빈칸을 의미함 (여러 공백은 ) HTML 입니다! 텍스트 태그의 종류는 h1~h6까지!~ 이것은 단락 입니다! 2. 링크 태그 현재 문서에..