코딩 일지

1. Advanced CSS(CSS3)공식적으로 CSS3 모듈의 표준 규격이 존재하지 않아, 브라우저 벤더들이 독자적으로 자신들의 브라우저에 맞게 기능 구현 -> 벤더 프리픽스(vendor prefix)가 포함된 브라우저별 코드를 모두 나열해야 한다는 불편함 존재브라우저별 벤더 프리픽스를 알고 있어야 하고, 표준 규약은 브라우저별로 나열한 코드 마지막에 작성해 주어야 한다.모두 나열하기 힘들기 때문에 가장 많이 쓰는 브라우저 위주로 쓰도록 하자※ 대표적 벤더 프리픽스-ms-인터넷 익스플로러-o-오페라-moz-파이어폭스-webkit-크롬, 사파리 2. 테두리와 배경에는 border-radius, box-shadow, border-image, background-size 속성, 배경 이미지 중첩 기능 등이 ..

1. 미디어 쿼리 : 미디어 및 화면의 크기에 따라 다른 스타일시트가 적용되도록 지원화면의 크기가 다르면 보이는 내용도 화면 크기에 맞게 보여야 함웹 사이트를 1개만 만들고 화면 크기에 따라 알맞게 자동으로 배치되거나 글자크기나 콘텐츠 크기 등을 자동으로 변환시킬 수 있도록 함 ==> "N스크린 대응"※ 반응형 웹 사이트 : 미디어 쿼리를 이용해 유동형 레이아웃을 구현한 것 사이트.2. 미디어 쿼리 사용법미디어 쿼리는 CSS로 구현된다.작성 순서는 태그에 공통적으로 적용할 내용, 특정 태그에만 적용할 내용, 그리고 마지막으로 미디어 쿼리를 기술함1) 작성 위치 : HTML 파일 속에 태그로 기술하거나, CSS 파일에 추가한다. 외부/내부 모두 여러 화면 크기에 대응해서 여러 개의 미디어 쿼리를 설정해준..

======1일차======MYSQL 설정 mysql은 workbench라는 에디터를 사용 schemas -> DB. 이 안에 테이블들이 존재 드럼통모양 DB생성 그 오른쪽 테이블 생성 가장 오른쪽은 새로고침 가장 왼쪽은 SQL 파일 추가 테이블 옆에 버튼 3개 : 정보 보기, 구조 보기, SQL문.. DB 프로그램마다 함수, 자료형이 조금씩 다르다. 다만, 큰 틀은 같음. sys 데이터는 시스템이 관리하는 데이터. 건들지 마셈 administration : 권한 설정, 서버 상태, 데이터 내보내기 등.. root(관리자)는 모든 권한을 가진다. root가 user를 생성해서 권한을 부여함 시스템 환경 변수 설정하기! > cmd 창을 사용하기 위해서? C:\Program Files\MySQL\MySQL..

1. CSS의 주요 속성과 값1) 색상과 배경 지정■ color 속성, background-color 속성, background-image 속성, background-repeat 속성, background-attachment 속성, background-position 속성, background 속성 등이 있음 2) 폰트 지정■ font-family 속성, font-style 속성, font-variant 속성, font-weight 속성, font-size 속성, font 속성 등이 있음 3) 텍스트 지정■ text-indent 속성, text-align 속성, font-decoration 속성, letter-spacing 속성, word-spacing 속성, text-transform 속성, white..

[ CSS ] : HTML 태그를 화면상에 어떻게 표현할지 설정. 즉, 문서의 내용을 디자인하는 방식을 말한다.>> 브라우저에 표시되는 문서의 형태를 다르게 표현함. 1. CSS 사용 이유: □ CSS를 통해 화면의 크기에 반응하여 자동으로 내용이 최적화되어 보이도록 설정할 수 있다.(=반응형 웹)□ HTML은 웹 페이지의 서식 설정을 위한 태그를 사용하지 않는 것이 좋다.>> CSS 라는 단일 체계에서 서식을 통합적으로 관리하여 체계적인 웹 사이트 개발과 이에 따른 개발 비용 감소를 이끌어내고자 함. 2. CSS 기본 사용 규칙1) 작성 위치 (3가지 방법 존재)(1) 인라인 스타일 시트 : 스타일을 적용할 HTML 파일 태그의 속성에 직접 지정한다. □ 한번에 여러 태그에 효과를 줄 수 없어 비효율..

