반응형

전체 글 39

일본 긴자 핫스팟 고퀄맥주 맛집 삿포로 생맥주 블랙라벨 THE BAR

저는 술을 마시는 사람은 아닙니다만. “퇴근하면 긴자 같이 갈래?” 라고 남편이 데이트 신청을 합니다. 저는 몰랐는데요, 맥주 러버들은 다 안다는 삿포로생맥주 블랙라벨 더 바 방문기를 올려봅니다. 남편을 따라 종종걸음으로 갔더랬습니다. 삿포로생맥주 블랙라벨 더 바 소개 남편이 데이트 신청을 합니다. 🔻구글맵 위치공유🔻 삿포로생맥주 블랙라벨 더 바 · 4.5★(520) · 맥주 전문점일본 〒104-0061 Tokyo, Chuo City, Ginza, 5 Chome−8−1 GINZA PLACE B1Fwww.google.com 🔻영업시간🔻 평일 14시-22시 토11시반-22시 일11시반-21시 가끔은 이런 이벤트로 신나는 퇴근길을 만들어 봅니다. 히가시긴자역으로 가면 바로 저 건물 엘레베이터를 타고 지하1층에..

일본 일상 2024.06.26

일본 요코하마 전망 맛집 추천 디저트 가게 AUX BACCHANALES CAFE

AUX BACCHANALES CAFE 전망을 보면서 디저트를 즐길 수 있습니다.지유(GU)/유니클로/무지양품등 쇼핑을 하다가 들를 수 있습니다. 요코하마의 경치를 즐기면서, 비싼 디저트를 즐길 수 있는 카페입니다. 프렌치 스타일로 된 공간과 프랑스 메뉴를 가족과 연인끼리 즐겨보세요.가게이름은 프랑스어인데, 일본어로 "카페 오바카나루"라고 읽습니다. 이름부터 어렵지만, 그만큼 프랑스의 분위기를 그대로 가져오겠다는 콘셉트를 가진 가게입니다. 분위기와 메뉴도 그렇지만 점원분들도 상당히 일본인치고는(?) 프렌들리하다...라는 느낌을 받을 수 있습니다. 교양있는 척(?)하면서 데이트를 즐기기에는 딱 안성맞춤이네요. 난 B급인데 A급이 된 거 같다. 이런 느낌을 받을 수 있습니다. 가격은 아래 사진을 참조하시면 됩..

일본 일상 2024.06.26

일본 유니버셜스튜디오재팬 한국어판으로 어플 다운로드

이번에는 유니버셜 스튜디오 재팬 어플에 입장권 등록하기를 알아보겠습니다.종이를 인쇄해서 들고 다니시는 분들,입장할 때 만큼은 간지나게 입장을 해야하잖아여>0인쇄 할 걱정없이 큐알코드로 입장하기!! 간단하게 해결하자구요. 최근에 다녀왔는데, 이제는 종이로 된 지도를 제공하지 않는다고 해요.결국 다운로드 받는 것이 USJ에서 뽕을 뽑는 지름길이라는 것!!! USJ어플 다운로드 받기한국어로 즐겨요. 유니버셜스튜디오. 언제나 공식사이트를 방문해서 정보를 얻는 것이 중요한데요,무려 한국어 전용으로 있습니다요!!아래의 링크로 가면 유니버셜 스타지오 재팬 어플을 다운로드 받을 수 있어요.안드로이드, 아이폰 대응 둘다 가능합니다.  ユニバーサル・スタジオ・ジャパン|USJ異なる表情を持つさまざまなエリアは、感動がいっぱいの別世..

일본 일상 2024.06.26

일본여행 가성비 최고 300엔샵 쇼핑 추천리스트 100엔샵으로 만족 할 수 없을 때

오늘은 300엔샵 3coins(쓰리코인즈)를 소개합니다.300엔 상품의 쇼핑천국.다이소 100엔샵이 일본에서 대히트를 쳤지만, 질이 나빠서, 혹은 금방 닳아서등등 사고나서 후회하는 경우가 많았고요, 그런 점에서 퀄리티면을 보완하겠다라는 모티브를 가진 300엔샵입니다^ㅇ^. 주의 할 점은 100엔샾보다 더 나은 퀄리티를 내야하기 때문에 300엔보다 값이 더 할 수도 있지만, 대체적으로 1500엔선입니다.(어쨌거나 500엔 3개니까 쓰리코인즈 맞네요.)각종 상품들은 납득 가능한 선인 듯 합니다.  일단 제 생각에 확실하게 100엔샵보다 나은 점은1. 디자인2. 여성을 타겟으로 한 미용용품 3. 육아아동용품을 싸게 구입 할 수 있다. 이 점을 보면 여성을 타겟으로 한 퀄리티를 UP한 상품들이 많은 것 같습니다..

