AI 웹개발반/HTML & CSS11 [Vue] vue 기초2 및 alert 작성 공식문서 보며 익히기라 되어있지만 유튜브 보면서 약간의 독학, 팀원들의 코드보면서 하나씩 찾아보며 적당~히 이해한 다음 공식 문서를 보기 시작했다.. vue 공식문서는 한글화가 잘 되어있어서 읽고 적용해보기 정말 용이하다! 구글링해보면 원하는 정보가 다른 js 프레임워크에 비해 적은 편이지만 직관적으로 코드를 쓸 수 있고, 부드러운 사용성을 제공하는 점에서 앞으로 점점 쓰는 사람들이 많아지지 않을까! 팀 프로젝트에 조금이나마 도움이 되기 위해 차근차근 익혀나가고 있다 뷰 script의 기본 구성 ->JS니까 카멜 표기법을 기본으로 사용한다 (시작 소문자 나머지 대문자) 0) import import 문은 맨 위에 모아서 작성! import 할 모듈 혹은 {함수}, from 경로! router, api 파.. 2023. 6. 30. [vue.js] vue 기능 공부 및 약간의 적용 이해한 바를 간단히 적은 문서로 보다 정확한 정보는 공식문서 참고 바람 공식문서 : 무려 한글이 지원된다! https://v2.ko.vuejs.org/v2/guide ----- ----- ----- ----- ----- vue는 js기반의 프레임워크로, 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다 이동이나 화면 전환이 자연스럽고, Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때 자동으로 트랜지션 효과를 적용하는 전환 효과 시스템을 제공하여 유저에게 깔끔하고 자연스러운 사용 경험을 줄 수 있다. vue를 사용한 웹페이지로는 대표적으로 네이버vibe 웹페이지가 있다 다른 js 프레임워크에 비해 문법이나 사용법이 간단한 편이지만 공식문서에도 적혀있듯 html css에 대한 중급 이상의 이해도.. 2023. 6. 28. [CSS] display:none; 과 visibility:hidden; display: none; 공간을 차지하지 않고 해당 div내 모든 요소를 보이지 않게 설정한다 = 다른 html에 영향 없음. 빈 공간 없음 visibility: hidden; 공간을 차지하며, 해당 div내 모든 요소를 보이지 않게 설정한다. = 다른 html에 영향, 빈 공간이 보임 토글하여 나타내고 지울 때의 display: none; 과 visibility:hidden; 의 차이: visibility display: none;에는 부드럽게 내용을 띄울 수 있는 transition을 적용할 수 없다! display는 transition-property 값으로 사용할 수 없는 속성이기 때문 대신 display는 keyframes로 애니메이션을 적용할 수 있다. [참고]: https://velog.i.. 2023. 6. 26. [CSS] box-shadow box-shadow div에 그림자를 넣고싶을 때 사용하는 css .box { box-shadow: 0px 5px 10px 5px #454545; } 옵션을 5가지 넣어줄 수 있는데, 각각을 순서대로 1 2 3 4 5라고 하면 1 : 그림자가 오른쪽으로 얼마나 이동할 것인지 (- 값을 넣으면 왼쪽으로 이동한다) 2 : 그림자가 아래쪽으로 얼마나 이동할 것인지 (- 값을 넣으면 위쪽으로 이동한다) 3 : 그림자의 부드러운 정도 4 : 그림자의 확장량 5 : 그림자의 색상을 넣어줄 수있다. inset 옵션을 넣으면 박스 내부에 그림자를 만들어줄 수 있다 .box { box-shadow: inset 5px 5px 10px 5px #454545; } 명확하게 보이라고 3번째 옵션인 그림자 부드럽게 보이기를 0으.. 2023. 6. 22. 이전 1 2 3 다음
