728x90 반응형 PROGRAMING📚229 [WEB]HTML태그, class 속성 - Space(공백)으로 여러클래스 만들기 Space(공백)으로 여러클래스 만들기 HTML을 사용하다보면 많은 클래스들을 만드는데 그럴때마다 클래스를 하나하나 만들어 줄 수도 있지만 class 속성안에서 space(공백)을 하나 띄워주는 방법으로도 또 다른 클래스를 만들어 줄 수 있다 An item A second item A third item A fourth item And a fifth one 예를 들어서 오른쪽 상단에있는 메뉴 버튼을 누르면 관련된 메뉴 리스트가 아래에 나오는 것을 구현하고 싶은데 .js를 사용해서 이것을 구현 해보려고 한다 Navbar An item A second item A third item A fourth item And a fifth one .list-group { width: 100%; display: none.. 2023. 9. 12. [WEB]JS, Funtion 만들기-동적 UI 만들기 JS, Funtion 만들기-동적 UI 만들기 동적 UI 란? 블로그가 있을 때 새로운 글을 올리기 위해서 추가 버튼을 눌러서 글을 작성하고완료버튼을 눌렀을 때 없었던 글 목록이 생기는 기능과 같다고 생각하면 된다 이미 만들어져 있는 것이 아닌 없었는데 동작을 통해서 새로 생기는 것을 동적생성 이라고도 부른다 추가 버튼을 누르면 메세지 박스가 생성되는 버튼을 js를 사용해서 만들기 위해서 다음과 같이 HTML/CSS 디자인을 먼저 해준다 더보기 hello! close 추가 body { margin: 10; } div { box-sizing: border-box; } .alert-box-bg { background-color: tan; padding: 20px; border-radius: 5px; disp.. 2023. 9. 11. WEB-참고 자료 모음 Web 온라인 참고 자료 사이트 https://www.w3schools.com/ W3Schools Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com https://www.w3schools.com/html/default.asp HTML Tutorial W3Schools offers free online tutorials, reference.. 2023. 9. 11. [WEB] Javascript를 이용해서 html 글 변경 및 폰트 사이즈 변경하기 Javascript를 이용해서 html 글 내용 변경하기 Javascript 를 사용하는 곳과 방법은 다양하다 html 조작, 서버와 통신 , 클릭-타이핑 감지 , 비동기 처리 , 자료 다루기 등이 가능하게 해준다 html에서 javascript를 사용하기 위해서 html 을 하나를 만들어 작성해준다 안녕하세요! document.getElementById()를 사용해서 아이디의 이름을 가져오는 셀렉터이고 innerHTML 속성은 HTML안에있는 id 값을 변경 해주는 코드이다 이렇게 자바스크립트를 작성하는 방법을 알고 Java Script를 사용해서 다양한 동작을 만들수 있다 폰트 사이즈 변경하는 방법 font size : 20px 안녕! 폰트의 사이즈를 변경하기 위해서는 다음과 같은 코드로 변경해주어야.. 2023. 9. 11. [WEB]HTML, @keyframes 로 animaiton 만들기 HTML, @keyframes 로 animaiton 만들기 @keyframes 애니메이션 명 { 0% { 애니메이션 시작 } 50% { 애니메이션 시작하고 50% } 100% {애니메이션 끝! } } @keyframes move_title { 0% { transform: translateX(0px); } 30% { transform: translateX(-50px); } 60% { transform: translateX(50px); } 100% { transform: translateX(0px); } } 0~100% 완료 될 때 까지의 동작을 수치 상으로 만들어 주면 된다 .menu-text-title:hover { animation-name: move_title; animation-duration: 2.. 2023. 9. 6. [WEB]HTML, transform사용하기 transform 사용하기 transform:roate(회전정도 값 deg) transform: rotate(180deg); transform: traslateX(이동 값) / traslateY(이동 값) / traslateZ(이동 값) transform: translateX(10px); transform: translateY(10px); transform: translateZ(10px); translate(X,Y,Z)를 하면 값이 동시에 적용되지 않는다 값을 동시에 적용받아 위치를 이동하고 싶은 경우에는 transform: translate3d(X이동값, Y 이동값, Z이동값) 을 사용해서 이동 시켜야한다 transform: translate3d(60px, 10px, 30px); transform: s.. 2023. 9. 6. [HTML]HTML 안에 Video, Audio 적용하는 방법 HTML, Video 적용하는 방법 html 파일을 하나 만들어주고 를 넣어준다 넣어주면 화면에 영상이 뜨는 것을 확인 할 수 있다 video만 작성하면 재생을 할 수가 없는데 재생을 하는 방법은 video 태그안에 속성 값을 넣어주어야한다 video 태그안에 속성 값 controls 재생 바를 보여줌 autoplay 자동으로 재생 - 재생이 안되는 경우 뒤에 muted를 넣어준다 loop 영상을 반복 재생 poster="경로" 시작전 썸네일 이미지를 지정해준다 preload="auto" 페이지가 로드 될 때, 전체 파일을 같이 로드 해줌 preload="metadata" 페이지가 로드 될 때, 파일의 메타데이터만 로드 해줌 preload="none" 페이지가 로드 될 때, 파일을 불러오지 않는다 (미리.. 2023. 9. 6. [HTML]SASS, @use 문법 SASS, @use 문법 CSS를 사용하다 보면 계속 사용하는 파일들을 복사 붙여넣기 하기 귀찮을 때,다른 파일에 있는 내용을 가져오고 싶을 때사용하는 방법 새로운 .scss 파일을 하나 만들어준다 그리고 파일 안에 기본적으로 적용할 파일들을 넣어준다 작성해준 파일을 불러오는 방법은 @use'파일경로' 의 형태로 작성을 해준다 CSS 파일을 확인하면 상단에 'defalut'에 작성한 내용이 들어가 있는 것을 확인 할 수 있다 @minxin. $변수도 가져와서 재활용 할 수 있다 다른 파일 안에 있는 @mixin 을 사용하기 위해서는 @include mixin이름 앞에 파일명을 적어주면된다 2023. 9. 6. [HTML]Sass, @Mixin 사용하기 @Mixin()사용하기 @Mixin은 함수와 같은 기능을 한다 사용 하는 방법은 @expend와 비슷하지만 %임시변수가 아닌 @mixin font_void() { width: 200px; height: 200px; padding: 20px; } .box-green { @include box_size(); } .box-blue { @include box_size(); } .box-red { @include box_size(); } @mixin 함수명(){} 함수를 불러오는 방법은 @include 함수명(); 을 사용해서 불러온다 위와 같이 코드를 작성하면 @expend를 사용하는 것과 같은데 @mixin() 을 사용하면 코드를 가변적으로 만들수 있다 박스의 크기가 동일하게 나와버린다 각각의 사이즈를 다르게.. 2023. 9. 5. [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. [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. [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. [깃허브 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. [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. [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. 이전 1 2 3 4 5 6 ··· 8 다음 728x90 반응형
