잰니의 성장블로그✈

메인 페이지 구조 만들기 index.html 나 95년생 재은쓰 내 안에 숨어있는 직업캐 찾기! 본캐 찾으러 GO! 주변에 알리기 home.css body{ background-color: #f6fcff; background-image: url("../images/main_bg.jpg"); background-position: top center; background-repeat: no-repeat; } .character { width: 100%; max-width: 364px; margin-left: auto; margin-right: auto; margin-bottom: 40px; } common.css - 여러 번 사용하는 코드들을 따로 만들기 - css 를 활용하여 애니메이션 효과주기 body ..

파비콘(favorite icon) 이란? 즐겨찾기(favorites)와 아이콘(icon)의 합성어 주소 창에 표시된 작은 아이콘. * png, jpg, gif 등의 이미지를 ico 확장자로 변환하여 사용 보통 루트경로에있는 ico 파일을 찾아서 가장 먼저 사용을 하게 되어있고, 가끔 아이콘을 찾아올 수 없는 경우가 있으니 png 파일을 준비해 link 코드를 활용하여 강제로 아이콘을 삽입. 내 안에 숨어있는 직업캐 찾기! Reset.css 브라우저의 기본 스타일을 초기화하는 법 웹 브라우저는 굉장히 다양해서 화면에 출력되는 글씨의 간격, 크기 등등이 다르게 출력된다. 각 브라우저가 제공하는 css 부분이 다를 수 있기때문에 이 부분들을 해결하기 위해 초기화를 시켜준다. https://www.jsdeliv..

1. 기본 구조 만들기 1 2 3 클릭하세요~ .btn { width: 150px; height: 40px; background-color: royalblue; border-radius: 10px; color: aliceblue; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0,5s; } .btn:hover { background-color: blue; } .btn span { font-size: 22px; font-weight: 700; } 2. Java Script 이용해서 제어하기 const itemEls = document.querySelectorAll('.item') const b..

■ 인수와 매개변수 - 함수 사용할 때마다 조금씩 다르게 동작 function hello(name) { const message = 'hello ' + name + '!' console.log(message) } hello('world') hello('Jaeeun') hello('Jen') ■ 함수 종료 - 원하는 부분에서 함수의 동작을 종료 function hello(name) { if(name.length > 5){ return } const message = 'hello ' + name + '!' console.log(message) } hello('world') hello('Jaeeun') hello('Swon')

■ const 변수 - 값(데이터)을 다시 할당할 수 없는 변수 (권장) const number = 123 console.log(number) //123 number = 456 // Error ! ■ let 변수 - 값(데이터)을 다시 할당할 수 있는 변수 (상황에 따라) // let 변수이름 = 데이터 let number = 123 console.log(number) // 123 number = 456 console.log(number) // 456 ■ 예약어 - 특별한 의미를 가지고 있어, 변수나 함수의 이름으로 사용 할 수 없음 //All Error! const let = 123 const const = 123 const function = 123 const if = 123 const new = 1..

■ 낙타 표기법(camelCase) camelCase helloWorld parkYoungWoong ■ 연산자 console.log(1+2) // 3 console.log(2-3) // -1 console.log(8*2) // 16 console.log(9/3) // 3 const 변수 = 85 // 할당 연산자 ■ 문자 데이터 const stringData = 'hello world' // 문자 데이터가 stringData에 할당이됨 ■ 숫자 데이터 const numberData = 1234 // 따옴표로 묶여있으면 문자데이터 ■ 불린 데이터(논리 데이터) const booleanData1 = true // (참) const booleanData2 = false // (거짓) ■ Null 데이터 (재사..

transform/ transition 속성 .container { height: 100px; border: 4px solid black; } .container .item{ width: 100px; height: 100px; background-color: rgb(247, 218, 165); transition: 1s; /* 1초 동안 변형되면서 애니메이션처럼 자연스럽게 변환 */ } .container .item:hover{ /* 커서를 가져다 놓으면 */ transform: rotate(45deg); /* 45도로 변환 */ background-color: orange; border-radius: 50%; }

디스플레이 속성(Display) 디스플레이 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다. 주로 웹 문서의 네비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치 할 수 있다. block 인라인 레벨 요소를 블록 레벨 요소로 만든다. inline 블록 레벨 요소를 인라인 레벨 요소로 만든다. inline-block 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다. none 해당 요소를 화면에 표시하지 않는다. flex 속성 .container { height: 200px; border: 4px solid black; display: flex; /*수평정렬*/ } justify-conte..

프론트엔드개발 : 사용자 브라우저에 출력되는 화면 웹 사이트 동작 원리 : 웹 브라우저(크롬,엣지) 서버, 데이터베이스 HTML, CSS JS 기술을 익혀 프론트엔드 개발 어떤 역할을 하는지 명확하게 이해하는 것이 목표!!!! 더보기 ■ HTML (Hyper Text Markup Language) 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 ■ CSS (Cascading Style Sheets) 실제 화면에 표시되는 방법(생상, 크기, 폰트, 레이아웃 등) 을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적) 을 담당 ■ JS(JavaScript) 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당 VSCODE 작업세팅 및 꿀팁 확장 프로그램 설치 1. 태그이름을 수정할때..

구글 드라이브 접속 -> + 새로만들기 -> 더보기 -> Google App Script page를 보여주는 html 파일을 불러오는 코드 function doGet() { return HtmlService.createHtmlOutputFromFile('index'); } 파일 추가를 해서 Html 파일을 생성한다. 새 배포 -> 웹 앱 -> 제목 지정하고 -> 배포하기 -> url 선택하면 아래와 같은 화면이 출력된다. 코드를 수정할때마다 실시간으로 업데이트가 되지않고, 방금전에 했던 작업을 반복해야하기때문에 번거로움이있다. 그래서 테스트 배포를 활용해서 진행해보기로 했다. 이렇게 하면 내가 저장하면 바뀌는 화면을 볼 수 있다. url을 창을 열어놓고 code.gs 에서 코드를 입력해준다. functi..