awspspgh 님의 블로그

오늘은 롯데월드 민속박물관 웹 사이트를 따라 만들어보겠습니다. ▣ 롯데월드 민속박물관 웹 사이트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 알뜰폰 기타  ▷ 출력 ..