본문 바로가기
728x90
반응형

HOME🏠310

[HTML]SASS 변수, Nesting, @Extend 문법사용하기 SASS 변수, Nesting, @Extend 문법사용하기 Nesting 문법 사용하기 .col-bg h1 { font-size: 16px; } .col-bg button { color: aquamarine; } 태그 안의 태그에 접근하기 위해서는 위와 같이 사용했는데 SASS를 사용하면 하나의 큰 태그 안에 여러 태그를 넣어서 사용 하는 방법을 nesting 문법이라고 한다. .col-bg { h1 { font-size: 16px; } button { color: aquamarine; } } @Extend 문법사용하기 .btn-aquamarine{ width: 100px; height: 100px; padding: 20px; color:aquamarine; } .btn-red{ width: 100px;.. 2023. 9. 5.
[HTML]SASS 셋팅하기 & 변수 값 지정하는 방법 SASS 셋팅하기 프로그래밍스러운 문법이 존재한다 개발환경 셋팅하기 VScode 설치하기 확장프로그램에서 Live Sass Complier를 설치해준다 ver 5 이상을 설치 해주어야 한다 Sass를 사용하기 위해서는 새로운 파일을 만들어서 뒤에 확장자 명을 .scss로 지정해주면 SASS 파일이 만들어 진다. .sass도 똑같이 SASS 파일이 생성되는데 둘의 차이점은 괄호를 쓰냐 안쓰냐의 차이이다 웹 브라우저는 SCSS 파일을 읽지 못하기 때문에 이 SCSS 파일을 CSS 파일로 변환을 시켜주어야한다 SCSS를 CSS로 보기 위해서 Live Sass Complier 기능을 사용해야한다 하단의 탭에 Watch Sass를 눌러주면 자동으로 두 개의 CSS 파일이 생성된 것을 확인 할 수 있다 .map 파.. 2023. 9. 5.
[내돈내산in경주] 황리단길 “청온채” 솔직 리뷰 및 후기 황리단길 “청온채” 솔직 리뷰 및 후기 경주에 당일치기로 놀러왔는데 옛날에 비해서 경주가 엄청 많이 발전 했다는 느낌이 들었다 당일치기 여행이라서 경주에 도착하자 마자 우리는 밥을 먹기 위해서 “청온채”라는 가게로 이동했다 황리단길에 많은 가게들이 있는데 여기로 점심을 정한 이유는 경주라서 그런지 한옥집으로 되어있고 점심에는 간단하게 먹고싶다는 생각을 해서 한식 비빔밥을 메뉴로 정하고 갔다 일단 외부 디자인은 깔끔하고 요즘 트랜드에 맞게 깔끔하고 잘되어있었다 황리단길이 생긴지 얼마안되서 그런가 인스타용으로 되어있는 가게 들이 많은거 같다 가게에 도착하자 마자 앞에 있는 기계에 웨이팅 예약을 해야했다 오픈하고 나닌까 엄청 빠르게 다 착석 했다 생각보다 가게 내부가 좁았고 알바생들이 딱 지나다닐 정도의 통로.. 2023. 8. 16.
[내돈내산in부산]경성대부경대 중식당 “이선생우육면” 솔직 후기 및 리뷰 경성대부경대 중식당 “이선생우육면” 솔직 후기 및 리뷰 이선생 우육면 가게를 알게 된 것은 경성대 근처에 자주 다니는 거리에서 심상치 않은 간판을 가진 가게를 보고 아니 여긴 무슨 가게길래 이름이 이선생이야?? 하면서 지나 갔었다 인상이 깊어서 사진도 찍었었음 ㅋㅋㅋㅋ 메뉴에 우육면이 적혀있어서 아 우육면 집이구나 해서 친구들이랑 다음에 날잡고 가보자 해서 미루다가 처음 갔을 때 아직 개업한지 얼마안되서 그런것도 있는거 같고 들어갔는데 손님이 우리 밖에없었다 ㅎㅎ; 일단은 메뉴를 봤는데 패드로 주문을 받고 메뉴가 엄청 다양했었다 우육면 말고도 중국에서 파는 메뉴가 전부다 있는 것 같았다 메뉴가 다양해서 일단 하나씩 먹어보자는 느낌으로 2명이서 메뉴 두개를 시켜서 나눠먹자가 됬다 시그니처라고 적혀있는 홍샤.. 2023. 8. 16.
[내돈내산in부산]경성대 부경대 치킨 맛집 “청도치킨” 리뷰 및 후기 경성대 부경대 치킨 맛집 “청도치킨” 리뷰 및 후기 이번에는 경성대 부경대 “청도치킨”이라는 치킨집을 리뷰 해보려고 합니다 경대에서 좀 걸어 다녀봤다 하면 지나가면서 한번씩은 본적있을 텐데요 요즘 경성대 라인이 많이 힘든데도 불구하고 오래동안 그자리에 위치하고 있길래 궁금해서 한번 찾아가봤습니다 사실 옛날에 대학교 다니면서 동아리 멤버들이랑 한번 갔었는데 여기 치킨이 진짜 옛날 치킨(?) 제가 치킨보다 피자파 이고 치킨도 브랜드 BHC,BBQ 이런 브랜드 보다 호프에서 파는 치킨 이런 치킨류를 더 좋아했어요 친구들이랑 치킨을 먹고싶은데 요즘 근처에서 그런 치킨을 파는 곳이 별로 없어서 고민하고있었는데 갑자기 여기 생각이 나서 친구들과 함께 가게 됬습니다 요즘 치킨 값이 엄청 올랐잖아요 그럼에도 불구하고 .. 2023. 8. 15.
[내돈내산in부산]광안리 멕시코 타코를 맛볼 수 있는 “엘까르니따스” 솔직후기 & 리뷰 광안리 멕시코 타코를 맛볼 수 있는 “엘까르니따스” 솔직후기 & 리뷰 안녕하세요! 오랜만에 음식점 리뷰로 돌아왔는데요 항산 내돈 내산이다 보닌까 사진을 찍어도 내부나 메뉴판을 따로 찍지 않아서 글을 쓰기 애매해지다 보니 ㅋㅋㅋ 미루고 미루다 휴일인 기념으로 올려봅니다 왠지 모르겠지만 부산에 살면서 광안리는 잘 안오게 되더라구요 사람도 많고.. 한번씩 바다가 보고 싶으면 광안리에 놀러오는 편이에요 제가 또 멕시코 음식이랑 일본, 중국 음식을 좀 좋아하는 편인데 점심시간이라서 간단하게 먹을 만한 음식을 찾다가 전에 엘까르니따스 음식에 아주 만족해서 기억에 남아 또 다시 온겁니다 ㅎㅎ [엘까르니따스] 건물의 외관은 이렇게 생겼습니다 광안리 바다가 바로 앞에있어서 2021년에 왔을때는 자리가 없어서 야외 테이블.. 2023. 8. 15.
유럽 인터파크 패키지 여행 관련 사항 보호되어 있는 글 입니다. 2023. 8. 14.
[WEB]Bootstrap 사용 해서 쉽고 빠르게 디자인 하기 Bootstrap 사용 해서 쉽고 빠르게 디자인 하기 Bootstrap은 HTML CSS 개발을 쉽고 빠르게 하기 위해서 사용한다 https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 사이트가 열리면 상단의 탭중에 Docs 탭을 선택해준다 사용하기 전에 우측 상단에 버전에 맞춰서 번경도 해준다 자신이 사용하고 있는 버전.. 2023. 8. 14.
[WEB]Font Awesome 라이브러리 사용하기 Font Awesome 라이브러리 사용하기 https://fontawesome.com/v5/docs/web/setup/host-font-awesome-yourself Host Font Awesome Yourself The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com Font Awesome을 사용하기 위해서 라이브러리를 설치를 해주어야한다 설치를 하거나 CDN 방식/ 직접 다운 하는 방법이 있다 CDN 방식으로 설치하기 CDN방식은 해당 사이트에 있는 CSS를 불러와서 사용하는 것이기 .. 2023. 8. 2.
[WEB]HTML 개발자 도구(디버깅) TIP HTML 개발자 도구(디버깅) TIP 자신이 만든 스타일이 이상 할 경우, 디자인이 적용이 되지 않을 경우, 버그를 찾아서 수정해야하는데 CSS 파일에서 일일이 하나씩 찾아서 확인하기 힘들기 때문에 "크롬 개발자 도구"를 사용해서 이 문제를 주로 해결한다. 확인하고 싶은 웹 사이트를 열어서 오른쪽 마우스 클릭을 하면 이렇게 나오는데 사이트 디버깅을 하기 위해서 [ 검사 ] 를 클릭하거나 윈도우: F12 /맥:Alt+커맨드+i 를 누르면 다음 사이트에 대한 개발자 도구창이 활성화된다 여기에서는 어떻게 작성되고 구현되어있는지 눈으로 쉽게 확인이 가능하게 되어있다. 여기서 이제 디버깅을 해야하는데 상단의 버튼을 클릭하고 원하는 요소를 클릭하면 다음 요소에 대한 HTML 정보 확인이 가능하다 그리고 그 아래에 .. 2023. 8. 2.
유럽 여행 지출 비용 보호되어 있는 글 입니다. 2023. 7. 25.
[UNITY]휠 콜라이더(Wheel Collider) 사용해서 차량 만들기(1) 휠 콜라이더(Wheel Collider) 사용해서 차량 만들기 최근에 카트를 만들어야하는 일이 생겨서 다양한 컨트롤 방법을 사용했으나 다음과 같이 키보드의 입력으로 Vector3(x값,0,y값) 왼쪽,오른쪽으로 이동하는 것까지는 괜찮으나 캐릭터가 90도 회전을 했을 때 x와 z의 축이 달라지면서 회전을 했을 경우에는 기존에 x값을 z에 넣어주어야지 정상적으로 움직임이 가능한 상황이 되어버렸다.. 그래서 다양한 방법을 사용 해 보아도 마음대로 잘되지 않았는데 친구가 Wheel Collider에 대해서 알려줬다 콜라이더를 사용하더라도 보통 box,capsul,spheer 콜라이더를 보통 사용하기 때문에 존재를 모르고있었다 그래서 이번에는 Wheel Collider를 사용해서 구현을 해보았다 휠 콜라이더(Wh.. 2023. 7. 25.
[UNITY]모바일 가상 조이스틱 구현하기(3) 모바일 가상 조이스틱 구현하기(3) [UNITY] 모바일 가상 조이스틱 구현하기(1) 모바일 가상 조이스틱 구현하기(1) 가상 조이스틱을 구현하기 위해서 젤 처음으로 UI를 디자인 해주었다 Joystick(하얀 동그라미) 이미지에 자식으로 Lever(파란색 동그라미) 로 구현하였다. 조이스 j2su0218.tistory.com [UNITY] 모바일 가상 조이스틱 구현하기(2) 모바일 가상 조이스틱 구현하기(2) [UNITY] 모바일 가상 조이스틱 구현하기(1) 모바일 가상 조이스틱 구현하기(1) 가상 조이스틱을 구현하기 위해서 젤 처음으로 UI를 디자인 해주었다 Joystick(하얀 j2su0218.tistory.com 앞에서 했던 모바일 가상 조이스틱을 이용해서 캐릭터를 움직이는 것을 적용해보려고 한다.. 2023. 7. 25.
[UNITY] 모바일 가상 조이스틱 구현하기(2) 모바일 가상 조이스틱 구현하기(2) [UNITY] 모바일 가상 조이스틱 구현하기(1) 모바일 가상 조이스틱 구현하기(1) 가상 조이스틱을 구현하기 위해서 젤 처음으로 UI를 디자인 해주었다 Joystick(하얀 동그라미) 이미지에 자식으로 Lever(파란색 동그라미) 로 구현하였다. 조이스 j2su0218.tistory.com 가상 조이스틱을 구현하기 2탄으로 1탄에서는 조이스틱과 레버를 이벤트 핸들러의 입력을 받아서 드래그 하는 곳으로 레버가 따라서 움직이도록 구현하였다. 이번에는 레버의 이동을 제한하는 것을 구현하려고 한다 Lever 이동 제한 Lever가 Joystick에서 벗어나지 않도록 하기 위해서는 Joystick의 중심에서 일정 범위 이상으로 넘어가지 않게 거리를 제한 해주어야 한다 나의 L.. 2023. 7. 20.
[UNITY] 모바일 가상 조이스틱 구현하기(1) 모바일 가상 조이스틱 구현하기(1) 가상 조이스틱을 구현하기 위해서 젤 처음으로 UI를 디자인 해주었다 Joystick(하얀 동그라미) 이미지에 자식으로 Lever(파란색 동그라미) 로 구현하였다. 조이스틱을 구현하기 위해서 나중에 Joystick의 RectTranform 과 Lever의 RectTransform의 위치를 계산하기 위해서 Joystick 게임 오브젝트의 Anchor Presets을 Letf bottom으로 설정해 주어야한다 드래그 기능 만들기 VirtualJoyStick 이라는 이름의 스크립트를 하나 만들어 준다 스크립트를 생성하고 파일을 열어보면 public class VirtualJoystick : MonoBehaviour { //기본적으로 MonoBehaviour 로 되어있다 } 드.. 2023. 7. 20.
[UNITY]뷰포리아(Vuforia) 이용해서 XR 만들기(2) [UNITY]뷰포리아(Vuforia) 이용해서 XR 만들기(1) 뷰포리아(Vuforia) 이용해서 XR 만들기(1) Vuforia SDK 설치하기 https://developer.vuforia.com/downloads/sdk?field-sdk-release-version-tid=58 SDK Download | Engine Developer Portal Use Vuforia Engine to build Augmented Reality Android, iOS, and j2su0218.tistory.com 첫 번째에서는 Sample을 뷰포리아에서 제공하는 Imge Target을 캠을 통해 뜨웠다면 이번에는 내가 원하는 이미지를 카메라에 인식 시켰을 때 원하는 모델링이 나올 수 있도록 구현 하려고한다. 아무것도.. 2023. 7. 18.
[UNITY]뷰포리아,No webcam profile has been found for your webcam 해결하기 뷰포리아,No webcam profile has been found for your webcam 해결하기 위에 이미지는 Type음 WebCam으로 해두었는데 컴퓨터와 WebCam이 연결되지 않아서 Camera Device 에서 No Camera라고 뜨고 있다 연결 해주었는데도 경고가 뜨는 경우가 있는데 Vuforia에서 지정해둔 이름을 가진 카메라를 사용하지 않아서 다음과 같이 경고가 나오는 것이다 현재 프로젝트 위치 \Library\PackageCache\com.ptc.vuforia.engine@88e4a5432e86\Vuforia\Editor\EditorResources 다음 위치에 보면 webcamprofiles.xml 라는 xml 파일이 있는데 열어서 확인하면 Vuforia에서 지정한 Camera.. 2023. 7. 18.
[UNITY]뷰포리아(Vuforia) 이용해서 XR 만들기(1) 뷰포리아(Vuforia) 이용해서 XR 만들기(1) Vuforia SDK 설치하기 https://developer.vuforia.com/downloads/sdk?field-sdk-release-version-tid=58 SDK Download | Engine Developer Portal Use Vuforia Engine to build Augmented Reality Android, iOS, and UWP applications for mobile devices and AR glasses. Apps can be built with Unity, Android Studio, Xcode, and Visual Studio. Vuforia Engine can be easily imported into Unity.. 2023. 7. 17.
[UNITY]Player Input System 으로 캐릭터 컨트롤 하기 Input System 설치하기 Window-Package Manager - Input System 을 검색해서 설치를 해준다. ProjectSetting - Player - Other Setting - Configuation 에서 어떤 Input System 을 사용할 지 선택이 가능하다 Old나 New 나 현재까지 유용하기 때문에 Both를 선택해서 사용할 것이다. Input Action Asset 을 사용해서 캐릭터 움직이게 하기 Input Action을 생성하기 위해서는 Project 에서 + 버튼을 누르면 다양한 생성 Asset들이 나온다 다양한 Asset들 중 최하단에 있는 Input Actions를 선택해서 InputActions을 하나 만들어준다. 생성한 Input Action을 더블 클릭.. 2023. 7. 16.
[배달의 밍족] 2023.07.16 작업 내역 보호되어 있는 글 입니다. 2023. 7. 16.
[깃허브 GitHub] ReadMe 마크 다운(Markdown) 문법 ReadMe 마크 다운(Markdown) 문법 깃허브에서는 README에 레포지토리에 대한 설명을 적는다. README는 확장자가 .md 형식으로 되어있다. HTML 태그로도 작성할 수 있으나 간단한 마크다운을 사용해서 작성을 할 수도 있다. 제목(Header) 텍스트 제목(Header) 은 텍스트 앞에 # 의 갯수(1~6까지)에 따라서 글자의 크기를 조절 할 수 있다 그리고 #과 텍스트 사이에는 반드시 여백이 있어야 적용이 된다. 제목 적용을 했는데 위처럼 텍스트의 색상이 변하지 않거나 마크다운이 적용이 되지 않는 경우, 위의 글과 간격을 주면 해결된다 텍스트 단락 줄 바꿈 HTML에서 단락을 나눠 주려면 2023. 7. 14.
[GitHub] Tistory에 소스코드 넣는 방법(Github Gist)사용하기 블로그에 소스코드 넣는 방법(Github Gist)사용하기 github gist는 짧은 코드, 메모 등을 기록 또는 공유 목적으로 사용할 수 있는 서비스이다. gist를 사용하기 위해서는 일단 Github로 들어가서 로그인을 해준다. https://github.com/ GitHub: Let’s build from here GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea... github.com https.. 2023. 7. 13.
[깃허브 GitHub] GitHub에 이미지 넣기 GitHub에 이미지 넣기 이력서 자료를 정리하다 보면서 해당 프로젝트에 대한 간단한 이미지나 정보를 보여주고 싶어서 ReadMe 안에다가 이미지를 넣어주려고한다. GitHub - Repository-Issues 들어가기 Repository 안에 들어가면 Code 카테고리가 기본적으로 선택이 되어있다. Issues 탭에서 New Issues 버튼을 눌러준다 요즘에는 편하게 메인화면 좌측 상단 탭에서 들어갈 수 있게 되었다. Write 박스안에 Github에서 사용할 이미지를 넣어주면 사진 정보에 대해서 Issues가 생성되는 것을 볼 수 있다. (이미지는 한장씩 넣어주는게 좋다.. 한곳에 여러개 넣으면 이미지가 제대로 생성 안되는 경우가 있음) Preview 탭을 누르면 내가 올린 이미지가 제대로 나오는.. 2023. 7. 13.
[배달의 밍족]2023.06.29 회의 보호되어 있는 글 입니다. 2023. 6. 30.
[UNITY]싱글톤 작성 패턴 방법 3가지 싱글톤 작성 패턴 방법 3가지 기본적으로 get,set 속성을 사용하는 것은 동일하다. private static Player instance; public static Player Instance { get { return instance; } set { instance = value; } } public static Player instanseField; public static Player GetInstanceField() { return instanseField; } public static void SetInstanceField(Player instanceField) { Player.instanseField = instanceField; } 복잡성을 최소화 하고 클린한 코드를 사용하기 위해서 다.. 2023. 6. 9.
[UNITY]TryGetComponet()와 GetComponet의 차이와 사용하는 방법 TryGetComponet()와 GetComponet의 차이와 사용하는 방법 TryGetComponet() TryGetComponet()함수는 Bool형의 함수로 해당 컴포넌트가 있을 경우, TRUE/FALSE 로 반환해주는 함수이다. 선언하는 방법은 다음과 같이 두가지 방법이 있다. public bool TryGetComponet(Type type, out 찾는컴포넌트 변수명); public bool TryGetComponet(out 찾는컴포넌트 변수명); if(raycastHit.transform.TryGetComponent(out ClearCount clearCount_Try)) { //Has clearcount TryGetComponent.Interact(); } *유니티 2019.2 버전부터 사.. 2023. 6. 8.
[ETC]VisualStudio 스크립트 내 변수명 한번에 변경하기 VisualStudio 스크립트 내 변수명 한번에 변경하기 유니티 작업을 하면서 변수명을 변경하고 싶은 경우, 변수를 바꾸면 모든 스크립트안에 오류가 뜨면서 하나하나 바꿔야하는 경우가 있었는데 어느 버전 부터 있는지 모르겠으나 Visual Studio 2022 버전에서는 이름 바꾸기 기능이 있다는 것을 알게되었다. 바꾸고싶은 변수를 선택하고 오른쪽 마우스를 클릭하면 다음과 같이 이름 바꾸기(영문: Rename..)라는 기능이 있다. 단축키는 Ctrl+R을 눌러주면 바꾸기 기능이 열린다 그럼 알아서 참조되는 변수를 찾아주고 원하는 이름을 작성하고 Enter를 눌러주면 참조되어 있는 모든 변수가 변경된다. 2023. 6. 7.
[UNITY]모델링 머티리얼 적용시, Alpha texture 적용하기 모델링 머티리얼 적용시, Alpha texture 적용하기 해당 글의 버전은 Unity 2021.3.9f1 에서 적용하였다. 다른 옛 버전에서는 Particle-Alpa blend 뭐시기 해서 들어가서 적용했는데 생긴건지 모르겠는데 제대로 적용하는 방법을 찾은거 같다. 모델링안에 텍스쳐를 적용 했을 때 왼쪽 처럼 Alpha 값이 적용되지 않고 텍스쳐 그대로 적용되는 경우가 있다. 다음 문제를 까먹지 않고 기억하려고 적어본다. 텍스처에 Alpha 값이 있는지 확인하기 일단 적용하기 위해서는 적용하려는 Texture에 Alpha 채널이 있어야한다. 없으면 포토샵을 사용해서 Alpha채널을 생성 해주어야한다. Standard 버전 생성한 Marterial 안에서 RenderingMode를 Cutout을 해주면.. 2023. 6. 5.
[UNITY]레이캐스트(Raycast)를 사용해서 충돌 처리하기 레이캐스트(Raycast)를 사용해서 충돌 처리하기 레이캐스트는 광선(Ray)을 쏘는 것을 의미하고 광선(Ray)에 부딪히는 오브젝트(Collider)가 있을 때, 이 오브젝트에 대한 거리, 위치 등의 정보를 반환 해준다. 레이캐스트를 사용하는 방법은 다양한데 원하는 속성을 매개변수에 맞게 넣어주면 된다. Physics.Raycast(Vector3 origin, Vector3 direction, out RaycastHit hitInfo , float maxDistance, int layerMask, QueryTriggerInteraction queryTriggerInteraction) Origin(시작점)에서 Direction 방향으로 레이(Ray)를 쏠때 오브젝트와 부딛혔을 경우, True를 반환하고 .. 2023. 6. 2.
[UNITY]Input System Refactor(리펙터링) - 구조 재조정 Input System Refactor(리펙터링) - 구조 재조정 깨끗한 코드를 만들기 위해서는 복잡성을 최소화하고 관리하는 것이 중요하다. 모든 클래스는 한가지만 수행해야하고 Player 클래스가 있을 경우 Player 만 처리해야한다. Refactor 는 결과의 변경 없이 코드의 구조를 재조정하는 것을 의미한다. 아래의 코드는 Input.GetKey()를 사용해서 A,D,S,W에 따라서 캐릭터가 움직이는 것을 레팩터링을해 가독성을 높이고 유지보수를 편하게 해줄 것이다. private void Update() { Vector2 inputVector = new Vector2(0,0); //왼쪽 if (Input.GetKey(KeyCode.A)) { inputVector.x = -1f; } //오른쪽 if.. 2023. 6. 1.
728x90
반응형

티스토리툴바