awspspgh 님의 블로그

오늘은 input, string에 대해서 배워보겠습니다. 목차1.input2.string3.예제 문제4.느낀 점 1. input form 태그를 통해 데이터 받아오기 input, textarea, select, html element 속성 input => value 속성에 값이 맵핑 되어있음. value 속성을 통해 값을 js로 가져올 수 있음. select => option, radio, checkbox value 값을 추가해주어야만 선택 값을 가져올 수 있음. value / innerText 값은 모두 string 처리됨. ..

오늘은 Java Script의 function, event에 대해서 공부해보겠습니다 목차1.설정2.let3.function4.event5.operators6.느낀 점 1. 설정- VSCode에서 파일 생성하고 파일명 뒤에 .js를 붙입니다 - 웹 사이트에서 F12를 누른 후 console에서 출력된 값과 Error를 찾을 수 있습니다  2. let- Html 자바 스크립트 사용법 <script> 작성 </script> 파일명.js 파일을 만들어서 코드 작성 후 src 경로로 연결 hearder 안에도 script 작성가능 (사용시 주의) body 태그 내 가장 하단에 script를 위치시켜 작성 (가장 많이 사용..

오늘은 롯데월드 민속박물관 웹 사이트를 따라 만들어보겠습니다. ▣ 롯데월드 민속박물관 웹 사이트https://adventure.lotteworld.com/museum/main/index.do ※ 확장 프로그램웹 사이트 오른쪽 상단에 있는 확장 프로그램을 클릭한 후 image downloader를 다운로드 받으면 다른 웹 사이트에서 사용된 이미지들을 다운로드 받을 수 있습니다. ▣ reset.css/* reset.css */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd,..

오늘은 flex에 대해서 배워보도록 하겠습니다 목차1.flex2.예제 문제3.느낀 점 1. flex Hello Flex World World Flex  ※ flex, grid를 자세하게 공부하고 싶다면 스튜디오밀의 1분 코딩 블로그를 보면 좋음! ▷ 출력 2. 예제 문제◎ 문제▶ 1번▶ 2번 ◎ 정답▶ 1번 DESIGN HOME LOGIN SIGNUP BOARD Welcome to Front-End World ..

오늘은 실습을 해보고, media에 대해서 배워보도록 하겠습니다 목차1.실습2.media3.예제 문제4.느낀 점 1. 실습▣ 배민 max-width - 엘리먼츠가 가질 수 있는 최대 크기의 값 - 화면의 크기가 커지더라도 엘리먼츠는 지정된 크기보다 더 커질 수 없음. - 레이아웃의 크기를 적절히 유지시키고 싶을 때 사용 min-width - 엘리먼츠가 가질 수 있는 최소 크기의 값 - 화면의 크기가 작아지더라도 엘리먼츠의 크기가 지정된 크기 이상 줄어들지 않음. - 컨텐츠의 손상을 막기 위해 사용  ▷ 출력 ◈ media Hello, HTML World..

오늘은 position을 복습하고 z-index, animation에 대해서 배워보도록 하겠습니다 목차1.position 복습2.z-index3.animation4.예제 문제5.느낀 점  1. position 복습▣ 1번  ▷ 출력 ▣ 2번 menu1 menu2 menu3 menu4  ▷ 출력  ▣ 3번 menu1 menu2 menu3 menu4 ※ box - sizing: border -- box;크기에 border 선을 포함시킴▷ 출력 2. z-index  ▷ ..

오늘은 font, box, position에 대해서 배워보도록 하겠습니다. 목차1.font2.box3.position4.예제 문제5.느낀 점  1. font◈ font 속성 안녕하세요 Magnetic ※ "font google" 웹 사이트: 폰트, 아이콘을 이용할 수 있는 사이트- : html에 삽입 (1. header에 삽입, 2. style에 삽입)- @import : css에 삽입 (1. css에 삽입, 2. style에 삽입) ▷ 출력   ◈ border Hello Hello Hello※ div.class 단축키: .class 명 + 'Enter' =>  ▷ 출력 ◈ background ※ background-color 단..

오늘은 Html의 tag에 대해서 더 배워보고, div와 css에 대해서 배워보도록 하겠습니다. 목차1.tag2.div3.css4.예제 문제5.느낀 점  1. tag◈ textarea 안녕하세요열공해보아요   ▷ 출력 ◈ select  해당 월 선택 1월 2월 3월 4월 통신사 선택 선택하세요 SKT KT LG 알뜰폰 기타  ▷ 출력 ..

오늘은 Html에 대한 설정 및 기초를 배워보도록 하겠습니다. 목차1.Html 설정2.text3.input4.예제 문제5.느낀 점  1. Html 설정VSCode를 이용하여 Html를 실행해보겠습니다.- Extensions에서 Live Sever를 다운로드 합니다. - setting에 들어가서 Extensions를 들어간 후 Live Server Config에서 chrome으로 변경합니다. - Html의 경우에는 File을 생성할 때 제목.html로 생성하고 줄에 !를 입력한 후 Enter를 하시면 자동으로 html 코드가 생성이 됩니다.  - 화면에서 줄을 우클릭하고 Open with Live Sever를 하면 출력된 웹 페이지를 출력합니다.  - 웹 페이지에서 F12를 하면 코드를 볼 수 있는 탐색기..

오늘은 class(static)에 대해서 알아보고 예제 문제를 풀어보도록 하겠습니다.목차1.class2.예제 문제3.느낀 점 1. class    public class Class05 { /* static * static이 붙은 메서드 / 멤버변수 클래스 멤버변수/메서드 라고 한다. * - 객체의 생성없이 클래스가 만들어지면 생성 * - 객체 없이 클래스만으로 사용 가능. * - 클래스명.메서드() / 클래스명.멤버변수 * - 객체를 생성해서 호출도 가능하지만 그렇게 사용하진 않음. * - 클래스의 멤버변수 / 메서드는 하나의 멤버변수가 모든 객체에 공유(사용)할 때 사용 * * static이 안 붙은 메서드 / 멤버변수는 객체(인스턴스)의 멤버변수 / 메서드라고 한다. * - 객체의..