일본 일상 2024.06.26

Ch 3. JS 함수-04.호이스팅

#호이스팅(hoisiting) 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 함수 선언부가 유효범위라는 거 우리가 예전에 배웠죠? 영어로는 스콥이라고 하고요. 그래서 그 유효범위 최상단으로 끌어올려지는 현상을 얘기한데요. 이것이 무엇인지 아래쪽에 코드를 통해서 살펴볼건데요. #실습준비 const a = 7 const double = function () { console.log( a * 2 ) } double() double이라는 변수에 익명함수가 할당되었습니다. 함수표현이 완성되었습니다. 그리고 double이라는 함수가 호출되고 있습니다. 14가 출력되었습니다. #호이스팅 개념 const a = 7 double() const double = function () { console.log( a * ..

Ch 3. JS 함수-03.IIFE(즉시실행함수)

[목차] #IIFE(즉시실행함수) 의미 #실습준비, 즉시실행함수를 쓰는 목적설명 #이럴 때 즉시실행함수 사용법 첫번째 #즉시실행함수와 세미콜론 #즉시실행함수 사용법 두번째 #IIFE(즉시실행함수) 의미 말 그대로 어떤 특정한 함수를 즉시 실행 해 버릴 수가 있겠구요. Immediately-Invoked Function Expression #실습준비, 즉시실행함수를 쓰는 목적설명 a라는 변수가 선언이 되었고요, 숫자 7을 할당해서 담았습니다. 그리고 double()이라는 함수를 만들어서 그 내부에서 console.log로 a * 2를 출력합니다. 그 함수 자체를 아래쪽에서 이렇게 double()이라는 이름으로 실행해서 로직이 구성되었습니다. const a = 7 function double() { cons..

Ch 2. JS 시작하기-07.조건문 Switch

#조건문 Switch switch (a) { case 0: console.log('a is 0') break case 2: console.log('a is 2') break case 4: console.log('a is 4') break default: console.log('rest...') } switch문에는 a라는 변수만 집어 넣어줍니다. 그 a라는 변수가 상황에 따라서 어떠한 값인지를 우리는 case라는 키워드를 통해서 명시 할 수 있어요, case 0: (a라는 조건이 숫자데이터 0인 경우에 해당하는 내용을 작성할 수 있고요.) console.log('a is 0') (a가 0인 경우에 'a is 0'를 출력하고요.) 그리고 하나의 케이스의 내용이 끝나면 그것이 끝났다는 표시로 break 키워..

Ch 2. JS 시작하기-06.조건문 IF Else

#실습준비 *getRandom.js 파일을 새로 만듭니다. 코딩을 합니다. export default function random() { return }; #Math.floor(Math.random() * 10) ( return할 값은 개발자도구의 콘솔창에서 직접적으로 코딩을 해 볼게요. ) #Math.random() 대문자로 시작하는Math라는 수학객체가 하나 있습니다. 메소드로 random()을 실행해줄 수 있습니다. 여기다가 곱하기 10을 하면 Math.random() * 10 정수부분에도 숫자가 잘 나오게 되는데요. #소수점 부분 숫자는 버려주는 Math.floor(Math.random() * 10) Math 객체의 내림처리를 해주는 메소드 floor 를 사용합니다. #.getRandom.js파일..

Ch 2. JS 시작하기-05.삼항 연산자

#삼항연산자(ternary operator) if의 첫번째 블럭이 실행되어서 true가 나왔습니다. 우리는 어떤 특정한 조건이 참인지 거짓인지 확인을 해서 그것을 조건을 가지고서 어떤 코드를 실행 할 수 있는데요, 그것을 조건을 가지고서 어떤 코드내용을 실행하면 5줄정도 사용하죠. 위 조건문의 코드를 삼항 연산자로 더 간단하게 만들 수 있습니다. console.log(a ? '참' : '거짓'); a ? '참' : '거짓' 말 그대로 3개의 항이 있는 거고요. if else 조건문이 훨씬 더 직관적으로 보일 수도 있겠지만, 비교적 단순한 조건 같은 경우에는 이렇게 3항의 연산자를 통해서 우리가 조건을 만들어낼 수가 있겠습니다. **의미해석** a ?는 물음표를 기준으로 그 앞의 값을 확인해야합니다. a가..

Ch 2. JS 시작하기-01.개요(ECMA Script) 및 프로젝트 초기화

