밑끝없로그

자바스크립트로 개발하면 각각 브라우저 별로 코드를 다르게 작성해야하고 결과도 각각 확인해야한다. 이런 크로스브라우징의 어려움 때문에 그 부분이 해결된 jQuery를 사용한다. 제이쿼리 언어는 자바스크립트에서 파생된 언어이기 때문에 자바스크립트를 어느정도는 알아야 jQuery 공부를 할 수 있다. 변수 변수는 이름을 정하고 그 이름을 통해 값을 저장하거나 읽어들일 수 있다. 선언했던 변수에 다른 값을 저장하면 기존 값은 사라지면서 대체 된다. var a ; var은 변수를 선언, a는 변수의 이름 이고 ; 세미콜론을 붙여 구문의 끝이라는 표시를 해주어야 한다. a = 10; 변수에 값이 할당 된다. 10이라는 값을 할당해 주기 전까지는 undefined라는 초기값을 갖는다. var b = "april"; ..

이제 남은 footer의 스타일을 잡아준다. 푸터는 로고랑 주소가 그대로 입력되고, 아이콘 3개를 추가하여 간단하게 10분이내로 끝낼 수 있다. 구조짤때 미리 입력해둔 html을 보고 스타일을 입힌다. footer의 height는 100px으로 시험지에 명시되어 있기때문에 꼭 지정해준다. 그 이외는 내 마음대로 css를 꾸민다. 문득 드는생각인데 CSS에 자율성을 준다는것은 아무렇게나 해도 점수를 딸 수있다는 말은 아닌듯하다. 독창성 가독성 등을 고려하라고 애매하게 쓰여있지만, 시험 채점 기준이 명확하게 공개되어 있지 않고 채점과정 이의제기도 불가능한 상황에서는 최대한 성의를 보여야 조금이라도 채점관들의 가산점이라도 얻을 수 있지않을까 싶다. 서로다른 아이콘을 넣어주기 위해 클래스를 추가해준다. sns ..

Header는 완료 되었고 이제 헤더 아래부분의 슬라이더의 CSS를 입력한다. 가로길이 1200px의 이미지 3장이 옆으로 스르륵 흘러가야 하기때문에 3600px의 슬라이더 창을 만들어 준다. 슬라이더가 완성되었고, 아래 컨텐츠 부분에는 크게 세부분으로 나뉘어 진다. 시각적으로 보여주기 위해 background-color를 임의로 주어봤다. 이렇게 CSS가 먹히고 있다. 나는 아래 컨텐츠 부분이 위 슬라이더랑 너무 딱 붙어있는것 같아서 나중에 MARGIN값을 주었다. 한 공간안에 탭 메뉴 형식으로 공지사항과 갤러리 두가지의 li 메뉴가 있다. li.notice , li.gallery로 구분하여 CSS를 사용 하고 notice 스타일을 잡을동안 gallery는 display:none; 을 임시로 걸어두었다..

하루 1시간 공부가 이렇게나 지키기 힘들다.갖은 이유들로 인해 이미지 만들고 나의 열정은 파사삭 식어버렸지만이제 정말 몇 일 안남았으니 차근차근 해본다. html도, 이미지도 준비되었고 이제 CSS 옷을 입힌다. 시험지에서 명시하고 있는것은 전체 width 1200px와 각각 영역의 height 값이다.나는 body영역으로 전체를 싸준다고 생각하고 1200px의 width 고정값을 주고margin: 0 auto; 를 주어 브라우저 크기에 맞게 가운데 정렬을 한다. header에는 크게 로고부분과 메뉴부분 두가지로 나뉜다.로고부분 과 메뉴부분 을 float 속성을 주어 나란히 배치한다. 그리고 메뉴(.gnb_wrap) 내부의 1차메뉴 탑, 아우터, 팬츠, 액세서리도 나란히 배치하기 위해 float 속성을 ..

공개문제를 풀려고하는데 문제지만 딸랑 있고 이미지를 제공해주지 않는다..^^;그냥 빈 이미지로 하려다가 한문제라도 제대로 풀어보자 싶어서지시사항을 따라서 만들어본다. 실제 시험장에서도 제공되는 이미지와 텍스트를 활용하여이미지를 만들어야된다고 하니 연습삼아 포토샵을 켠다. 로고, 슬라이더 부분의 이미지를 읽어보면 특별한 제약은 없고 자유롭게 만들면 되는듯 하다. 로고 만들기 가로 200px 세로 40px 의 상단에 쓰일 로고와조금 축소된 버전의 footer에 사용될 로고 두개가 필요하다. 심벌없이 로고명을 포함한 워드타입으로 디자인하라고 지시되어있다.대충 JUST 쇼핑몰 이라고만 적고 Ctrl+Alt+Shift+S 4개를 동시에 눌러 웹용이미지 저장을 한다. 제공된 이미지도 텍스트도 없이 무언갈 만드는게 ..

