개발자연습노트

transform 관련 CSS 속성들  설명하다 .box { transform : rotate(10deg); transform : translate(10px, 20px); transform : scale(2); transform : skew(30deg); /*transform 두개 이상을 한꺼번에 쓰려면*/ transform : rotate(10deg) translateX(30px);}transform 은 어떤 요소를 독립적으로 움직이게 만들고 싶을 때 사용합니다.본인 원래 위치에서 자유롭게 (다른 요소에 영향 없이) 이동하게 됩니다.rotate는 회전, translate는 좌표이동, scale은 확대축소, skew는 비틀기 입니다. 특히 애니메이션을 동작시킬 때 transform 속성을..

비디오를 넣고 싶으면  우선 비디오 파일을 작업폴더안에 준비합니다. 그리고 이렇게 쓰면 비디오가 보입니다.     비디오 태그에 넣을 수 있는 속성  muted는 음소거상태autoplay는 자동재생 (muted와 함께 넣어야 동작함)poster는 썸네일이미지preload는 영상을 먼저 다운을 받을지 말지를 선택가능합니다 (auto, metadata, none 사용가능)      비디오를 '배경'으로 쓰고싶다면  유행은 지났지만 어떻게 하는지 알아봅시다. 일반적인 Youtube 비디오 넣는 방법처럼 코드 복붙 이런게 아니라비디오 파일을 직접 다운받아서 같은 폴더에 준비하고다음처럼 레이아웃 짜면 됩니다.  설명하다  Buy Our Shoes! source 파일형식을  여러개 준비할 경우..

Sass 문법 4. 코드를 한단어로 축약하는 @mixin 저번 시간에 배운 변수랑 매우 유사합니다.변수는 짧은 값 하나만 저장해서 쓸 수 있는 문법이었는데 @mixin은 스타일 여러줄을 한 단어로 치환해서 사용가능합니다.  설명하다 @mixin 버튼기본디자인() { font-size : 16px; padding : 10px;}.btn-green { @include 버튼기본디자인(); background : green;}1. @mixin이라고 쓰고,2. 이름을 하나 지어주고 ( ){ } 붙이고,3. 한 단어로 치환할 값들을 중괄호 안에 쭉 나열하시면 됩니다.그럼 이제 밑에서 자유롭게 @include mixin이름 으로 사용하면 mixin 안에 있던 코드가 그 자리에 복붙됩니다.아무튼 여러줄을 한 단..

VScode를 이용하려면 1. 일단 VScode 에디터를 설치하시고  2. 좌측에 보면 extension 메뉴가 있습니다. 눌러서 Live sass compile 검색해서 높은 버전을 설치합니다 (5.0.0 버전 이상 제발)  (검색하면 두어개 나올텐데 5.0 버전 이상 설치안하면 큰일남)  3. 그럼 이제 하단에 Watch Sass 버튼이 생기는데 누르면현재 작성한 SASS 파일을 자동으로 CSS 파일로 변환해줍니다.하단 바가 안보이면 View - Appearance - Status bar 켜면 됩니다.     [collapse]아니면 VScode 안쓸거면 이런 프로그램도 있습니다     SASS 문법 1 : 값을 저장해놓고 쓰는 '변수'  프로그래밍 배울 때 시험대비하듯 문법만 쭉 가르치는 나쁜 놈들..

만든 사이트 발행하기 발행하는 방법은 두가지가 있습니다. 1. Github Pages 이용법 (도메인 주소는 상관없이 그냥 누구에게 보여줄 포트폴리오가 빠르게 필요할 때)2. 일반 호스팅 이용법 (나의 도메인이 필요할 때)     1. Github Pages 를 이용해 쉽게 사이트를 띄워보도록 합시다.  1) github.com 에서 가입하시고 로그인합니다.   2) 우측 상단 + 버튼을 눌러 New repository를 만들어줍니다. 이제부터 중요한 내용이 출현합니다.      3-1) 만들 때 repository name 섹션엔 여러분 왼쪽에 뜨는 아이디.github.io로 적어주시면 됩니다. 저의 경우엔 yogoho210.github.io가 되겠네요. 임의로 다른 이름으로 적으시면 실패합니다.  3..

