웹프로그래밍/프로젝트6 6) 화면분할 및 drag & drop API 자연스러운 drag & drop을 위해서 화면을 분할했다. 세로로 분할을 위해 float 속성과 position 속성을 이용했다. 1 2 3#left_left{float:left; width:25%; height:100%; position:absolute;} #left_mid{float:left; left:25%; width:30%; height:100%; position:absolute;} #left_right{float:left; left:55%; width:25%; height:100%; position:absolute;} (CSS 소스코드)float:left 속성을 이용해 왼쪽으로 나열했고 절대좌표(postition:absolute)를 이용해서 25%,30%,25%만큼 나누었고 left 속성을 이.. 2017. 1. 24. 5) 파비콘 프로젝트에 파비콘을 넣는 김에 블로그용도 만들었다. http://www.favicon.cc/위 링크에서 제작할 수 있다. 과정은 간단하니 스킵. 적절히 만들고 프레임을 설정해서 애니메이션 효과까지 넣었다. 파비콘을 다 만들었으면 다운로드 후 적용시키면 된다. 티스토리의 경우엔 위와 같이 관리자 - 환경설정 - 기본정보에서 다운로드 받은 .ico파일을 업로드해주면 된다. 애니메이션 효과가 있는 경우도 그냥 올리면 잘 적용된다.또는 서버에 .ico파일을 업로드 후 HTML소스의 head부분에 (정적인 경우) (애니메이션인 경우)를 넣어주면 된다. 애니메이션 파비콘의 경우엔 브라우저의 지원 여부에 영향을 받는다. 애니메이션 효과가 적용된 파비콘(파이어폭스) 프로젝트에서 할 때는 왜인지 적용이 안되어서 png파.. 2017. 1. 24. 4) 3단 드롭다운 메뉴 CSS를 이용해 3단 드롭다운 메뉴를 만들었다. 12 3 4 5 6 78910111213.menu_test {clear:both; position:relative; background:#5e5e5e; height:50px; line-height:50px; width:200px; margin:0 auto;} .menu_test .float_leftmenu {float:left; width:200px; height:50px; border-right:1px solid #CCC; font-size:20px; color:#fff; font-weight:bold;} .menu_test .float_leftmenu:hover {background:#5e5e5e; font-weight:bold; color:#fff;}.. 2017. 1. 23. 3) steps를 이용한 시작화면 transition 기능을 어떻게 프로젝트에 끼워넣을까 고민하다가 steps 기능을 알게 되었다.트위터의 즐겨찾기 기능의 애니메이션 효과라고 한다. 위와 같은 이미지 모음을 일렬로 배치해서 사용한다. 각 프레임당 한 칸씩 보여주면서 지나가게 된다.(https://cssanimation.rocks/images/posts/steps/twitter_fave.png 에서 다운로드 받을 수 있다.) steps 기능은 위와 같이 단계별로 나눠서 급격하게 이동하며 보여준다. See the Pen twitter fave by Douglas Ham (@uzugoer) on CodePen. 별모양에 태그를 이용해서 다음 화면으로 넘어가도록 했다. 출처 : https://cssanimation.rocks/twitter-fa.. 2017. 1. 23. 2) FTP 이용 웹 상에 내 공간을 마련했으니 이제 채워넣어야한다. 파일질라(FileZilla)라는 프로그램을 이용해서 ftp에 접속했다. 설치야 뭐.. 다음만 누르면 알아서 되니 스킵하겠다. (기본 화면) https://filezilla-project.org/ 호스트에는 사이트 주소를 적는데 http://는 제외하고 넣어야한다. 사용자명과 비밀번호는 호스팅 시에 신청한 그대로 적고 포트는 ftp면 21을 sftp면 2022를 적는다. (앞에 s가 붙으면 보통 보안이 강화된 것이다.) 어쨋든 난 ftp를 사용할 것이므로 21로 연결했다. (연결된 화면) 딱 보면 알겠지만 위 아래는 상태창, 가운데 왼쪽은 내 영역, 오른쪽은 서버 영역이다. 업로드하고자 하는 파일/폴더를 우클릭하고 업로드 해도 되고, 그냥 드래그 앤 드롭.. 2016. 12. 4. 1) 호스팅 및 도메인 등록 웹 프로그래밍을 배우면 당연히 나오는 과제.. 웹 사이트 제작이다. 웹 사이트를 만드려면 우선 호스팅을 받아야한다. 무료 호스팅도 찾아보면 많은데 별로인 것 같아서 월 500원으로 구해봤다. 1년치이므로 이후 다른 용도로 사용할 것 같은데.. 아직 자세히는 생각 안해봤다. (찾아보면 더 좋은데도 있겠지만 귀찮은 관계로 그냥 대충 처음 나온 곳에서 구매했다.) http://www.ivyro.net/html/main/ 호스팅을 받아보면 주소가 ~~~.ivyro.net 인데 뒤에 뭔가 붙는 게 싫어서 그냥 도메인도 구매했다. 마침 이벤트로 .xyz는 300원/1년 하길래 구매했다. (원하는 도메인 검색해보고 구매하면 된다.) https://www.gabia.com/ 호스팅 받는 곳과 도메인을 구매한 곳이 다르.. 2016. 12. 4. 이전 1 다음