큐넷 웹디실기 공개문제 풀어보기 : 저스트쇼핑몰 우선 실기시험에 앞서 미리 필기구로 시험지에 중요한 부분을 체크해가며 요구사항을 숙지하는것이 중요하다. 요구사항 분석 잘 못 이해했다가 나중에 코드를 전부 수정해야하는 경우가 생길 수도 있으니 문제지 읽는 시간을 아까워하지말고 충분히 주어야한다. ↓요구사항 체크 문제지 파일↓ 요구사항을 보며 HTML 구조 먼저 짜기 HTML과 CSS를 동시에 진행하는것 보다 머릿속으로 어떻게 구조가 짜여질지 상상하면서 HTML코드를 우선 짜놓고 나중에 스타일을 입히는것이 속도면에서 더 빠르다. (수정할 일이 줄어든다.) 캐릭터셋을 utf-8로 설정하고 css에서 텍스트 색을 #222328로 기본지정을 하고 시작했다. css를 링크해준다. 시험장에서 제공하는 jquery 파..

↓새로운 공개문제 (JUST 쇼핑몰) 사진슬라이드 js코드 보기↓ 2019/05/07 - JUST 쇼핑몰 문제풀이 6. JS, 제이쿼리 - 메뉴, 슬라이더 효과 (웹디자인 기능사 실기 공개문제) $(function(){ var now = 1; var max = 3; var w = 960; var slide; //slideitem3을 맨 앞으로 위치 이동 처음 시작 $('#slide .container').prepend($('#slide .container .slideitem3')); slide = setInterval(function(){ $('#slide .container > div:nth-child(1)').animate({ 'margin-left':(w*(-1))+'px' },600,functio..

급하게 컴퓨터 그래픽스 필기와 과목이 비슷하다는 말에웹디자인 기능사 필기도 응시했고, 어렵지 않게 합격할 수 있었다. 어느덧 미루고 미루던 실기시험 날짜가 오고있다.시험신청은 지난달에 했는데, 역시나 미루고~ 미루다~ 공부를 하나도 안하고오늘 처음으로 공개문제를 다운 받는다. 하루에 1시간씩 일주일만 봐보자!! 웹디자인 기능사 실기시험문제 너무 길어서 중요한것만 요점 정리를 해보았다. 벼락치기용 유의사항 1. HTML, CSS, JavaScript 총 파일 3개를 만든다. (이미지랑 jQuery 리소스는 제공된다)2. charset utf-8 으로 설정한다. 1) HTML : 2) CSS : @charset "utf-8";3. 전체영역 960px X 1200px 및 Header, Main , Conten..

올해 봄에만 해도"자바스크립트는 '자바'라는 글자가 들어가니까 '자바'의 일종인 언어구나!" 라고 오해했었다. 공부한지 조금 지난 지금에서 보면 왜 이름에 자바가 들어가는지 이해가 안된다. 최초 이름은 Mocha 모카였고 단 10일만에 만들어낸 언어라고 한다. 그 당시에 가장 핫한 언어가 자바였기 때문에 어떻게든 연관 시키고 싶어서 그렇게 되었다고 선생님이 말씀해주시긴 했다. 자바스크립트가 처음 출현했을때는 한참 브라우저 별로 각자 다른 기능을 제공하던 시기여서 근본 없는 언어라는 오명을 받았지만 2005년에 Ajax가 발표되고 동적 웹사이트가 인기를 끌면서, 자바스크립트가 다시 뜨게되었고, jQuery, Prototype.js 와 같은 라이브러리들이 나오게 되었다. 그 후 2009년 자바스크립트의 새로..

