분류 전체보기106 [CSS] Transform(변환) 마스터하기 ◾ transform (이미지만 가능) → transition 으로 조절이 가능하다 ! → rotateX,Y,Z(??deg); // deg: 각도 transform: rotateX(120deg); → scaleX,Y,Z(?); transform: scale(2,2); → translate X,Y,Z(-1000px); // 지정하지 않은 텍스트는 이동하지 않음 // 사진을 좀 이동시키고 싶을 때 transform: translateX(350px); → 같이 사용 가능 transform: rotateZ(300deg) scale(2); img { color: black; background-color: red; text-decoration: none; padding: 5px 10px; height: 500px.. 2024. 4. 5. [CSS] Transitions(전환) 마스터하기 ◾ Transitions → 어떤 상태에서 다른 상태로 가는 변화를 애니메이션화 하는 것 → state 가 없는 요소에 붙어야함 → transition: background-color 10s ease-in-out → transition: all 3s ease-in-out // 일반적으로 all 을 많이 사용 linear → 무언가를 직선으로 움직이게 만들어줌 → 쭉 고정적인 속도 ease-in-out → 천천히 빠르게 천천히 2024. 4. 5. [CSS] color(:root) 마스터하기 Colorzilla : 구글 색 어플 rgb rgba (a = 투명도) ◾ :root → 기본적으로 모든 document의 뿌리가 됨 → 변수를 지정해 저장할 수 있음 // 여러 개 고칠 때 유용 :root{ --main-color: #A8D165; --border: 1px solid var(--main-color); } p:nth-child(3){ color: var(--main-color); } p:nth-child(4){ border: var(--border); } 2024. 4. 5. [CSS] state 마스터하기 ◾ state (상태) 1. active → 버튼을 누르고 있을 때 작동 button:active{ background-color: black; } 2. focus → 키보드로 선택되었을 때 작동 input[type="text"]:focus{ background-color: aquamarine; } 3. hover → 마우스가 대상 위에 있을 때 작동 button:hover{ background-color: black; } .4. visited → 링크를 타고 방문하면 작동 a:visited{ color: red; } 5. focus-within → focused인 자식을 가진 부모 엘리먼트에 적용 2024. 4. 5. [CSS] position 마스터하기 ◾ position 1. position: fiexd; → 스크롤을 내려도 그자리에 있음 → top, left, right, botton 프로퍼티 중 하나만 수정해도 겹쳐짐 // 더 이상 bolck , margin 신경쓰지 않게됨 2. position: static; → 레이아웃 박스를 처음 위치하는 곳에 둠 3. position: relative; → 엘리먼트가 처음 놓인 자리에서 조금씩만 상하좌우로 옮기고 싶을 때 → position: relative; top: -10px; left: -10px; 4. position: absolute; (사용하려면 부모 relative 사용하기) → 상하좌우로 옮기고 싶을 때 → body 맨 오른쪽, 아래 , 왼쪽으로 이동함 → 가장 가까운 relative 부모를 .. 2024. 4. 4. [CSS] grid 마스터 ◾ Grid → 열과 행을 모두 같은 수준으로 우리가 원하는 만큼 제어하고 커스터마이징할 수 있다. → 페이지의 전체 레이아웃을 구죽할 수 있음 → display: grid; → 부모에게 지정해야함 1. grid-template → gird-template-column: 100px 200px; // 가로 → gird-template-row: 200px 100px; // 세로 → gird-template-column: [one]100px [two]200px [three]; // 각 이름 부여가 가능하다. → gird-template-column: 1fr 1fr 1fr; // 하드 코딩이 아닌 1fr 로 지정할 수 있다 grid-template: "a a a a" 1fr "b b b d" 2fr "c c c.. 2024. 4. 4. [CSS] flex 마스터 ◾ flex 1. padding, margin → padding 을 기준으로 margin 을 나타낸다. 2. display → inline : width,height 프로터티 지원 x , 텍스트와 같다. 사용 시 없어짐 → block : width,height 프로터티 지원 o 사용이 가능하다. → inline-block : inline 에 width, height 프로터티 지원이 가능하게함 → flex 3. flex → 반드시 직속 부모에게 적용할 것 → 사용법 : display: flex → div, body, section 등 어떤 태그든 flex container 로 바꿔줌 → 안에서 요소들이 움직이는 방향을 바꾸는 프로퍼티를 기본적으로 가지고 있음 (flex-direction) flex 레이아웃.. 2024. 4. 3. [CSS] vite 설치 1. npm create vite@latest 2. project name: 이름 작성하기 3. 바닐라 자바스크립트 4. Javascript 5. 순서대로 터미널에서 작성 6. code . (비주얼 스튜디오로 접속) 2024. 4. 3. ㅂㅈㄷ using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class PlayerCS : MonoBehaviour { public GameObject Monster; public string PlayerName; // 플레이어 캐릭터의 이름 public int Current_HP; // 플레이어 캐릭터의 현재 체력 public int HP; // 플레이어 캐릭터의 체력 (총) public int attack; // 플레이어 공격력 public Text _Name; // 화면상에 나오는 캐릭터 이름 public Text _HP; // 화면상에 나오는 캐릭터의 체력 publi.. 2024. 4. 1. 이전 1 2 3 4 5 ··· 12 다음