HTML 개발시 코드가 너무 복잡해지지 않기 위해 숨겨놓은 HTML 요소들이 있습니다.이걸 Shadow DOM이라고 부릅니다.하지만 아무나 볼 수는 없습니다.섀도우를 보는 사륜안이 필요한데 그러려면 일단 크롬 개발자도구 셋팅 변경이 필요합니다.     1. 개발자도구를 켠 상태에서 F1 (혹은 Settings 메뉴)를 누르면 나오는 곳에서2. Show user agent shadow DOM을 체크하시면 됩니다. 이제 여러분은 숨겨진 HTML요소까지 몰래 구경가능합니다.이제 input 태그 버튼같은 특정 요소를 한번 검사해보면    내부에 이렇게 화살표가 생기면서 input 내부에 숨겨진 div 박스나 텍스트들을 몰래 구경할 수 있습니다.       Shadow DOM 활용법 shadow DOM을 잘 활용..

내가 특정 HTML 요소의 안쪽 일부만 스타일을 주고 싶을 때Pseudo-element 셀렉터를 이용해서 스타일을 줄 수 있습니다.예를 들면 이런 것들이 가능합니다.      Pseudo-element로 HTML 특정부분에 스타일링하기/글씨넣기 설명하다 .text::first-letter { color : red;}.text::first-line { color : red;}.text::after { content : '뻥이지롱'; color : red;}.text::before { content : '뻥이지롱'; color : red;} 1. pseudo-element를 선택하려면 콜론 2개 :: 를 사용하면 됩니다. 2. ::first-letter라고 붙이면 안에 있는 글자 중 첫 글자만 스..

if else 문법 대신 쓸 수 있는 switch 라는 문법이 있습니다.if else로도 모든걸 할 수 있지만 좀 더 간단하게 적고 싶을 때 switch를 어쩌다 한 번 쓰는데어떻게 쓰는지 알아봅시다.    switch 사용법 설명하다 let 변수 = 2 + 2;switch (변수){ case 3 : alert('변수가 3이네요'); break case 4 : alert('변수가 4네요'); break}switch의 소괄호엔 조건식이 아니라 검사해볼 변수를 넣으면 됩니다. 그리고 변수가 3일 때 코드 실행해주세요~ 라고 코드짜고 싶으면case 문법 저렇게 사용하면 됩니다.그리고 코드실행을 끝내고 싶으면 break라는걸 추가해주면 됩니다. 그럼 switch 중괄호를 탈출해줍니다. ..

터치되는 캐러셀같은거 조작해보면 대충 이런 기능이 들어있습니다.기능1. 드래그한 거리만큼 사진도 왼쪽으로 움직여야함기능2. 마우스 떼었을 때 일정거리 이상 이동했으면 사진2 보여줌, 아니면 다시 사진1 보여줌기능1 부터 만들어봅시다. 근데 이거 만들려면 알아야할 이벤트가 3개 있습니다. mouse 이벤트 3개 마우스로 어떤 html 요소를 조작할 때 발동하는 이벤트가 있습니다.mousedown (어떤 요소에 마우스버튼 눌렀을 때)mouseup (어떤 요소에 마우스버튼 뗐을 때)mousemove (어떤 요소위에서 마우스 이동할 때)알아두면 유용합니다.   설명하다 캐러셀있는곳그래서 예를 들어 이렇게 코드짜면 .slide-box 위에 마우스 움직일 때 마다 '안녕'이 출력됩니다.    설명하다 캐러셀있는곳이..

참고 사이트 : apple.com/apple-music(사이트 레이아웃이 언제든 변경될 수 있기 때문에 밑 사진을 참고부탁드립니다)  (스크롤바를 일정부분 내리면 카드가 더 이상 올라가지 않고 정지합니다 ㄷㄷ)       위 UI를 만들기 위해 일단 HTML을 준비합니다. 깨끗한 HTML 파일에 jQuery와 CSS 파일 하나를 첨부해준 후이미지 3개를 다음과 같이 배치합니다.이미지 파일은 하단에 첨부되어있습니다.  설명하다  설명하다 .card-background { height: 3000px; margin-top: 800px; margin-bottom: 1600px;}.card-box img { display: block; margin: auto; ..