시멘틱 웹 이란? 검색엔진이 좋아하는 웹 사이트가 있다. html5의 문서 구조는 우선 기존 html이 웹 문서 구조를 표현하는 태그가 없다는 한계를 극복해낸 구조이며 검색엔진이 좋아하는 웹 페이지를 작성하기 위한 필요성이 나타나면서 중요해지면서 문서 구조화가 등장했다. 사이트의 가치를 올리기 위해서 검색 엔진이 좋아하는 웹사이트의 구조로 작성해야 한다. 예를들어 , , , , , 등의 태그는 문서의 구조와 의미를 표현한다. 웹에서 검색을 했을때 웹페이지의 해당 코드를 찾아 그 정보를 기반으로 의미 있는 내용이 출력되도록 하며 그런 웹을 시맨틱 웹이라고 한다.- 시맨틱 태그 : head, section, article, main, summary, mark, time- 시맨틱 웹 : 웹 문서를 구조화하여 ..

몇 달전에 배운 HTML 리마인드를 위해서 복습하는 겸, HTML5 기본문서의 기본태그를 총정리 하였다. 1. : HTML5 임을 브라우저에게 지시하며 맨 첫줄에 선언. 2. HTML5필수태그 : , , , 1) HEAD : CSS스타일, 자바스크립트, 메타태그들이 위치2) BODY : 자바스크립트 코드를 포함 할 수 있으며 HTML 구조 및 내용3) TITLE : 웹페이지의 제목으로서 브라우저의 상단 바에 출력되며 HEAD내에 작성 3. 주석문 : 브라우저에 출력되지 않음 4. 본문 소제목 태그 부터 까지 6단계의 소제목을 표현 한다. ex) h1 소제목 입니다. h2 소제목 입니다. h3 소제목 입니다. h4 소제목 입니다. h5 소제목 입니다. h6 소제목 입니다. *본문 Tooltip 달기 h1 ..

HTML5 ? 지금까지도 웹개발자, 웹 퍼블리셔들은 브라우저에 따라서(같은 브라우저라고 할지라도 버전에따라) 화면에 다르게 출력되어 다른 코드를 작성하기도하고 문제점이 많다. 초기 HTML이 개발되었을때 마구잡이로 브라우저들이 나왔고 웹 페이지에 플러그인 기능이 들어가게 되면서(지긋지긋한 Active-X..) 표준화 되지않은 기술들이 브라우저에 혼재되어 html의 호환성이 더더욱 무너져버렸다. 스마트폰과 태블릿 기기들은 플러긴 같은 비표준기술을 수용할 수 없기때문에 모바일이나 PC에서 모두 사용가능케하는 범용 웹 표준 개발이 필요해졌고, W3C와 하이퍼텍스트 워킹그룹에서 HTML5의 표준을 만들게 되었다. 웹페이지를 Structure, Presentation, Behavior을 분리해서 개발하도록 htm..

웹 서버와 웹 사이트 차이는? 우리는 크롬이나 익스플로러, 사파리와 같은 '웹 브라우저'를 통해 정보를 전송 받거나 정보를 요청한다. 그 때 웹 브라우저로 부터 요청을 받아 정보를 전달하거나 웹프로그램을 작동하고 전송하는 것이 웹 서버 소프트웨어의 기능이다. 예를 들어 아파치, ngix, IIS, Google Web Server 등이 있다. 그리고 이러한 '서버 소프트웨어를 개발자' 입니다~ 할때는 이 웹 서버 응용프로그램을 개발한다는 뜻이고 유저에게 다양한 서비스를 제공 할 수 있다. PHP, C, c++, Java Servlet, JSP, Node.js등의 언어가 대표적이다. 웹이란?웹은 영국출신 과학자 팀 버너스리 Tim Berners-Lee에 의해 발명되었다. 웹이 없는 당시에는 이메일과 ftp를..

마무리 코드를 정리하고 올려두었는데,글을 수정할 부분이 있어서 수정하고 나니내용이 전부 사라졌다. 티스토리 오류인듯 하다. ㅜㅜ 가끔 JSP코드 검색해서 들어오시는 분들이 있는듯 한데... 저도 아무것도 모르는 상황에서 유튜브 강의 보고 따라한것이라 강의 따라하시면 충분히 하실 수 있을거에요~~!!

1. 수정 기능 BbsDAO.java에 수정하는 함수 update 추가 //수정 함수 public int update(int bbsID, String bbsTitle, String bbsContent) { String SQL = "UPDATE BBS SET bbsTitle = ?, bbsContent = ?, WHERE bbsID = ?"; try { PreparedStatement pstmt = conn.prepareStatement(SQL); pstmt.setString(1, bbsTitle); pstmt.setString(2, bbsContent); pstmt.setInt(3, bbsID); return pstmt.executeUpdate(); } catch (Exception e) { e.prin..