728x90 > 프로그래밍 언어104 자바스크립트 배열의 slice()와 splice() 함수 자바스크립트 배열의 slice()와 splice() 함수 | 달레의 웹 프로그래밍 - YouTube참고할 글자바스크립트 배열의 slice()와 splice() 함수 | Engineering Blog by Dale Seo 자바스크립트 배열의 slice()와 splice() 함수Engineering Blog by Dale Seowww.daleseo.comslice() 함수어떤 배열의 특정 범위를 새로운 배열로 복사.= 부분 배열 만들어 주는 함수. 첫 번째 인자 = 시작 인덱스두 번째 인자 = 종료 인덱스. 시작 인덱스부터 종료 인덱스 까지의 값을 복사해서 반환한다.배열 확인 nums.slice() 함수5부터 9까지의 복사한 값을 갖고있는 새로운 배열 만들어보기.= nums.slice() 함수 사용2 개의 .. 2024. 9. 25. css : keyframes 남들과 다른 웹사이트 만들기 첫번째 웹사이트에 애니메이션 효과를 어떻게 줄까? | css : keyframes 남들과 다른 웹사이트 만들기 첫번째 (youtube.com) 전체를 의미하는 섹션 하나 추가해주기.우선 전체 섹션에다가 색깔(이미지) 입혀줌백그라운드 이미지의 url 을 들고오게끔 함. 그냥 이미지와 달리background 이미지는안에 내용이 있어야 보여진다. 인위적으로 높이를 줘서 섹션이 보이도록 하기 그러면 배경화면 이미지가 보이게 된다.근데 틈이 있어서 살짝 거슬림= body 태그의 기본 스타일 때문.- 이걸 지워주면 된다.이미지 하나만으로 스크롤이 안되기 때문에 body 자체 사이즈를 늘려줌.배경화면 이미지를 가만히 있게 만들고 싶은 경우,fixed 스타일을 뒤에다가 주면 된다.= 이미지 고정시키기. - 스크롤 안 따라감... 2024. 6. 30. [CSS] Transform&Transition 2탄 CSS 강의 Ep11_2 - Transform&Transition 2탄 | Transition | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요? (youtube.com)transition에 대해 살펴보기전환이라는 의미. 가로 세로 200px인 div 태그마우스가 hover 됐을 때 가로세로 200px 을 가로세로 400px 로 변경하고 싶은 경우, transition을 사용하면 스무스하게 변형이 가능해진다.사용하는 방법 - transition 속성 이용하기transition-property= 속성 설정 transition이 실행될 때 타이밍 나타내기 단축 속성 사용하기transition 실습하기 box1에 마우스를 올렸을 때 사이즈를 200px 로 하기.transition을 적용할 경우bo.. 2024. 6. 29. [CSS] Transform&Transition 1탄 CSS 강의 Ep11_1 - Transform&Transition 1탄 | Transform | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요? (youtube.com)Tansformtransform 사용 방법X 축으로 div 태그 20px 이동. 특수한 함수를 통해서 다양한 효과 나타낼 수 있음.다양한 효과 skew 함수 = 지정한 각도만큼 왜곡.실습 예시기본 세팅.- 박스 지정스타일링.translate 실습X 축으로 20px 이동한 거 확인 가능.좌측으로 이동하고 싶은 경우 음수 - 를 붙여서 적용시켜주면 됨.이렇게 넣어주면 한 꺼번에 X 좌표, Y 좌표 이동을 할 수 있다.scale 실습scale 안에는 숫자를 넣어주면 됨.2를 넣어줬을 경우,가로가 2 배가 된다.한 50% 줄이고 싶은 .. 2024. 6. 29. VW단위를 사용해 보았습니다. CSS VW단위를 사용해 보았습니다. (youtube.com)줄이면서 같이 줄어드는거= 일반 rem 보다 쓸만하다. 이미지 같은건 % 넣으면 줄어들지만텍스트는 그렇지 않음. 텍스트까지 같이 줄어들게 하려면 vw 로 제작하기. rem 으로 작업하기. vw 로 제작하면이미지도 커지고 텍스트도 커짐. vw 공식: 현재 해상도 ( 기준 해상도 ) 1920 을 기준으로 작업을 할 것. ( 그때 그때 달라짐 ) 100vw 는 사용자 기기의 가로크기 만큼.with 의 100%와 같은 의미이렇게 계산. 나누기 1920 도 해야함. 반응형할 때미디어쿼리 자체가 필요 없게 된다. vw 를 사용하게 되면그래서 주석처리함.단점: 특정 구간에서 너무 작아보이고,특정 구간에서 너무 커보인다. 그래서 그 때는 따로 미디어 쿼.. 2024. 6. 15. 입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky 입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky (youtube.com) fixed예제포지션 fixed 부여 나머지 속성도 부여해줌.왼쪽과 위쪽에서 50px 떨어져 있는 것 확인 가능.stickysticky 적용sticky 는 일반적인 문서 흐름에 따라 배치함.저 위치가 자기 자리인 것.스크롤 되는 상위 요소에 대해서 오프셋을 적용근데 적용 안한 것처럼 보여짐.- 스크롤 이동이 이뤄질 때 그 속성을 발휘. 세부사항 top 수정문서 배치에는 정상적으로 위치해있는 걸 확인 가능스크롤 이동이 되다가 박스가 위에 붙어짐.top:0그리고 스크롤 내려도 고정이 됨.다시 스크롤 내리지말고 올라가게되면원래 문서 흐름대로 그 위치로 다시 되돌아감. 속성을 바꿔봄.bottom : 0스.. 2024. 5. 13. CSS 변수 사용법 5가지 중 1편 - root CSS3 - 104 [ css variables ] CSS 변수 사용법 5가지 중 1편 - 기본사용법 (youtube.com)기본 사용법동일 색깔동일 radius아이콘 색상 겹침 많음변수 안쓴 상태변수 써주기최상위에 변수 생성하기루트 선택자 사용파란색 = primary color = 변수 명색 지정해당 색상 필요한 곳에 변수명 사용한꺼번에 색 바꾸기 가능radius 도 지정변수명 만드는 규칙반드시 하이픈 2개로 시작ie 에서 먹통- 어차피 지원종료 2024. 5. 9. CSS에서 display: grid 의 사용법 CSS Grid 완전 정리 끝판왕 😎 (youtube.com)flex / grid아이템을 자유자재로 배치.flex - 아이템들을 1차원 적으로 배치.grid - 2차원 적 배치.물론 wrap 을 사용하면 flex 에서도 줄바꿈 가능.grid grid 도 flex 처럼 부모 Container에 grid 라고 지정해줘야 한다.이렇게 지정해주면 자식 요소들은 grid cell 로 변하게 됨.부모 Container 인 Grid 에 지정해 줄 수 있는 속성grid-template-columns가로 축으로 총 몇 개의 column 이 들어갈 수 있는 지,각각 column의 사이즈는 얼마인 지 지정해줄 수 있음.grid-template-rows세로로 몇 개의 row 가 있는 지, 사이즈가 어떻게 되는 지 지정해줄 .. 2024. 5. 8. CSS Flexbox 완전 정리 CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript (youtube.com)float텍스트와 이미지 배치Flex박스(콘테이너) 에 적용되는 속성아이템들에 적용되는 속성 존재박스 적용 속성아이템 적용 속성Flex 박스에는 중심축과 반대축 존재 왼쪽에서 오른쪽으로 정렬되는 거 확인수평축 - 메인축(중심축)수직축 - 반대축수직축 - 메인축수평 - 반대축실습하기JS Bin - Collaborative JavaScript Debugging JS BinSample of the bin:jsbin.comitem 마다 고유의 번호를 의미 = item$$ = 지정번호*10 = 10번 반복하기Container(박스) 에 속성 부여display: .. 2024. 5. 6. 이전 1 2 3 4 ··· 12 다음 728x90