#ECMA Script(에크마 스크립트) ES라고도 부른다. 유럽컴퓨터제조협회의 약어. 자바스크립트를 표준화 해 주는 국제 표준화 기구. ES6 나 ES2015는 버전이라고 생각하시면 됩니다. #1997년 이래로 계속 버전이 추가되고 있다. ES6 ES2015때 크게 바뀌게 되었다. JS5.1(2011)과 ES6(2015)버전 사이에 있는 차이점을 주목해야한다. 그 전후로 구버전 신버전을 구분한다. 이 때 크게 바뀌었다. JS를 개발할 때 어떤 버전인지 확인한다. #. 바벨이라는 플러그인 바벨이라는 플러그인 바벨이라는 플러그인의 도움을 받아서, 6버전 이후의 최신버전의 기술들을 구형브라우저에서도 동작할 수 있는 5버전 때의 자바스크립트의 문법으로도 변환시켜줄 수가 있겠고, 우리는 최신 기술로 작성을 하고..

Ch 1. Node.js -04.NPM 개요(2)

#. npm init -y 로 {} package.json 파일이 생성 test 폴더를 만들어서, 터미널을 열어주세요. nodejs를설치했으면 npm도 설치됩니다. npm init -y를 입력하면 ( npm init 를 입력하고 -y 플래그를 입력합니다. ) 그러면 옆에 {} package.json 파일이 생성되는 것을 볼 수 있습니다. 안 나오면 새로고침 누르세여. # {} package.json 파일 상세보기 name: test ,폴더명이고요. 다른이름으로 바꿔도 사용해도됩니다. version: 1.0.0 ,프로젝트 버전도 나오고요 description: "" 프로젝트에 대한 설명 main: index.js 우리도 직접 패키지를 만들어서 사용할 수 있는데요, 현재의 프로젝트를 하나의 패키지처럼 만들어..

11.헤더와 드롭다운 메뉴-전역 배지(GSAP)(1)

#학습목표 스타벅스 뱃지 만들기 먼저 html코드를 작성 해 줍니다. html코딩은 아주 간단합니다. 그리고 기본적인 css코딩을 짭니다. #body선택자에 height에 3000픽셀로 높이값을 넣어줍니다. #header 부분에 position 값을 넣을건데, 잠깐 relative를 주석 처리하고 fixed로 값을 넣어줍니다. 그리고 top을 기준으로 작성 해 주고요. 뷰포트를 기준으로 배치되는 것이기 때문에, 헤더라는 요소의 가로너비는 auto고, 이 auto를 통해서 브라우저가 자동으로 계산하면서 요소의 너비를 최대한으로 많이 사용하려고 하지 못하고, 저 이미지처럼 가로너비를 최소한으로 사용하려고 시도를 해요. 우리가 알고 있는 최대한이 아니고, 최소한으로 개념이 바뀌는 겁니다. 이;러한 현상은 포지..

06. 헤더와 드롭다운 메뉴 - 서브 메뉴(feat. Sign in 할 수 있는페이지와 '<a href="javascript:void(0)">')

#학습목표 서브메뉴의 4개의 항목을 만들어서 링크를 걸어둡니다. 4개의 항목사이에 3개의 수직바를 넣어줍니다. 돋보기모양의 아이콘을 넣고, 돋보기 모양을 클릭하면, 검색창이 뜨는 효과를 넣어줍니다. 초록색 테두리를 넣어줍니다. 또 placeholder를 넣어줍니다. #실제로 완성한 이미지 HTML 작성 코드 태그를 작성. 태그를 작성. (ul태그는 li태그랑 세트로 기억하세요.) 태그 4개 작성 Sign in이라는 특정한 페이지로 가게 만들겠다, 라고 선언하는 것. 아직 페이지가 준비가 되지 않았다면, 입력 해 둘수 있는 코드. 자바스크립트로 어떤 동작을 넣을건데 그 동작이 '0', 즉 '없다'라는 뜻. *또는 '#(헤쉬)'도 넣어도 된다. '#'는 몇가지 쓰임이 있지만, 그중 CSS ID 선택자를 이용..

05. 헤더와 드롭다운 메뉴 - 로고(feat. css의 로고 부분, inner는 왜 생략 했을까)

# header태그 html에서는 기본적인 태그들은 이미 핵심요소로 만들어져 있다. 예를들면 header태그! 엄연히 html에 존재하는 태그이고요, 일단 특별한 기능은 없어요. (단순하게 이 부분이 사이트의 헤더영역이다라는 기본적인 의미만 가지고 있다고 보시면 되어요.) 우리가 대표적으로 div 태그를 이용해서 어떤 구조들을 만들고 화면에 출력을 할 수가 있겠는데, 그러면 그렇게 만들어진 구조가 어떤 역할을 하는지 알기가 쉽지않거든요. 그래서 사실 많은 경우에 이렇게 클래스를 부여해서 대표적으로 헤더라는 이러한 이름들을 부여함으로 해서 우리는 그 요소에 어떤 의미를 부여하게 되는데요. 이 html은 기본적으로 그러한 의미를 가지는 몇가지 태그가 있고요, 헤더태그가 그런 것 중 하나입니다. #header..

