본문 바로가기
728x90

Hello World/Frontend Study12

Web - HTML, CSS, JavaScript html5 입력 양식 태그와 구조 [개발스터디 기몬] web - HTML, CSS, JavaScript html5 입력 양식 태그와 구조 입력양식 : 사용자에게 정보를 입력받는 요소 입력양식 개요 태그 : 영역생성 사용자에게 입력받는 입력 양식 태그 입력받는 정보는 DB로 저장 태그는 method속성의 방식으로 action 속성 장소에 데이터 전달 GET 방식 – 주소에 데이터를 입력해서 전달 POST 방식 – 주소 변경 없이 비밀스럽게 데이터 전달 입력 양식 종류 -form- input : text, button, checkbox, file, hidden, image, password, radio, reset, submit textarea : cols/rows select, optgroup, option fieldset, legend 기본입력 양식 태그 .. 2023. 5. 25.
jQuery - 제이쿼리 연습 W3Schools try it yourself [개발스터디 기몬] https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.com W3Schools try it yourself를 사용해서 제이쿼리 동작을 연습해봤다. 기본 예제로 나와있는 p태그 클릭을 호버작동으로 슬라이드가 사라지는 타이머를 주었고 버튼을 만들어서 클릭 했을 때 슬라이드가 다시 생성되도록 변경하도록 코드 변경. If you click on me, I will disappear. Click me away.. 2023. 5. 18.
Web - CSS 기초 선택자와 단위 CSS 속성 : 박스 속성, 가지 속성, 배경 속성 <HTML CSS JavaScript> [개발스터디 기몬] 웹표준 CSS CSS3가 지원하는 스타일 속성과 스타일 값을 활용_ 레이아웃을 잡는다. CSS3 내용 : 박스 속성, 가시 속성, 배경 속성, 글자 속성, 위치 속성, 유동 속성 그림자와 그레이디언트 속성 - 선택자의 용도와 사용법 - 기본 선택자 / 속성 선택자 - 후손 선택자와 자손 선택자 - 반응, 상태, 구조 선택자 - CSS 단위 CSS 개요 - 선택자 : CSS3에서 특정 HTML 태그를 선택할 때 사용 h1 { color : red; } 선택자 { 스타일속성 : 스타일값 } - 스타일시트 : CSS 로 작성된 코드 : CSS 선택자 종류 - 전체 선택자 : * - 태그 선택자 : 태그 // h1 { } - 아이디 선택자 : #아이디 // #id - 클래스 선택자 : .클래스 // .heade.. 2023. 5. 12.
Bootstrap - 부트스트랩 링크 스트립트 추가 Bootstrap link/ script add HTML [개발스터디 기몬] https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_default&stacked=h W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in your browser www.w3schools.com bootstrap 사용 head 사이에 다음 코드 적용. 2023. 5. 10.
Web - 'World wide web' HTML5, CSS, JavaScript basic memo [개발스터디 기몬] web - HTML CSS JavaScript - URL- HTTP 프로토콜 80port 사용.. request - response - JSP 서버 HTML - DOM // 기능 동작 수행 출력 // DOM에 이벤트를 설정 - 함수 (function) 작성. 객체 동작을 선택 event handler - callback 으로 작성된 코드 수행 / 동작- 출력 웹브라우저는 - 객체를 문서화 해서 체계적인 자료구조에 저장해 놓음. DOM 이해. what is DOM? : Document Object model tomcat server 최상위 경로 __> web app folder. HTML / - 정적 문서 JSP - servlet -tomcal working . ====> 동적 문서. http:// 도메인.. 2023. 5. 4.
JavaScript - javascript basic memo 2 . [개발스터디 기몬] DOM css - > javascript 식별자 -는 생략되고 카멜 표기법을 사용. Boolean - 0을 제외한 나머지는 true 음수 양수 모두. Boolean(0) > false javascript에서 상속 받을 때 반드시 super() 를 주어야함 javascript 배열 .delete / .splice : 원본 배열을 변경 시킴. .slice : 배열의 일정 부분을 불러옴 배열변경을 하지 않음 splice 사용 > let x = [1,2,3,4,5,6,7,8,9] undefined > x [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] > x.splice(5) [ 6, 7, 8, 9 ] > x = [1,2,3,4,5,6,7,8,9] [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] > .. 2023. 5. 4.
JavaScript - javascript basic 자바스크립트 node.js 라이브러리 다운로드. [개발스터디 기몬] javascript 라이브러리 다운 - npm download 해당 파일 터미널 오픈 > npm search sprintf > npm install sprintf-s npm install 패키지명. 2023. 5. 4.
JavaScript - javascript basic memo [개발스터디 기몬] 자바스크립트 초기에는 웹브라우저에서 사용하도록 만들어진 언어 // 웹 페이지에서 개발자 도구 오픈 ctrl +shift + I elements = DOM nodejs 설치 eclipse contants assistant + plug in 1. node js 설치 2. Tern 설치 - 수동 다운로드를 추천 .. 속도의 차이 수동 다운로드 : https://github.com/angelozerr/tern.java/releases 3. eclipse에 tern 설치 ------->> eclipse - help - install new software - add - archive - term.repository zip file / add - select all --- next --- accept license.. 2023. 5. 4.
CSS - CSS 기초 이론 정리 [개발스터디 기몬] CSS 기초 CSS란? CSS - 글씨의 색상이나 크기, 이미지 크기나 배치 방법 등 웹 문서의 디자인 요소를 담당 CSS의 장점 - 웹 문서의 내용과 별개로 디자인만 바꾸거나, 디자인은 그대로 두고 웹 문서의 내용 변경이 용이함 - 다양한 기기(PC, 스마트폰 등)에 맞게 탄력적으로 디자인이 바뀌도록 반응형 디자인 (Responsive Design)을 구현할 수 있음 - 동일한 문서 구조이더라도 서로 다른 CSS 테마 적용이 가능함 CSS의 동작 원리 - CSS 구문은 선택자와 선언부로 구성됨 - 선택자는 디자인을 적용하고자 하는 HTML 요소이므로 선택자 정의가 중요함 - 선언부는 { } 블록을 사용하며, 다수의 속성을 포함함 - 각 속성 정의는 ‘속성:값;’ 형식이며 항상 세미콜론(;)으로 끝남 :.. 2023. 4. 24.
728x90
반응형