잰니의 성장블로그✈

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. 태그이름을 수정할때..

데자뷰 느껴본 적 있어? 다시 글.쓰.기 아!!!!!!!!!!! 열심히 썼는데!!!!!!!!!!!!!!!!! 날라갔어!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 언제 다 쓰냐 (짲응) 대프리카 우와~ 오늘 날씨가 너무 죠챠냐!? 어제 술도 안 먹었겠다! 숙취 없는 일요일 오랜만이야 오픈런으로 달려간 동아식당 뭐야? 이게 줄이야???????????????? 오픈런 의미가 없는 것 같은................. 아 통수 뜨거워. 날 제대로 잡았네. 10 : 45 도착, 대기 28팀 11 : 30 테이블링 시작 13 : 45 입장 음식은 곧바로 나온 편이고, 블로그 후기나 영수증 후기에 안 좋다는 평이 많았지만 저는 환장하고 먹었어요 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 일단 웨이..

HAPPY EYES 세상에서 제일 즐거운 아이쇼핑 술집으로 향하던 도중 최대규모 리빙편집샵 빈손으로 들어가 양손으로 나온 그곳 와 술 진챠 많아!!!!!!!!!!!!!!!!!!!!!!!!! 귀엽고 아기자기한 리빙소품들!! 지름신 잠깐 왔는데 내쫓음..ㅎ 여기서 무슨 소주 2병 사고, 오미잔가, 복분자 소주 사서 숙소 가는 길~ 에 들린 스파크 랜드!!!!!!!!!!!!!!!!!! 대관람차는 굳이 타진 않고 사진만 찍었어용 실제로 보면 더 크고 반짝반짝 하니 예뻤어요 늙었나... 이젠 반짝 반짝이 이뿌넹;; 그리고 다시 숙소로 가는 길... 총총 뭔가 이상한데??? 물이 어디서 나오는 거야...?? 배수관이 없어...!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 원리를 아는 분은..

대구에만 있다는 어른용 놀이터에 방문했어요! (대구 동성로 아카데미극장 맞은편, 중앙로역 1번 출구 다이소 뒷건물 위치) 술 먹기 전 모든 체력을 소진시키고자 방문한 크레이지 팡팡 주말기준 웨이팅 없었고, 커플이 많았어요! 입장권(평일 3시간/주말 2시간) - 10,000원 초등학생(평일 3시간/주말 2시간) - 20,000원 중, 고등학생(평일 3시간/주말 2시간) - 22,000원 성인(평일 3시간/주말 2시간) - 25,000원 시간 초과시 10분당 - 1,000원 파티룸(1인당 평일 3시간/주말 2시간) - 5,000원 매표소에서 결제 OR 키오스크로 결제하고 들어가면 팔찌와 신발을 무료로 대여해 줌 개꿀~! 2층 대형트램폴린은 마지막에 가는 걸 추천, 3층은 파티룸이라서 PASS 4층은 XR존으..