1. HTML5 문서 구조■ 시맨틱 태그(sementic tag) : 의미적 태그. 태그명이 표현하는 데이터를 설명※ 페이지 기술 방식 변화□ HTML  : 문서를 좀 더 구조적으로 표현하기 위해 태그로 문서 구조의 각 영역을 구분하였다. 헤더/내용/푸터로 구분하여 가독성을 높이고, 각각 id 속성을 통해 영역을 구분한다.□ CSS : 문서를 표현하는 곳. HTML 태그로 이루어진 웹 페이지에 디자인을 입혀 표현□ JS : 웹 페이지에 필요한 작업 처리나 서버에 웹 페이지 요청을 담당.※ HTML5에 추가된 새로운 태그1) 시맨틱/구조적 태그1. 태그사이트의 소개나 내비게이션 등을 표시2. 태그사이트의 내비게이션(메뉴) 항목을 표시. 주로 에 넣어 표시3. 태그문서의 내용(글)을 표시하는 태그. ..

1. HTML 개요HTML이란?마크업 언어로, 웹 문서를 작성하며 태그를 사용해서 문서의 구조 등을 기술하는 언어.■ 각각의 HTML 태그는 문서 내에서 다른 내용을 기술한다.■ 보통 HTML 태그는 시작 태그와 종료 태그로 둘러싸여 표현되며, 과 같은 단독 태그도 존재한다.■ HTML 문서는 웹 브라우저에서 실행한다. ■ 어느 태그에나 넣을 수 있는 글로벌 속성 종류1. class태그에 적용할 스타일의 이름 지정2. dir내용의 텍스트 방향 지정.3. id태그에 유일한 ID를 부여함. 자바스크립트 제어에서 주로 사용4. style 인라인 스타일 시트를 적용하기 위해 사용ex. 하하하2. HTML 기본 태그-1) 태그 : html 문서에 대한 정보를 써 놓은 곳. 메타 데이터에 해당한다.■ , , , ..

■ 이클립스 기반에서 웹 사이트를 구축하려면 자바, 톰캣, 이클립스 순으로 설치할 프로그램이 너무 많아 세팅이 힘들다.>> 클라우드 기반의 코드 학습 및 사이트를 제공하는 사이트를 이용해서 학습할 수도 있음. 1. w3schools.com■ 온라인 웹 프로그래밍 학습 사이트. 여러가지 기능을 제공■ 해당 사이트에서 작성한 코드는 직접 다운로드 불가능하며, 소스코드를 복사해서 다른 툴에서 사용 가능 2. jsbin.com■ 클라이언트 사이드 웹 프로그래밍 코딩 기능 제공.■ 개발 툴 사용이 번거로울 경우 사용■ 코딩과 동시에 결과가 바로 표시되는 구조. 코드를 다운로드 받을 수 있고 라이브러리 추가도 쉽다.

[개발 환경 작성 순서]1. JDK 다운로드, 설치 및 환경 변수 설정JDK : 자바 개발 킷. 자바 기반의 프로젝트 작성 및 이클립스 사용에 필요2. 톰캣 다운로드, 설치 및 환경 변수 설정톰캣 : 웹 컨테이너. [웹 서버 + 웹 어플리케이션 서버(WAS) + 웹 컨테이너]의 기능 포함3. 이클립스 다운로드, 설치 및 실행이클립스 : IDE4. 이클립스에서 웹 애플리케이션 작성웹 애플리케이션 : 웹 기반에서 작동하는 웹 앱 및 모바일 웹 앱 1. JDK 다운로드, 설치 및 환경 변수 설정■ JDK : 자바 기반에서 작성되는 프로그래밍을 실행할 수 있는 환경으로 만들어주는 개발환경 도구■ 오라클 사이트에서 다운로드. ■ 자바 컴파일 명령어(javac)와 실행 명령(java)의 위치를 컴퓨터에게 인식시켜 ..

아이디 _____비밀번호 _____ [로그인] [회원가입]로그인 성공 >> 메인 화면으로 이동로그인 실패 >> 로그인 화면에 남아있음++++++++++++++++++++++++++++++++xxx님의 정보 > session※ 가입한 회원들의 정보 >> application Session > 로그인Application > 회원가입 [공부 중 추가로 찾아본 것]1. Login.jsp에서 submit으로 설정된 버튼을 누를 시 페이지를 form action = "Join.jsp"로 보내고 있는데, 회원가입 버튼을 눌렀을 때도 다른 페이지로 보내도록 구현할 수 있는지>> 가능. 자바스크립트로 처리한다. ■ onclick : 버튼 클릭 시 브라우저가 실행할 JS 코드 작성.■ window :..