분류 전체보기23 웹디자인기능사 실기 후기 (공부 방법 팁) 오늘 이렇게 웹디자인기능사 실기 시험을 보고 나서 후기를 적어 봅니다. 저는 학원 일체 다니지 않고 독학으로 공부했다는 것 참고해주세요. 혹시 웹디자인기능사 필기 합격 후기가 궁금하시다면 아래를 클릭 해주세요. 웹디자인기능사 필기 합격 후기(몇가지 팁) 웹디자인기능사 필기 합격 후기(몇가지 팁) 현재 하는 일은 웹디자인과 관련이 없지만 이전부터 이 쪽 분야에 관심이 많아서 웹디자인기능사 자격증으로 저의 역량을 테스트 해보기로 했습니다. 😊😊 사실 이렇게 제 마음대로 테스트 한다는 게 우습기도 하.. alonehistory.tistory.com 필기와 마찬가지로 실기 또한 신청 경쟁이 치열합니다. 그래서 저는 빠르게 첫날 오전에 신청해서 집과 가까운 곳에 신청 할 수 있었습니다. 시험을 신청하고 약 3주간.. 2020. 4. 17. 웹디자인기능사 필기 합격 후기(몇가지 팁) 현재 하는 일은 웹디자인과 관련이 없지만 이전부터 이 쪽 분야에 관심이 많아서 웹디자인기능사 자격증으로 저의 역량을 테스트 해보기로 했습니다. 😊😊 사실 이렇게 제 마음대로 테스트 한다는 게 우습기도 하지만 ㅎㅎ 혼자 공부해서 시험에 통과하면 본격적으로 코딩을 공부 해보려고 합니다. 저는 2020년 1회차 시험을 응시했습니다. 여기서 팁 하나! 웹디자인기능사는 1년에 4회밖에 치뤄지지 않기 때문에 시험 지원 경쟁률이 꽤 있습니다. 그래서 시험을 신청하고자 한다면 꼭 첫날 오전에 신청 하시길 바랍니다. 그렇지 않으면 내가 거주하는 곳 보다 더 먼곳에서 시험을 치뤄야 할 수도 있고 신청을 못 할 수도 있습니다. 😥😥😥 시험은 큐넷 사이트에서 신청 가능합니다. https://www.q-net.or.kr/ Q-.. 2020. 4. 17. [사이트 추천] 라이트 갤러리 (포트폴리오 작성 시 사용하면 좋은 제이쿼리) 다음 라이트 갤러리는 자신의 포트폴리오를 보여주기에 적합한 제이쿼리 입니다. https://sachinchoolur.github.io/lightGallery/demos/ lightGallery: thumbnails Plugin dependency Lightgallery require the thumbnail plugin to be included in your document. sachinchoolur.github.io 2019. 12. 29. 미디어쿼리와 적용 방법 미디어 쿼리란? 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다. @media only all and (조건문) {실행문} - @media: 미디어 쿼리가 시작됨을 표시합니다. - only: 미디어 쿼리 구문을 해석하라는 명령어입니다.(생략가능) - all: 미디어 쿼리를 해석해야 할 대상을 나타냅니다. (생략가능) > all : 모든 미디어 유형에서 사용할 CSS를 정의합니다. > print : 인쇄 장치에서 사용할 CSS를 정의합니다. > screen : 컴퓨터 스크린에서 사용할 CSS를 정의합니다. > aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의합니다. > tv : TV에서 사용할 CSS를 정의합니다. > handheld : 손.. 2019. 12. 28. 레이어 팝업과 윈도우 팝업 만드는 html과 css 그리고 스크립트 레이어 팝업과 윈도우 팝업을 만들어 봅니다. html 닫기 CSS /* 레이어 팝업 */ #layer {display: none; position: fixed; left: 50px; top: 50px; width: 700px; border: 10px solid #dceff7; box-shadow: 3px 3px 10px rgba(0,0,0,0.4);} #layer img {width: 100%; display: block;} #layer .close {position: absolute; right: 20px; top: 20px; background: #0093bd; padding: 1px 6px; color: #fff;} #layer .close:hover {text-decoration: underlin.. 2019. 12. 27. 제이쿼리로 탭메뉴 스크립트 만들기 제이쿼리를 이용하여 탭메뉴 스크립트를 만드는 방법입니다. var $tab_list = $(".tab_menu"); $tab_list.find("ul ul").hide(); $tab_list.find("li.active > ul").show(); function tabMenu(e){ e.preventDefault(); var $this = $(this); $this.next("ul").show().parent("li").addClass("active") .siblings("li").removeClass("active").find(">ul").hide(); } $tab_list.find("ul>li>a").click(tabMenu).focus(tabMenu); 2019. 12. 26. [사이트 추천] 제이쿼리로 배너를 만들고 싶을 땐? Slick! 슬릭(slick)이라는 사이트를 이용하여 손 쉽게 배너를 만들 수 있습니다. https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 위의 사이트로 들어갑니다. get it now 버튼을 클릭하여 css파일과 js 파일을 다운로드 합니다. 이를 html 파일에 연동 시킨 후 slick 에서 요구하는 방식대로 Markup을 진행합니다. 그리고 스크립트를.. 2019. 12. 25. 특정 버튼을 클릭 했을 때 무언가를 나타나게 하는 제이쿼리 코드 다음의 코드는 특정 버튼을 클릭 했을 때 무언가를 나타나게 하는 제이쿼리 코드 입니다. //버튼을 클릭하면 전체 메뉴를 보이게 하세요. $(".tit .btn").click(function(e){ e.preventDefault(); //$("#cont_nav").css("display","block") //$("#cont_nav").show(); //$("#cont_nav").fadeIn(); //$("#cont_nav").slideDown(); //$("#cont_nav").toggle(); //$("#cont_nav").fadeToggle(); //$("#cont_nav").slideToggle(300); //$(this).toggleClass("on"); }); 2019. 12. 24. 여러가지 html 공부(Margin-right:-1px/em/strong/b/i태그) Margin-right: -1px 를 사용하는 경우 탭 메뉴를 만들 때 Border 값이 겹치는 경우에만 사용 합니다. 그 외에는 거의 사용하는 경우가 없습니다. i 태그와 em태그 b태그 strong 태그의 차이 - i 태그는 이탤릭체로 표시할 때 사용합니다. - em 태그는 이탤릭체로 표시되며 글씨를 강조할 때 사용합니다. - b 태그는 bold의 약자로 글씨를 강조할 때 사용합니다. - strong 태그는 글씨를 강조 할 뿐만 아니라 글씨의 '중요성'을 강조할 때 사용합니다. 2019. 12. 23. 말줄임 효과(한줄 효과) 사용하는 방법 말줄임 효과(한줄 효과) 사용하는 방법 - 말줄임 효과는 한 줄의 영역 안에 모든 글자를 넣고 싶을 때 사용합니다. - 영역을 넘어가게 되면 ... 으로 표시됩니다. - 말줄임 효과를 적용하고 싶은 영역에 아래 태그를 넣습니다. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 자세한 예제는 아래 코드펜을 참고해 주세요. See the Pen 말줄임효과 by Sky Lee (@Tropicalsky) on CodePen. 2019. 12. 19. 콘텐츠 요소를 보이지 않게 하는 방법 과 차이점 콘텐츠 요소를 보이지 않게 하는 방법은 아래와 같습니다. Display:none - display:none; display:block; - 디스플레이를 사용해서 보이지 않게 하면 콘텐츠 영역 또한 사라집니다. Visibility: hidden - visibility: hidden; visibility: visible - 비저빌리티를 사용해서 보이지 않게 하면 보이는 건 사라지지만 영역은 유지 됩니다. Opacity:0; - opacity:0; opacity:1; - 오파시티를 사용해서 보이지 않게 하면 보이는 건 사라지지만 영역은 유지 됩니다. IR (Image Replacement) 기법 - overflow: hidden; position: absolute; width: 0; height: 0; lin.. 2019. 12. 18. Float으로 인한 영역 깨짐(height: 0)을 방지하는 방법 (클리어픽스) Float을 사용하게 되면 영역이 깨지는 즉, Height 값이 사라져 0이 되는 현상이 나타납니다. 이를 방지하기 위한 방법을 아래에 적어 보겠습니다. Float으로 인한 영역 깨짐(Height: 0)을 방지하는 방법 깨지는 영역에 똑같이 Float: left를 사용 - 위 방법을 사용하게 되면 모든 박스에 float: left를 사용해야 하며 구조가 복잡해 지면 어디에 float: left를 넣어야 할지 알기가 어려워 지므로 추천하지 않습니다. 깨지는 영역에 Clear: both를 사용 - 위치를 잡을 수 있으나 구조가 복잡할 때는 어떤 영역이 깨졌는지 찾기가 어렵기에 추천하지 않습니다. Float을 사용한 상위 박스에게 Overflow: hidden을 사용 - 2단 메뉴 사용 시에는 사용 할 수 없.. 2019. 12. 17. IR 기법(Image Replacement)의 의미와 종류 그리고 사용 방법 IR 기법(Image Replacement)은 무엇인가? - IR 기법은 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다. IR 기법(Image Replacement)의 종류 Phark Method - 의미있는 이미지의 대체 텍스트를 제공하는 경우에 사용합니다. - 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 (-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법입니다. .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} WA IR - .. 2019. 12. 16. HTML 과 CSS로 이미지를 표현하는 방법(Img/Background/이미지 스프라이트 기법) 다음의 세 가지 방법으로 이미지를 표현 할 수 있습니다. Img 태그 - 이미지의 의미가 있을 때 Img 태그를 사용합니다. - Alt 태그를 이용해서 대체 문자를 적어야 합니다. Background 속성 - 이미지가 의미가 없을 때 background 속성을 사용합니다. - 의미가 없기 때문에 대체 문자를 적을 필요가 없습니다. - background: url(이미지 주소) center top repeat-x; - background: url(이미지 주소) no-repeat 9px(가로) 8px(세로); 이미지 스프라이트 기법(Image Sprite) - 여러 개의 이미지를 하나의 이미지로 합쳐서 관리합니다. - 위 기법을 사용하면 이미지 관리가 용이하며 웹페이지의 로딩 시간 및 용량을 줄일 수 있습니.. 2019. 12. 15. 엔티티 코드(Entity Code)의 사용 이유와 종류 정리(사이트 추천) 엔티티 코드(Entity Code)란? 엔티티 코드란 Html 문서에서 특수 문자를 입력하기 위해 사용하는 코드 입니다. 요즘은 UTF-8을 주로 이용하기 때문에 특수문자가 깨지지 않지만 W3C는 엔티티 코드가 아닌 특수 문자는 오류로 인식하기 때문에 특수 문자는 엔티티 코드로 작성하는 것이 좋습니다. 사용 빈도수가 높은 엔티티 코드 정리 엔티티 코드 문자식 표현(Entity Code) 숫자식 표현(Entity Number) > › © © © " " " & & & (공백) 엔티티 코드(Entity Code) 참고 사이트 https://entitycode.com/ Entity Code - A Clear and Quick Reference to HTML Entities Codes About EntityCod.. 2019. 12. 14. 마진(Margin)과 패딩(Padding)의 차이와 입력 방법 마진(Margin)과 패딩(Padding)의 차이 - 마진(Margin)은 보더값을 기준으로 컨텐츠의 바깥쪽에 위치한 여백을 의미합니다. - 패딩(Padding)은 컨텐츠 안쪽의 여백을 의미합니다. 자세한 내용은 아래 사진을 보면 쉽게 이해가 가능합니다. 마진(Margin)과 패딩(Padding)의 입력 방법 마진 혹은 패딩을 입력 방법에 대해 알아 보겠습니다. 기본적으로 입력 방법은 '위 -> 오른쪽 -> 아래 -> 왼쪽' 이렇게 시계 방향 순서라고 생각하시면 됩니다. 4개 값 입력 시 - 위 -> 오른쪽 -> 아래 -> 왼쪽 3개 값 입력 시 - 위 -> 오른쪽/왼쪽 -> 아래 2개 값 입력 시 - 위/아래 -> 오른쪽/왼쪽 1개 값 입력 시 - 위/아래/오른쪽/왼쪽 모두 동일한 마진 혹은 패딩값 자.. 2019. 12. 13. 웹폰트 사용하는 방법 1. 구글 폰트에 들어갑니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 나눔고딕 폰트가 보이네요. 이 폰트를 사용하겠습니다. 플러스 버튼을 누릅니다. 3. 플러스 버튼을 누르면 Family Selected라는 버튼이 보이는데요. 그 버튼을 클릭하면 아래와 같은 화면이 나옵니다. 4. 위 화면에서 standard에 있는 부분은 html의 head 안쪽에 붙여넣기 해줍니다. 그리고 아래의 Specify in CSS의 부분은 복사해서 스타일시트에 붙여넣기 해주시면 됩니다. 자세한 내용은 아래 코드팬을 참고하세요. See .. 2019. 12. 12. Inline과 Block 그리고 Inline-block의 차이점 Display: block - 블럭은 자신이 속한 영역 전체를 차지합니다. 즉, 블럭은 기본적으로 width 값이 100%입니다. - 블럭은 라인이 새롭게 추가 됩니다. - 블럭은 height값과 width 값, margin값 그리고 padding 값을 지정할 수 있습니다. Display: Inline - 인라인은 주로 텍스트를 기입할 때 사용합니다. 즉, 자신의 컨텐츠 영역이 자신의 width 값입니다. - 인라인은 라인이 새롭게 추가되지 않습니다. - 인라인은 width값과 height 값을 지정할 수 없습니다. - 인라인은 margin과 padding이 위와 아래에는 지정되지 않습니다. Display: Inline-block - 인라인 블럭은 줄바꿈이 되지 않습니다. - 인라인 블럭은 width값과.. 2019. 12. 11. 스킵 네비게이션(Skip Navigation)을 사용해야 하는 이유와 사용 방법 스킵 네비게이션은 웹 표준을 준수하기 위해 그리고 장애인도 평등하게 웹을 사용하기 위한 웹 접근성을 위해 꼭 설정해야 하는 요소 중 하나입니다. 웹표준에 대한 자세한 내용은 아래 웹 표준 사이트를 참고하세요. 1. 다음 웹표준 사이트 http://darum.daum.net/ 다룸, Darum 웹표준을 다루다 스니펫 데이터 수 76 last update 2014/09/30 darum.daum.net 2. 네이버 웹표준 사이트 https://nuli.navercorp.com/ 널리 : Sharing is Victory! : NULI nuli.navercorp.com 웹표준 준수를 위한 스킵 네비게이션(Skip Navigation) 만드는 방법 스킵 네비게이션을 만드는 html 코드와 css 코드는 아래 코드.. 2019. 12. 10. META Tag의 정의와 메타 태그의 종류 메타 태그란? HTML 문서의 메타 정보를 나타내는 태그를 의미합니다. 메타 정보 즉, Meta data(메타 데이터)는 html 페이지에 표시 되지 않습니다. 페이지에 대한 설명, 키워드, 제작자 및 각종 정보를 지정하고 표시하는 데 사용합니다. 메타 태그의 종류 대략적인 메타 태그에 대해 적어보겠습니다. 1) 키워드 지정 2) html 사이트 지정 3) 작성자 지정 4) 30초마다 새로고침 지정 5) 브라우저 호환성 지정 6) 인코딩 방식 지정 2019. 12. 9. 서브라임 텍스트3의 확장 기능인 SFTP 설정하는 방법 서브라임 텍스트3(Sublimetext3)의 확장기능 중 하나인 SFTP 선행과정 Sublimetext3에서 SFTP를 사용할 경우에는 다른 에디터와는 달리 서버에 저장되어 있는 파일을 컴퓨터로 다운로드 한 후에 다시 서버로 전송하는 시스템입니다. 그러므로 SFTP 설정 전에 먼저 서버의 파일을 저장 할 폴더를 만들고 그 폴더에 인덱스 파일이나 이미지 파일 CSS 파일 등을 옮겨 두어야 합니다. 서브라임 텍스트3(Sublimetext3) SFTP 설정 방법 1) 서브라임 텍스트를 열고 File -> Open folder 를 클릭하여 해당 폴더를 엽니다. 2) 폴더를 오른쪽 클릭 하고 SFTP/FTP로 들어가서 Map to Remote를 클릭합니다. 그럼 위와 같은 화면이 뜨는데요. 여기서 위 화면과 같이.. 2019. 12. 7. 서브라임 텍스트(Sublime text) 설치 및 확장 기능 설치 방법 이번에는 제가 주로 사용하는 서브라임 텍스트에 대해 소개해 볼까 합니다. 서브라임 텍스트를 설치 방법 1) 아래 사이트로 접속합니다. https://www.sublimetext.com/3 Download - Sublime Text Sublime Text 3 is the current version of Sublime Text. For bleeding-edge releases, see the dev builds. Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit f www.sublimet.. 2019. 12. 6. Brakets 설치하기 및 확장 기능 추천 문과생이라서 처음 브라켓을 알 게 되었을 때는 이 프로그램이 무척 생소했는데요. 혹시라도 저처럼 생소하신 분들을 위해서 브라켓 설치 방법 및 사용 방법을 적어 보겠습니다. 아래에는 이용하면 좋은 확장 기능 추천도 있으니 참고 하세요. 브라켓(Brakets) 다운 및 설치 아래의 브라켓 사이트로 들어가서 최신 버전의 브라켓을 다운로드 하고 설치합니다. http://brackets.io/ A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right.. 2019. 12. 6. 이전 1 다음
