vue.js 기초- 인스타그램 만들어보기 04 (코딩애플 세미나 후기)
*이미지 출처는 https://pixabay.com/ 이고, 무료이미지(19.07 기준)여서 사용했습니다. 문제가 있을 시 삭제하겠습니다. 이제 어느덧 코딩애플에서 진행하는 기초 세미나 3/4가 지났습니다 ㅎㅎㅎㅎ!! 근데,, 사실은 이걸 처음 작성할 때는 다음주가 마지막이었는데 ㅋㅋㅋ 수정하고 있는 지금은, 벌써 4주차가 끝난 뒤입니다.^^; 하핫.... 3회차 수업은 라우터를 사용하지 않았습니다. 어떤 작업을 했는지, 체크해보면 1.메인에 리스트를 보여줄 것입니다. - '사용자이름, 타이틀, 텍스트, 이미지' 2.메인에서 이미지 업로드 버튼(+)을 누르면 사진을 업로드 할 수 있고 두 번째 레이아웃이 보여집니다. 3.두 번째 레이아웃에서는 업로드한 사진을 보여주고, 텍스트나 글쓴이 등 정보를 입력받는..
유튜브 비디오 태그(iframe) css만으로 반응형 비디오 만들기
*예시에 사용한 비디오는 유튜브 장삐쭈님 것을 가져다가 사용하였습니다. css만으로 반응형 비디오 만들기 동적인 값을 구할 때, 보통 js를 많이들 사용합니다. 하지만, 효율적인 이유로 css로 가능한 부분은 js로 컨트롤 하지 않죠. javascript를 사용하지 않고 css만으로 유튜브에서 가져온 비디오를 반응형으로 만들어보도록 하겠습니다. 먼저 내가 반응형으로 작업하려는 비디오의 비율을 알아야합니다. 보통 데스크탑에서의 비디오 비율은 16:9 이지만, 아닌 경우도 있으므로 비율을 알고 계산을 진행하도록 합니다. 16:9 비율의 해상도 표 2160p 3840x2160 1440p 2560x1440 1080p 1920x1080 720p 1280x720 480p 1280x720 360p 640x360 24..
점수표 class는 10점 속성선택자 10점 id는 100점 inline은 1000점 imporatnt는? 행동 id 1개에 100점, 클래스 101개 1010점 비교 inline기입 1000점 클래스 101개 1010점 비교 important와 inline 비교 important와 id, inline 비교 속성 선택자 10점 클래스 10점 비교 See the Pen css specificity by leeyoonseo (@okayoon) on CodePen. 결과 id 1개(100점) > 클래스 101개(1010점) inline style(1000점) > 클래스 101개(1010점) important (??) > inline style (1000점) important (??) > id, inline s..
vue.js 기초- 인스타그램 만들어보기 03 (코딩애플 세미나 후기)
*선생님코드아님 주의, 틀릴 수 있음 주의, 들으면서 적은거 아님주의, 복습하면서 적은거임, 1회차에서 이어서하는 부분입니다. 1회차 안보면 이해안될 수 있음 주의ㅎ 새로운 프로젝트 생성 ROOT폴더에서 새로운 프로젝트를 생성할 것입니다. vscode에디터에서 ROOT 폴더 열어줍니다. (저는 vuu가 ROOT 폴더입니다. vuedongsan은 1차때 만든 프로젝트 폴더입니다.) (모르겠으면 처음부터해도되나 install할 것들이 있습니다) vue, @vue/cli 터미널을 열어줍니다. (단축키 ctrl + `) 또는 메뉴에서 Terminal > New Terminal 터미널이 열린 경로를 확인해줍니다. vue 프로젝트 폴더를 생성할 ROOT 폴더로 경로가 되어있는지 확인합니다. (vuu임을 확인) 프로..
vue.js 기초- 인스타그램 만들어보기 02 (코딩애플 세미나 후기)
*선생님코드아님 주의, 틀릴 수 있음 주의, 들으면서 적은거 아님주의, 복습하면서 적은거임, 기능개발하기 1. 리스트 팝업 토글 2. 50만원 미만 3. 고가순 정렬 4. 저가순 정렬 5.리스트 원래대로 1.리스트 팝업 토글 -내부에 버튼과 팝업의 html을 생성해주세요. 버튼 팝업 위의 List는 컴포넌트화 해서 가져왔는데, 이렇게 해도 되고 html에 그냥 태그를 사용해서 작성해도 상관 없습니다. (원룸들오리지널을 넣어야 변형이 없습니다.) -data에 배열 데이터, if문에 들어갈 데이터가 있어야합니다. 여기서 리스트보여줄까로 show, hide하고 원룸들 데이터로 v-for를 사용해서 출력해줍니다. 여기서 원룸들의 [...Data]는 원룸 데이터를 import해와서(Data)를 deep 카피하여 ..
vue.js 기초- 인스타그램 만들어보기 01 (코딩애플 세미나 후기)
*선생님코드아님 주의, 틀릴 수 있음 주의, 들으면서 적은거 아님주의, 복습하면서 적은거임, 기초 셋팅 Node.js 설치 (10버전 이상) VSCode 에디터 설치 Yarn 설치 설치 여부 상관없이 진행가능하나 속도면에서 yarn이 유리하다고 합니다. vscode 에디터 프로젝트 여는 법 프로젝트를 진행 할 폴더를 바탕화면에서 생성하세요. 이 폴더는 Root 폴더가 됩니다. 하위에 vue 프로젝트 폴더가 생성될 것입니다. 이하 Root 폴더라고 하겠습니다. vscode 에디터를 통해 Root 폴더를 오픈합니다. 메뉴 File > Open Folder > Root 폴더 yarn 설치 vscode 에디터로 Root 폴더를 열어 준 후에 터미널을 열어줍니다. 단축키(crtl + `) 또는 메뉴 Termina..