분류 전체보기 753

[Java Script] 상수/ 변수/ const / let/ var / 변수의 유효 범위/ 블록 스코프/ 함수 스코프/

상수 : const 값을 한번 선언하면 변할 수 없다. 변수 let 값을 계속 변화할 수 있다. const sum = 5 + 10; let result = false; if(sum %3 === 0){ cosole.log('야호3'); result = true; } if(sum %5 === 0){ cosole.log('야호5'); result = true; } console.log(result); 변수와 상수의 유효범위 const, let 블록 스코프 {} 이 안의 영역이 유효하다 { // 이 블럭 안에서는 name은 이 안에서 사용 가능하다 const name = 'Mark'; conosle.log(name); } //이 밖에서는 name을 사용할 수 없다. // 하지만 밖에서 정의한 변수는 안에서는 사..

WEB/Java Script 2021.04.22

[깃허브 예제] 화면 줄였을 때 로그인 부분 가운데로 가게 하기/ 미디어 쿼리 / 미디어쿼리 css 파일 분리하기/ footer에 양옆으로 float으로 나눠진 요소를 수직으로 정렬하고 가운데 정렬하기

/* visual */ .section--visual{ background-image: url("../img/bg-small.jpg"); } .section--visual .inner{ display: block; max-width: none; padding: 80px 20px; } .section--visual .summary{ text-align: center; margin-right: 0; margin-bottom: 50px; } #sign-form{ width: auto; max-width: 500px; margin: 0 auto; } 지금까지 미디어 쿼리 코드 전체 /* MEDIA */ @media (max-width: 1024px){ header.section .inner{ /* 원래 max-..

[깃허브 예제] toggle버튼을 화면 크기에 따라 없어지고 있게 하는 법 js코드

(function(window, document){ 'use strict'; const $toggles = document.querySelectorAll('.toggle'); const $toggleBtn = document.getElementById('toggle-btn'); // 사용자가 클릭하는 이벤트가 발생하면 $toggleBtn.addEventListener('click', function(){ toggleElements(); }); // 뷰포트를 resize할때 무엇인가를 하겠다. window.addEventListener('resize', function(){ if(window,innerWidth>1024){ //Off toggle element // 브라우저가 1024보다 크면 토글을 꺼라..

[깃허브 예제] toggle버튼 만들기/ toggle버튼에 클래스를 추가함으로써 누르면 사라지고나타나게 하는 js만들기

2021.04.22 - [무작정 따라하기/패스트캠프(프론트)] - [깃허브 예제] 미디어 쿼리 / @media / 미디어 타입/ 미디어 특성/ max-width정의/ float 해제/ toggle버튼 생성 [깃허브 예제] 미디어 쿼리 / @media / 미디어 타입/ 미디어 특성/ max-width정의/ float 해제/ toggle버튼 반응형 - 뷰포트의 크기에 따라 화면이 달라진다. 전체 화면일때 @media 미디어타입 and (미디어 특성){ css코드 } 미디어 타입 all : 모든 미디어 타입에 적용 screen: 컴퓨터 화면, 타블렛, 스마트폰 prin sso-feeling.tistory.com 지금 display: none;을 없애면 이런 형태로 보인다. 하지만 이렇게 세로로 정렬 되어있어야..

[깃허브 예제] 미디어 쿼리 / @media / 미디어 타입/ 미디어 특성/ max-width정의/ float 해제/ toggle버튼 생성

반응형 - 뷰포트의 크기에 따라 화면이 달라진다. 전체 화면일때 @media 미디어타입 and (미디어 특성){ css코드 } 미디어 타입 all : 모든 미디어 타입에 적용 screen: 컴퓨터 화면, 타블렛, 스마트폰 print: 인쇄 전용 미디어 특성 width max-width min-width height max-height min-height orientation - 뷰포트의 방향(portrait, landscape) - portrait : 세로가 더 긴 상태 - landscape: 가로가 더 긴 상태 .container{ width:100px; height:100px; background: tomato; } @media screen and (max-width: 700px){ .containe..

[깃허브 예제] footer / svg로 로고 넣기 /배치를 바꾸지 않으면서 svg로 이미지 가운데로 배치하기

개발자 도구로 보면 Contact GitHub API Training Shop Blog About © 2016 GitHub, Inc. Terms Privacy Security Status Help /* footer */ footer{ } footer .inner{ padding: 50px 0; border-top: 1px solid #eee; } footer .site-links{ display: flex; } footer .site-links li{ font-size: 12px; margin-right: 10px; color: #767676; } footer .site-links li a{ color: #4078c0; } footer .site-links li a:hover{ text-decoratio..

[깃허브 예제] feature 섹션 만들기/ video넣기[깃허브 예제] feature 섹션 만들기/ video넣기

Welcome home, developers GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others. 이렇게 구조를 잡아 주었다. video그냥 넣으면 반응형이 안되기 때문에 div 태그 안에 넣었다. 2021.04.21 - [WEB/html,CSS] - [html][css] 유튜브 video 16:9 비율에 맞게 삽입하기[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기 [html][css] 유튜브 video 16:9 비율에 맞게 삽입하기[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기 .video{ max-wid..

[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기[html][css] 유튜브 video 16:9 비율에 맞게 삽입하기

.video{ max-width: 650px; border: 4px solid red; } .video-ratio{ height: 0; /* padding top은 부모 요소의 가로 요소에 영향을 받는다 */ /* height는 반응형이 안되고 크기를 픽스해버리는 것임 */ padding-top: 56.25%; position: relative; } iframe{ background: black; position: absolute; top:0; left: 0; width: 100%; height: 100%; } padding-top 에 56.25퍼센트는 16:9를 계산해서 나온 수치임 그것이 padding이기 때문에 그 안에 요소가 들어갈 수 없다. 그러므로 iframe에 position : absolu..

WEB/html,CSS 2021.04.21

[깃허브 예제]  로 자연스럽게 글자 줄바꾸는 법 / 깃허브 visual section 우측 input박스와 sign up 버튼 만들기

이부분을 만들 것임 글자 줄바꿈 하는 법 How people build software 이렇게 연결되었다 특정한 단어가 자연스럽게 줄바꿈이 된다. br태그를 왜 안쓰냐면 반응형으로 만들었을때 자연스럽게 줄바꿈이 되어야하는데 br태그를 쓰면 딱 그자리에서 줄바꿈이 되기 때문이다. How people build software Millions of developers use GitHub to build personal projects, support their businesses, and work together on open source technologies. Use at least one letter, one numeral, and seven characters. Sign up for GitHub By..