티스토리

Dev다D

검색하기

블로그 홈

Dev다D

sincerity.tistory.com/m

a growing developer. 🌱

구독자: 238

방명록 방문하기

반응형

주요 글 목록

[jQuery 활용하기] 04. 프로젝트: 나만의 포트폴리오 포트폴리오 IV: 막대기 애니메이션 'About' 섹션에 나의 스킬 여섯 개가 나열되어 있습니다. 'About' 섹션에 다다랐을 때 해당 스킬의 퍼센티지(%)만큼 파란 막대기가 서서히 색칠되도록 해주세요. 참고로 회색 막대기는 클래스 이름이 'bar'인 요소이고, 그 안에 클래스 이름이 'inner-bar'인 요소가 파란 막대기입니다. function scrollHandler() { if ($(window).scrollTop() >= $('.about').position().top) { $('.menu-right button').css('color', '#4a4a4a'); $('.skill').each(function () { var skill = $(this); var percentage = skill.. 공감수 0 댓글수 0 2021. 2. 24.
[jQuery 활용하기] 04. 프로젝트: 나만의 포트폴리오 포트폴리오 III: 멋있게 나타내기 각 섹션의 내용은 'vertical-center'라는 클래스 이름의 'div'로 둘러싸여 있습니다. CSS 파일을 살펴보시면 'vertical-center'에는 이런 스타일이 적용되어 있는데요. .vertical-center { opacity: 0; position: relative; top: 100px; } 'opacity'가 '0' 으로 되어 있기 때문에 현재는 내용이 보이지 않는 거죠. 그리고 'top'이 '100px'로 되어 있어서 살짝 아래쪽에 위치하고 있습니다. 스크롤을 해서 각 섹션에 다다르면 해당 섹션의 'vertical-center' 요소가 보이면서 정가운데로 1초 이내에 서서히 올라오도록 만들어주세요. ('opacity'가 '1'까지, 'top'이 '.. 공감수 0 댓글수 0 2021. 2. 24.
[jQuery 활용하기] 04. 프로젝트: 나만의 포트폴리오 포트폴리오 II: 섹션 스크롤 이제 메뉴의 색상은 잘 나오는데, 클릭하면 동작을 하지 않습니다. 네비게이션바의 'About' 메뉴를 클릭하면 'about' 섹션으로 스크롤하도록, 그리고 'Contact' 메뉴를 클릭하면 'contact' 섹션으로 스크롤하도록 코드를 작성해주세요. 스크롤은 1초 안에 부드럽게 움직여야 합니다. function scrollHandler() { if ($(window).scrollTop() >= $('.about').position().top) { $('.menu-right button').css('color', '#4a4a4a'); } else { $('.menu-right button').css('color', 'white') } } $(window).on('scroll'.. 공감수 0 댓글수 0 2021. 2. 24.
[jQuery 활용하기] 04. 프로젝트: 나만의 포트폴리오 포트폴리오 I: 메뉴 색 바꾸기 첫 번째로 메뉴의 폰트 색상을 바꿔봅시다. 포트폴리오 사이트에는 섹션이 세 개 있습니다. 'header' 섹션 'about' 섹션 'contact' 섹션 'header' 섹션에 있을 때는 네비게이션바의 메뉴가 흰색으로 설정되어 있는데요. 'about' 섹션과 'contact' 섹션으로 이동하면 메뉴가 잘 보이도록 폰트 색상이 #4A4A4A로 바꿔주세요. function scrollHandler() { if ($(window).scrollTop() >= $('.about').position().top) { $('.menu-right button').css('color', '#4a4a4a'); } else { $('.menu-right button').css('color', .. 공감수 0 댓글수 0 2021. 2. 24.
[jQuery 활용하기] 03. jQuery 2 음악 스트리밍 사이트 III HTML 파일을 보시면 'to-top-btn'이라는 클래스의 버튼이 있습니다. .to-top-btn { display: none; } 하지만 현재로서는 버튼이 display: none;으로 숨어 있기 때문에 보이지 않습니다. 사용자가 스크롤을 해서 사이트의 맨 밑으로 내려가면 이 버튼이 서서히 나타나도록 해주세요. 이 버튼을 누르면 다시 맨 위로 스크롤되면서 버튼은 다시 사라집니다. function scrollHandler() { var windowBottom = $(window).scrollTop() + $(window).height(); // each문 사용 $('.playlist').each(function() { var playlist = $(this); var pla.. 공감수 0 댓글수 0 2021. 2. 23.
[jQuery 활용하기] 03. jQuery 2 음악 스트리밍 사이트 I 스크롤을 하면서 플레이리스트가 스르륵 나타나는 효과를 만들어봅시다. 우선 'playlist' 클래스에 적용된 스타일을 살펴봅시다. .playlist { opacity: 0; } 'playlist'는 처음에 opacity가 0이기 때문에 보이지 않는데요. 'playlist'가 브라우저에 반 이상 걸치면 opacity가 서서히 1로 바뀌어야 합니다. 그 과정에서 반복을 해야 하는 일이 있으면, each 대신 for문을 사용해주세요. each는 다음 과제에서 사용할 것입니다. 인기차트 추천음악 뮤직비디오 회원가입 로그인 인기 검색어 아이유 (IU) 방탄소년단 (BTS) 레드벨벳 아이콘 (iKON) 멜로망스 다비치 윤딴딴 수지 김동률 폴킴 수면 꿀잠 자게 해줄 잔잔한 음악 플레이리스트 .. 공감수 0 댓글수 0 2021. 2. 23.
[jQuery 활용하기] 03. jQuery 2 홀짝 each 반복문을 사용해서 '짝수', '홀수' 버튼을 완성해주세요. 참고로, .card라는 클래스를 가지고 있는 태그를 파란색으로 바꿔주려면 .selected라는 클래스를 추가해주면 됩니다. css/styles.css 파일에 정의된 코드를 참고하세요. /* 선택된 카드 */ .card.selected { background: #3E50B4; /* 파란색 */ color: white; } 짝수와 홀수 선택하기 13 3 14 7 22 38 17 15 11 10 22 31 32 41 10 85 17 82 70 5 53 7 4 29 짝수 홀수 * { box-sizing: border-box; } body { margin: 0; min-width: 960px; background: #eee; font-fam.. 공감수 0 댓글수 0 2021. 2. 22.
[jQuery 활용하기] 03. jQuery 2 Furniture Shop '가구계의 아마존', Furniture Shop이 블랙 프라이데이를 맞아 할인 쿠폰을 제공하려고 합니다. '쿠폰 받기' 버튼을 누르면 팝업이 1초 이내에 부드럽게 나타나고, '확인' 버튼 또는 키보드의 esc 키를 누르면 팝업이 1초 이내에 부드럽게 없어져야 합니다. SHOP CART LOGIN 블랙 프라이데이 슈퍼 세일 최대 50% 할인의 혜택을 받아보세요! 쿠폰 받기 다운 완료! 내 쿠폰함에서 확인하세요! 확인 * { box-sizing: border-box; } body { margin: 0; min-width: 992px; font-family: "Helvetica"; } /* navbar */ .navbar { height: 75px; padding-left: 30px.. 공감수 0 댓글수 0 2021. 2. 21.
[jQuery 활용하기] 01. jQuery 1 깨깨오톡 주어진 HTML/CSS 코드를 분석한 후, 자바스크립트로 아래의 조건들을 따라서 기능을 추가해주세요: 메시지를 입력하고 '전송' 버튼을 클릭하면 새로운 말풍선이 생깁니다. 친구가 보낸 말풍선은 .friend-bubble 클래스를 갖고 있지만, 내가 보낸 말풍선은 .my-bubble 클래스를 갖고 있습니다. 메시지가 전송되면 는 다시 빈 칸이 됩니다. 가 비어 있으면 메시지는 보내지지 않습니다. siri 잘 지내? 자니? 전송 * { box-sizing: border-box; } body { background-image: url('background.jpg'); font-family: 'Noto Sans KR', sans-serif; } .chat-container { margin: 60px a.. 공감수 0 댓글수 0 2021. 2. 19.
[jQuery 활용하기] 01. jQuery 1 청기 백기 II 저번에는 내려간 깃발이 다시 올라오지 않았는데, 이번에는 다시 깃발이 올라오도록 써주세요. 그리고 재미를 조금 더하기 위해, 깃발이 1초 뒤에 올라오도록 써줄 텐데요. setTimeout 함수를 사용하면 동작을 몇 초 후에 실행되도록 설정할 수 있습니다. // someFunction 함수가 1초 후 실행 setTimeout(someFunction, 1000); // someFunction 함수가 3.5초 후 실행 setTimeout(someFunction, 3500); 청기 내려 청기 내리지 말고 백기 내려 점선 청기 내려 * { box-sizing: border-box; } body { font-family: 'Noto Sans KR', sans-serif; text-align: cen.. 공감수 0 댓글수 0 2021. 2. 19.
[jQuery 활용하기] 01. jQuery 1 청기 백기 I “청기 내려. 백기 올려. 청기 내리지 말고 백기 올려!” '청기 백기' 게임 아시죠? 참가자들이 한 손에는 청기를, 다른 손에는 백기를 들고 있다가 사회자가 말하는 대로 동작을 해야 하는 게임입니다. 예를 들어, 사회자가 "청기 내리지 말고 백기 들어!"라고 외치면 그대로 따라해야 합니다. 만약 실수로 청기를 내린다거나 백기를 들지 않으면 탈락하게 됩니다. 이 게임을 한 번 만들어봅시다. 주어진 코드를 실행해보시면 총 6개의 깃발과, 3개의 버튼이 있습니다. HTML 코드와 CSS 코드를 분석한 후, 앞서 배운 jQuery 선택자와 메소드(함수)를 이용해, 각 버튼이 제대로 동작하도록 스크립트를 작성해보세요. 깃발이 다시 올라오는 기능은 청기 백기 II 과제에서 구현할 테니, 일단은 내려.. 공감수 0 댓글수 0 2021. 2. 19.
[jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 드럼 시퀀서 III 마지막 파트에서는: 키보드로 1에서 9까지의 숫자를 누르면 해당 드럼 소리가 나도록 해주세요. 같은 버튼을 빠르게 여러 번 눌러도 소리가 끊어지지 않아야 합니다. 누를 때마다 매번 드럼 소리를 처음부터 재생해주세요. 숫자 1에서 9까지가 아닌 다른 값을 입력하면 무시되어야 합니다. 예를 들어서 키보드로 q를 입력하면 오류도 나지 않고, 다른 특별한 동작도 없어야 합니다. 소리가 녹화되지 않아서 아쉽다. 모든 버튼이 다 다른 소리가 나게 구성되어있다. 1 Kick 2 Closed Hi-hat 3 Open Hi-hat 4 Clap 5 Snap 6 Crash 7 Tom 1 8 Tom 2 9 Tambourine * { box-sizing: border-box; } body { margin: .. 공감수 0 댓글수 0 2021. 2. 19.
[jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 드럼 시퀀서 II 두 번째 파트에서는: 키보드로 숫자 1에서 숫자 9를 누르면 해당 'cell'에 'playing' 클래스가 추가되어야 합니다. 예를 들어서 숫자 1을 누르면 #cell1에 'playing' 클래스가 추가되고, 5을 누르면 #cell5에 'playing' 클래스가 추가되는 거죠. 키보드에서 손을 떼면 모든 'cell'에서 'playing' 클래스를 없애줘야 합니다. 아직 드럼 소리는 넣지 마세요. 1 Kick 2 Closed Hi-hat 3 Open Hi-hat 4 Clap 5 Snap 6 Crash 7 Tom 1 8 Tom 2 9 Tambourine * { box-sizing: border-box; } body { margin: 0; font-family: "Helvetica"; bac.. 공감수 0 댓글수 0 2021. 2. 19.
[jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 드럼 시퀀서 I 요즘의 음악 트렌드를 따라가기 위해 비트메이킹을 배워보려고 합니다. 하지만 '런치패드'를 살 돈이 없기 때문에 자바스크립트로 대안을 만들 건데요. 우선 만들려고 하는 사이트의 완성본을 살펴보세요. 오른쪽에는 루프 음원을 실행할 수 있는 '재생 버튼'과 '정지 버튼'이 있고, 키보드로 숫자 1에서 9까지 입력하면 해당 드럼 소리가 재생됩니다. 과제를 세 파트로 나누어 진행해볼게요. 이번 첫 번째 파트에서는: #play-btn을 누르면 loop.mp3 파일이 실행되어야 합니다. #stop-btn을 누르면 loop.mp3 파일이 멈추고, 다시 음원의 처음으로 돌아가야 합니다. 1 Kick 2 Closed Hi-hat 3 Open Hi-hat 4 Clap 5 Snap 6 Crash 7 Tom 1.. 공감수 0 댓글수 0 2021. 2. 19.
[jQuery 시작하기] 02. 과제로 워밍업 D-DAY 계산기 만난지 며칠 되었는지 계산해주는 웹사이트를 만들어보려고 합니다. 시작 날짜가 제대로 입력되지 않은 채로 버튼을 누를 경우, '시작 날짜를 입력해주세요!'라는 메시지를 알러트창으로 띄웁니다. 5월 13일에 만났고 현재 5월 13일이면 '만난지 1일째'입니다. 5월 13일에 만났고 현재 5월 14일이면 '만난지 2일째'입니다. 만난지 00일째 시작일 결과 보기 * { box-sizing: border-box; } body { margin: 0; min-width: 992px; font-family: "Helvetica"; } /* navigation bar */ .navbar { height: 66px; background-color: white; text-align: center; lin.. 공감수 0 댓글수 0 2021. 2. 17.
[jQuery 시작하기] 02. 과제로 워밍업 이메일 광고 처음에는 'Send' 버튼이 회색(#9E9E9E)으로 비활성화되어 있다가, 방문자가 올바른 형태의 이메일을 입력하면 파란색(#4D79C2)으로 활성화되어야 합니다. 이메일에는 @가 포함되어 있어야 한다. @ 뒤에는 최소 1개 이상의 .이 포함되어 있어야 한다. 이메일의 필수요소인 '@', '.'이 입력되어야 send버튼 활성화! PRODUCTS BLOG HOME ABOUT LOGIN 더 많은 정보와 이벤트 등을 받아보고 싶으면 이메일을 입력해주세요! * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; margin: 0; min-width: 992px; } /* Navigation Bar */ .navbar { pos.. 공감수 0 댓글수 0 2021. 2. 17.
[jQuery 시작하기] 02. 과제로 워밍업 데이터 분석하기 배열 birthdayData에는 11개의 문자열이 있습니다. 각 문자열에는 생년월일 8자리와 이름이 나와 있고요. 이 중 미성년자만 골라서 출력해주는 함수를 써봅시다. 2017년 기준으로 98년생까지 성년, 99년생부터가 미성년자입니다. var birthdayData = [ '20010309전소미', '19960828김세정', '19991112최유정', '19960209김청하', '19990719김소혜', '19981216주결경', '19971201정채연', '19991204김도연', '19991204강미나', '19951218임나영', '19990803유연정' ]; function printMinors(arr) { console.log("미성년자 명단:"); arr = 1998; for.. 공감수 0 댓글수 0 2021. 2. 17.
[jQuery 시작하기] 02. 과제로 워밍업 문자 개수 세기 주어진 단어에 특정 알파벳이 몇 번 들어가는지 세어주는 프로그램을 작성해봅시다. 예를 들어 countCharacter('AbaCedEA', 'E') 함수는 'AbaCedEA' 에서 E가 몇 번 들어갔는지 세는 함수로 실행결과는 2입니다. 여기서 주의해야 할 점은 대소문자를 구분하지 않는 다는 점입니다. countA(word) 함수는 단어에 'A'가 몇 번 들어가는지 출력하는 함수입니다. 마찬가지로 대소문자를 구분하지 않습니다. // 주어진 단어(word)에 특정 알파벳(ch)이 몇 번 들어가는지 세어주는 함수 function countCharacter(word, ch) { var count = 0; let big = word.toUpperCase(); for (let k = 0; k < .. 공감수 0 댓글수 0 2021. 2. 17.
[jQuery 시작하기] 01. HTML, CSS와의 콜라보레이션 아이디 비밀번호 검사 자바스크립트를 활용해서 '로그인 페이지'를 수정하려고 하는데요. 아이디 혹은 비밀번호 둘 중 하나라도 입력란이 비어있다면, 로그인 버튼이 '비활성화'되어서 버튼의 배경색이 #9B9B9B로 설정되어야 합니다. 사용자가 아이디와 비밀번호를 둘 다 입력하면, 로그인 버튼이 '활성화'되어서 버튼의 배경색이 #1BBC9B로 바뀌어야 합니다. 아이디와 비밀번호 모두 입력할 경우에만 로그인 버튼 활성화 비밀번호를 잊어버리셨나요? * { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } body { margin: 0; background-color: #1BBC9B; } .login-form { width: 300px; backg.. 공감수 1 댓글수 0 2021. 2. 16.
[jQuery 시작하기] 01. HTML, CSS와의 콜라보레이션 폰트 굵기 바꾸기 Home Seoul Tokyo Paris #logo { display: block; margin-left: auto; margin-right: auto; margin-top: 80px; } #menu { text-align: center; margin-top: 60px; margin-bottom: 60px; } #menu a { margin-left: 10px; margin-right: 10px; font-size: 16px; color: #58595b; text-decoration: none; font-family: Helvetica, Arial, sans-serif; } #menu a:first-child { font-weight: bold; } #photo { display: bl.. 공감수 0 댓글수 0 2021. 2. 10.
[웹 퍼블리싱] 03. 반응형 웹 퍼블리싱 이노 옷걸이처럼 걸어 놓을 수 있는 블루투스 스피커 '이노'를 홍보하는 사이트를 만들어보려고 합니다. 위에 있는 도면을 따라 반응형 웹사이트를 만들어주세요. 그리드는 반응형 그리드 과제에서 만든 것을 그대로 사용하면 됩니다! 초록색 선은 padding, 빨간색 선은 margin, 파란색 선은 가운데 정렬(가로 혹은 세로)을 뜻합니다. 모든 사진은 background-image를 통해 넣었습니다. In'o 글자의 font-size는 20px 글자색은 white입니다. In'o 글자가 속한 div 태그의 background-color 는 #353535입니다. 결과물 IN'O Portfolio Make Hardware Soft IN'O is a hanger-type bluetooth speaker that d.. 공감수 1 댓글수 0 2021. 2. 9.
[웹 퍼블리싱] 03. 반응형 웹 퍼블리싱 반응형 그리드 크게 세 가지로 나누어집니다. 왼쪽: 모바일 사이즈 (767px 이하) 가운데: 타블릿 사이즈 (768px 이상, 991px 이하) 오른쪽: 데스크탑 사이즈 (992px 이상) 반응형 그리드 결과물 body { margin: 0; } div { float: left; } #div1 { background-color: #FF0000; width: 100%; height: 60px; } #div2 { background-color: #FFA500; width: 100%; height: 350px; } #div3 { background-color: #FFFF00; width: 100%; height: 320px; } #div4 { background-color: #008000; width: 10.. 공감수 1 댓글수 0 2021. 2. 9.
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 SimpleShop 코드잇의 SimpleShop 쇼핑몰 페이지를 완성해보세요! 참고하세요: 네비게이션 바의 height 는 60px 입니다. 네비게이션 바의 메뉴들은 클릭하면 페이지 최상단으로 이동합니다. # 를 활용해주세요. hero_header.jpg 는 배경이미지로 들어가고, 배경이미지가 들어가는 영역은 450px 의 height를 가집니다. 각 상품들을 클릭하면 페이지 최상단으로로 이동합니다. 이미지의 테두리는 클릭 영역 표시를 위한 것이고, 직접 구현하지는 않아도 됩니다. 페이스북, 인스타그램, 트위터 아이콘의 height는 20px로 지정해 주세요. Contact Shop Cart Login Our New Products Sunglasses 49,000 Tassel Loafer 89,000 B.. 공감수 0 댓글수 0 2021. 2. 9.
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 네비게이션 바 메뉴 네비게이션 바 로고 과제에 이어서 네비게이션 바에 메뉴를 넣어보세요. 세 메뉴는 각각 태그 안의 태그이고, 태그 안에 묶여 있습니다. float의 개념을 잘 활용해보세요! 수업 회원가입 로그인 코딩, 스펙이 아니라 필수입니다. 코드잇은 코딩을 통해 생각하는 법을 가르칩니다. 더 알아보기 body { margin: 0; } #navbar { padding: 0 20px; border-bottom: 1px solid #eee; overflow: hidden; background-color: white; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.50); height: 60px; } #logo { float: left; line-height: 60px; } #logo.. 공감수 0 댓글수 0 2021. 2. 9.
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 파라다이스 파크 놀이 공원 '파라다이스 파크'의 웹사이트를 만들어보려고 합니다. 여러분이 할 일은 사이트 좌측에 있는 네비게이션 바를 채워 넣는 것입니다. 'HOME', 'EVENT', 'TICKET', 'MEMBERSHIP', 'NOTICE'는 사이트 메뉴입니다. 각각 다른 태그 안에 있는 태그입니다. 태그는 모두 태그에 묶여 있습니다. 빨간 선은 margin, 초록 선은 padding, 파란 선은 '가운데 정렬'입니다. 페이스북 아이콘은 width를 22px로, 트위터 아이콘은 width를 25px로 지정해 주세요. HOME EVENT TICKET MEMBERSHIP NOTICE Welcome to Paradise Park! Learn More body { margin: 0; min-width: 76.. 공감수 0 댓글수 0 2021. 2. 8.
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 코딩의 민족 그리드 코딩의 민족 넌 코딩할때가 제일 이뻐 코딩에 빠진 닭 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코코 스시 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코데리아 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코가네 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 * { box-sizing: border-box; } body { background-color: #f0e8d9; } h1 { text-align: center; font-size: 64px; color: #58595B; margin-top: 75px; margin-bottom: 30px; } h2 { text-align: center; font-size: 3.. 공감수 0 댓글수 0 2021. 2. 8.
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 그리드 연습 위와 같은 그리드 레이아웃을 만들어주세요! body { margin: 0; } /* 전체 */ div { width: 100%; height: 800px; float: left; } /* 개별 */ #red { background-color: #FF0000; width: 100%; height: 200px; } #orange { background-color: #FFA500; width: 25%; height: 200px; } #yellow { background-color: #FFFF00; width: 50%; height: 200px; } #green { background-color: #008000; width: 25%; height: 200px; } #blue { background-.. 공감수 0 댓글수 0 2021. 2. 8.
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 신문 광고 광고의 가로 길이는 180px 입니다. 빨간색으로 나와 있는 수치를 보고 margin도 꼭 넣어주세요! 4차 산업혁명의 시대, 소프트웨어 교육은 필수 코드잇 강영훈 대표 '소프트웨어 강국되려면 컴퓨터적 사고방식 필요해' "누구나 프로그래밍을 배워야한다. 사고하는 방법을 가르쳐주기 때문이다." 故 스티브잡스 애플 창업자가 했던 말이다. 소프트웨어는 4차 산업혁명의 흐름이다. 인공지능, IoT, 빅데이터, 3D프린팅, 가상 현실, 증강현실 등 모두 소프트웨어와 긴밀한 연관성을 갖고 있는 분야이다. 미래의 흐름에 발맞춰 정부는 2018년부터 초, 중, 고등학교에서 소프트웨어 교육을 전면 실시할 계획이다. 이에 앞서 지난해와 올해 미래부, 교육부에서 900개의 연구기관 및 선도학교를 정해 교육하고 있.. 공감수 0 댓글수 0 2021. 2. 8.
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 우표 붙이기 Absolute 포지셔닝 개념을 이용해서 우표와 주소를 올바른 곳에 위치해주세요. siri Kim 1234 ENTP #101 .env-div { width: 500px; height: 232px; position: relative; } .address { font-family: cursive; position: absolute; left: 30px; bottom: 30px; } .stamp { position: absolute; right: 30px; top: 30px; } 본 내용은 Codeit의 '웹 퍼블리싱' 강의를 참고하여 작성한 내용입니다. 공감수 0 댓글수 0 2021. 2. 8.
[웹 퍼블리싱] 02. HTML/CSS 핵심개념 명언 두 따옴표는 폰트 크기는 96px(32px의 300%)입니다. 위 사진에서 빨간 줄은 margin입니다. 위 사진에서 초록 줄은 포지셔닝을 통한 이동입니다. “ 정상에 오르고 싶다는 생각만으로 정상에 오르는게 아니야, 올라야지 “ 조승우 .quote { font-size: 32px; line-height: 32px; text-align: center; margin-top: 75px; font-family: 'Do Hyeon', sans-serif; } .figure { margin-top: 50px; } .qmark { font-size: 96px; position: relative; } .open-qmark { margin-right: 15px; top: 20px } .close-qmark { m.. 공감수 0 댓글수 0 2021. 2. 8.

반응형

LIST

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.