033 css 연습 웬디 솔로 웹페이지 예제 만들기

Daily Study/Web Dev 2021.03.30

About Tracklist Schedule Gallery Notice WENDY 1st Mini Album - [Like Water] 2021 SM ENTERTAINMENT CO., Ltd. Distributed by DREAMUS COMPANY. KOREA. html,body { width: 100%; height: 100%; } body #wrap { width: 100%; height: 100%; background-image: url(../img/wendy1.png); background-size: cover; } #menu { position: fixed; left: 8%; width: 270px; height: 100%; background-color: #69a9e4; -webkit-box-..

032 javascript (2) 함수, 객체

Daily Study/Web Dev 2021.03.25

WEB HTML CSS JavaScript JavaScript JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including vid..

031 javascript 공부 (1) 비교연산자, boolean, 배열, 반복문 등

Daily Study/Web Dev 2021.03.23

어제부터 javascript 공부를 시작했다.  egoing 님의 유튜브 무료 강의를 듣고 있는데 전에 html, css 강의와는 달리 포괄적인 개념에 대해 이해시키고 간단한 예제를 실행해보는 거라서 아마 htm, css 공부하던 것처럼 코드가 형태로 남을 것 같진 않다. 강의를 보고 내가 따로 써봐야 제대로 알게 될 것 같다. 어제는 딱히 남길 내용은 없었고 오늘은 비교연산자, boolean, 배열, 반복문 까지 했다. WEB HTML CSS JavaScript JavaScript JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-pa..

030 html css 연습

Daily Study/Web Dev 2021.03.23

irene.redvelvet.com seulgi.redvelvet.com wendy.redvelvet.com joy.redvelvet.com yeri.redvelvet.com 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, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, cap..

029 웹페이지 예제 실습 (3) script 적용 및 호스팅

Daily Study/Web Dev 2021.03.18

// map window.onload = function(){ var mymap = document.getElementById('map'); var latlng = new google.maps.LatLng(37.497673,127.0277946); var gmap = new google.maps.Map( mymap, { zoom: 16, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }); // ICON pointer var marker = new google.maps.Marker({ position: latlng, map: gmap, title:'강남역' }); google.maps.event.addListener(marker, 'click', f..

028 웹사이트 예제 실습 (2) css 적용

Daily Study/Web Dev 2021.03.18

skip navigation skip to Content Logo Main navigation Main menu Team Work Price Contact Search Red Velvet TEAM MEMBERS Red and Velvet, different two themes. Irene Leader, Main Rapper Seulgi Main Dancer, Lead Vocal Wendy Main Vocal Joy Lead Rapper, Sub Vocal Yeri Sub Vocal, Sub Rapper MEMBERSHIP Choose a membership plan that fits your needs. REVELUV Basic 10GB Storage 10 Emails 10 Domains Endless ..

027 웹사이트 예제 실습 (1) html 마크업

Daily Study/Web Dev 2021.03.15

skip navigation skip to Content Logo Main navigation Main menu Team Work Price Contact Search Learn w3.css OUR TEAM Meet the team - our office rats: Irene Leader, Main Rapper Seulgi Main Dancer, Lead Vocal Wendy Main Vocal Joy Lead Rapper, Sub Vocal Yeri Sub Vocal, Sub Rapper PRICING Choose a pricing plan that fits your needs. Basic 10GB Storage 10 Emails 10 Domains Endless Support $ 10 per mont..

026 media query 반응형 웹, 반응형 웹페이지 예제 실습

Daily Study/Web Dev 2021.03.09

LOGO Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Omnis consequuntur doloremque optio, quia rem doloribus fuga, iure deleniti libero. Maiores voluptates debitis iusto accusamus aliquid sunt excepturi necessitatibus, eos dolor vel officia neque velit illum consequatur aspernatur sequi iste commodi culpa eaque praesentium hic quaerat earum autem. Voluptate eos error sed, corporis ess..

025 CSS3 공부 (4) transform, filter

Daily Study/Web Dev 2021.03.05

translate matrix rotate scale 1 2 3 4 5 6 XYZ 축을 활용해서 transform으로 만든 3d 애니메이션 움짤은 좀 끊기는데 실제로 보면 너무 부드러워서 좀 충격적이었다. blur brightness contrast drop-shadow hue-rotate grayscale invert opacity sepia filter효과 9가지 굳이 포토샵이나 일러 안거치고 css에서 바로 어느정도 편집이 가능하고 일단 결과물의 차이도 없고 훨씬 가볍다. 확실히 인터랙션이 가능한 영역으로 오니까 좀 더 와닿고 어떻게 써야될지 내가 전에 xd로 노가다하던 것들을 어떻게 표현해야될지 좀 감이 온다. 그리고 놀랍게도 너무너무너무너무너무 가볍고 부드러워서 충격적이다. 확실히 인터랙션이 생..

024 CSS3 공부 (3) transition, transform, animation

Daily Study/Web Dev 2021.03.04

호버하면 width가 100%까지 1초에 걸쳐서 5단계에 걸쳐서 transition하게 하기 steps로 움직이는 transition을 보니까 갑자기 고전게임 로딩되는거처럼 삐리릭삐리릭 이미지나 텍스트가 나타나는걸 표현해보고 싶어서 한 연습 근데 한 방향 말고 왼쪽 오른쪽 왼쪽 오른쪽 주거니받거니 하게 하고 싶었는데 방법을 못찾았다. transform 적용한 애니메이션 Wendy 손승완 1994.02.21. ~ 대한민국의 가수이다. 5인조 걸그룹 레드벨벳의 멤버이며, 팀에서 메인보컬을 맡고 있다. 아까 transition으로 표현하려고 했다가 실패했던걸 animation으로 일단 원하던대로는 구현했다. 근데 뭔가 이거보다 훨씬 좋은 코드가 있을 것 같긴 한데 지금 내 방식은 사진영역이랑 텍스트 영역을 깔..