04. 시작하기 - Google Material Icons(feat. 직접 테스트 해 봐야함.)

#. 모든 것들이 완벽한 디자인 시안은 나오지 않을 수 있다. 기본적인 디자인을 요청하는 것도 번거롭다. #.Google Material Icons 구글에서 제공하는 머터리얼 아이콘을 무료로 사용할 수 있습니다. 아래 링크태그를 통해서 구글 머터리얼 아이콘의 연결 주소가 있는데, html에 붙여넣기를 합니다. Head태그에는 링크태그를, Body태그에는 div 태그를 붙여넣기. (아래 링크는 강사님의 깃허브에서 가져 올 수 있음.) #.우리가 적용한 링크태그보다 Google Material Icons은 최신버전으로 올라오는데요. 그래도 아이콘의 이름은 그래도 활용 할 수 있거든요. 클래스 이름이 버전이 다르기 때문에 소스코드가 다른건데요, 그안에서 사용하는 아이콘의 이름은 같아요(예를들면 search라던..

03. 시작하기 -google fonts 글꼴지정

#기본적으로 지정없이 글꼴을 정해두지 않으면 브라우저마다 다른 글꼴이 나오기 때문에 코드작성을 해 두는 것이 좋다. #google Font에서 글꼴 가져오기(무료인지 확인) 보통은 글꼴을 지정할 때 링크방식을 사용하니까 링크를 선택 해 줍니다. (@import는 직렬방식 link방식은 병렬방식) #html로 가져오기 #css도 가져오기 이거도 복사해서 가져오세요. #개발자 도구에서 폰트가 잘 적용이 되었는지 확인하기 개발자도구의 Computed로 들어가서 적용이 잘 되었는지 확인하세용! font-family를 체크.

02. 시작하기 - 오픈그래프와 트위터 카드

#오픈그래프 웹페이지가 소셜 미디어, 페이스북등, 으로 공유 될 때 우선적으로 활용되는 정보를 지정합니다. #웹페이지가 공유된다라는 의미 카카오톡으로 링크를 공유할 때 이 오픈 그래프가 사용됩니다. 대표적으로 카카오톡 같은경우는, 이렇게 주소를 메세지로 입력을 해서 전송을 하게되면 카카오톡 내부에서 페이지에 접속을 해서 사용자들이 볼 수 있는 최소한의 메타 정보만 끌어다가, 이렇게 사이트 이름은 무엇인지 기본적인 설명은 무엇인지 그 다음에 로고 같은 것들은 무엇인지 이렇게 표시를 할 수 있는 기능이 들어 있어요. 카카오톡이 해당하는 페이지에 접근을 해서 모든 내용을 다 확인하는 것이 아니고, 딱 중요한 정보만 빠르게 가져가는 것이기 떄문에 우리는 그렇게 중요한 정보들을 우선적으로 제공할 수 있도록 오픈그..

01. 시작하기 - 프로젝트 시작, 스타일 초기화, 파비콘

#favicon.ico #Title 부분에 로고 이미지 넣기 @vscode 아이콘을 삽입하는 코드는 전혀 보이지 않지만, 타이틀에서 아이콘 이미지가 보이는 이유는, 대부분의 브라우저는 favicon.ico파일이 있으면, 그 파일을 자동으로 찾아다가 그 해당하는 페이지의 탭에 아이콘으로 사용합니다. 딱 저 이름 그대로 사용하세요. 만약 해상도가 떨어져서 png파일로 쓰고 싶다면 Head태그에 으로 아이콘을 명시 할 수 있다.

Github와Git에 대하여

#1.GIT이란 무엇인가? 깃(git)은 2005년에 리누스 토르발스에 의해 개발된 "분산 버전관리 시스템(Distributed Version Control Systm-DVCS)"으로, 컴퓨터 파일의 변경사항을 추적하고 여러명의 사용자들 간에 파일에 대한 작업을 조율하는데 사용된다. (참고:https://git-scm.com/book/ko/v2 Git공식 사이트 한글 메뉴얼) 즉,주로 여러명의 개발자가 하나의 소프트웨어 개발 프로젝트에 참여 할 때, 소스코드를 관리하는데 주로 사용된다. #2.버전관리는 왜 필요한가? 쉬운 이해를 위해 'PPT로 발표자료를 만든다'는 하나의 가정을 들어보자. 처음에 '발표.ppt'라는 제목의 파일을 만들었다가, 내용이 바뀔경우 '발표 최종.ppt'파일로 바꾸고, 수정에 수..

기타학습자료 2023.09.22
반응형