소개
게시글
질문&답변
2022.07.30
선생님 코딩좀 봐주세요..
// HTML다 실행후, MAIN JS를 읽어라 $ ( function (){ // Slick slider - welcome $ ( ' .slideshow ' ) . slick ( { infinite : true , dots : false , autoplay : true , autoplaySpeed : 2000 , fade : true , speed : 1000 , pauseOnHover : false } ) ; // Typing Script $ ( ' #typing ' ) . typeIt ( { strings : [ " Business strategy. " , " Innovation Plan. " , " Creative Idea. " ] , // 타이핑 텍스트 입력 speed : 100 , // 알파벳 타이핑 속도 autoStart : true , // 자동 재생 사용 breakLines : false , // 줄 바꿈 사용안함 loop : true } ) ; } ) ; // Accordion FAQ Slide $ ( function (){ $ ( ' .faq-desc ' ) . eq ( 0 ) . show () ; $ ( ' .faq-title ' ) . click ( function (){ $ ( this ) . next () . stop () . slideDown () ; $ ( this ) . parent () . siblings () . children ( ' .faq-desc ' ) . stop () . slideUp () ; $ ( this ) . parent () . addClass ( ' active ' ) ; $ ( this ) . parent () . siblings () . removeClass ( ' active ' ) ; } ) ; } ) ; // Slick slider $ ( ' .review-slider ' ) . slick ( { infinite : true , // dots: true, autoplay : true , autoplaySpeed : 3000 , } ) ;
- 1
- 3
- 206
질문&답변
2022.07.30
선생님 코딩좀 봐주세요..
/* Font */ @import url (' https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;1,400&display=swap '); /* font-family: 'Source Sans Pro', sans-serif; */ @import url (' https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600&display=swap '); /* font-family: 'Gothic A1', sans-serif; */ /* */ /* Setting CSS */ /* 박스사이징 고정 */ * { box-sizing : border-box ; } /* A태그 색상 및 데코 none */ a { text-decoration : none ; color :# 222 ; } /* 버튼,인풋에 기본적으로 들어가있는 아웃라인 제거 */ button , input { outline : none ; } /* h태그들 제거, 마진 탑만 0, 라인하이트 설정 */ h1 , h2 , h3 , h4 , h5 , h6 { margin-top : 0 ; font-weight : normal ; line-height : 1.5em ; } /* Default CSS */ /* 바디에 글꼴설정, a태그와 같은 글씨색상 */ body { font-family : ' Gothic A1 ' , sans-serif ; font-size : 18px ; line-height : 1.7em ; margin : 0 ; background-color : white ; color :# 222 ; } section { padding : 100px 0px ; } /* Header */ header { position : fixed ; width : 100% ; z-index : 999 ; } . header-inner { width : 1300px ; margin : auto ; overflow : hidden ; padding-top : 30px ; padding-bottom : 15px ; } . logo { float : left ; } . logo img { margin-top : -5px ; } . gnb { float : right ; } . gnb a { margin : 10px ; font-size : 16px ; } /* Welome */ . welcome { height : 90vh ; position : relative ; } . welcome-heading { position : absolute ; top : 50% ; transform : translateY ( -50% ); left : 150px ; text-align : center ; width : 750px ; } . welcome-heading span { font-size : 24px ; } /* @@@@@@@@@@@@ Slickslider arrow delete @@@@@@@@@@@@@@*/ . slideshow . slick-arrow { display : none !important ; } . slideshow img { outline : none ; } /* mouse wheel */ . mouse { position : absolute ; border : 2px solid # 00A69C ; width : 30px ; height : 45px ; border-radius : 40% ; bottom : 120px ; left : 200px ; opacity : 0.15 ; } . wheel { width : 4px ; height : 15px ; background-color : # 00A69C ; position : absolute ; border-radius : 4px ; left : 11px ; top : 5px ; animation : wheel 2s linear infinite ; } @keyframes wheel { 0% { top : 0 ;} 50% { top : 15% ;} 100% { top : 0 ;} } . gnb a { transition : 0.5s ; } . gnb a : hover { color : white ; background-color : # 00A69C ; } . gnb a { padding : 6px 8px ; border-radius : 5px ; } . welcome-heading h1 { font-family : ' Source Sans Pro ' , sans-serif ; font-size : 55px ; font-weight : 600 ; line-height : 1.2em ; margin-bottom : 30px ; margin-top : 10px ; } . welcome-heading h1 em { display : block ; margin-top : 13px ; font-style : normal ; color :# eb4d4b ; } . welcome-heading p { padding : 0 100px ; margin-bottom : 30px ; } . welcome-btns . btn { display : inline-block ; width : 150px ; padding : 5px ; border-radius : 5px ; margin-right : 10px ; transition : 0.5s ; } . btn . start { background-color : royalblue ; color : white ; } . btn . start : hover { background-color : black ; transform : translateY ( -5px ); } . btn . guide { background-color : white ; color :# 222 ; } . btn . guide : hover { color : white ; background-color : # 222 ; transform : translateY ( -5px ); } /* ceo-acess */ . ceo-access { } . ceo-inner , . access-inner { width : 1300px ; margin : auto ; } . ceo-content { overflow : hidden ; border-bottom : 1px solid # eee ; padding : 50px 0 ; } . ceo-content > div { float : left ; width : 50% ; } . ceo-left { padding-right : 50px ; } . ceo-left img { width : 30px ; filter : invert ( 36% ) sepia ( 63% ) saturate ( 1781% ) hue-rotate ( 150deg ) brightness ( 100% ) contrast ( 101% ); } . ceo-right { text-align : center ; } . ceo-left h3 { font-weight : bold ; margin-bottom : 20px ; } . ceo-right > div { float : left ; padding : 20px ; } . ceo-msg { width : 60% ; } . ceo-msg h3 { font-size : 29px ; color :# 00A69C ; } . ceo-msg h3 big { display : block ; } . ceo-photo { width : 40% ; } . ceo-photo img { border-radius : 15px ; width : 100% ; } . access-content { overflow : hidden ; padding : 50px 0 ; } . access-content > div { float : left ; width : 50% ; } . access-left { padding-top : 60px ; } . access-right { text-align : center ; } . btn-download { padding-top : 30px ; } . btn-download a { margin-right : 10px ; } /* banner */ . banner { background-color : # 69acfe ; } . banner-inner { width : 1300px ; margin : auto ; padding-left : 40px ; } . banner-content { overflow : hidden ; padding : 40px 0 ; } . banner-content > div { float : left ; width : 50% ; } . tab-btn { } input [ name = tabmenu ]{ display : none ; } . tabs { } . tab-btn label { width : 30% ; display : inline-block ; text-align : center ; margin : 8px ; cursor : pointer ; } . tab-btn label em { background-color : # fff ; display : inline-block ; width : 110px ; height : 110px ; border-radius : 50% ; text-align : center ; padding-top : 21px ; } . tab-btn label em img { width : 60px ; filter : invert ( 57% ) sepia ( 62% ) saturate ( 664% ) hue-rotate ( 186deg ) brightness ( 103% ) contrast ( 103% ); } . tab-btn label span { display : block ; text-align : center ; margin-top : 15px ; color : white ; } . tab { display : none ; color : white ; padding-top : 30px ; padding-left : 70px ; } . tab h2 { font-weight : bold ; font-size : 30px ; } /* Checked function */ input [ id = tab1 ]: checked ~ . tabs . tab1 , input [ id = tab2 ]: checked ~ . tabs . tab2 , input [ id = tab3 ]: checked ~ . tabs . tab3 { display : block ; } input [ id = tab1 ]: checked ~ . tab-btn label [ for = tab1 ] em , input [ id = tab2 ]: checked ~ . tab-btn label [ for = tab2 ] em , input [ id = tab3 ]: checked ~ . tab-btn label [ for = tab3 ] em { background-color : # 34495e ; } input [ id = tab1 ]: checked ~ . tab-btn label [ for = tab1 ] em img , input [ id = tab2 ]: checked ~ . tab-btn label [ for = tab2 ] em img , input [ id = tab3 ]: checked ~ . tab-btn label [ for = tab3 ] em img { filter : invert (); } input [ id = tab1 ]: checked ~ . tab-btn label [ for = tab1 ] span , input [ id = tab2 ]: checked ~ . tab-btn label [ for = tab2 ] span , input [ id = tab3 ]: checked ~ . tab-btn label [ for = tab3 ] span { color : black ; } /* feature */ . headline-share { margin-top : 80px ; text-align : center ; } . headline-share h1 { font-weight : bold ; font-size : 40px ; position : relative ; } . headline-share h1 : after { content : '' ; position : absolute ; height : 5px ; width : 80px ; background : linear-gradient (to right , # 1f8de6 , # 5ed6fe ); top : 130% ; left : 50% ; transform : translate ( -50% , -50% ); } . headline-share p { padding-top : 10px ; } . feature-inner { width : 1300px ; margin : auto ; } . feature-content { overflow : hidden ; margin : 100px 0 ; } . feature-content > div { float : left ; width : 50% ; text-align : center ; } . feature-about h2 { font-weight : bold ; font-size : 30px ; padding-top : 10px ; } . feature-about { padding : 0 20px ; padding-top : 80px ; } /* vision */ . vision-content { overflow : hidden ; } . vision-content > div { float : left ; width : 33.3333% ; height : 400px ; } . vision-item-desc { background-color : # f9f9f9 ; display : flex ; justify-content : center ; align-items : center ; } . vision-item-headline { width : 70% ; } . vision-item-desc h3 { font-size : 28px ; margin-bottom : 0 ; } . vision-item-desc hr { width : 45px ; height : 3px ; border : none ; background-color : purple ; display : inline-block ; } . vision-item-desc p { margin-top : 0 ; } . vision-item-photo img { width : 100% ; object-fit : cover ; height : inherit ; } /* faq */ . faq { /* display: none; */ } . faq-inner { width : 1300px ; margin : auto ; } . faq-content { } . faq-content > div { float : left ; width : 50% ; padding : 30px ; min-height : 800px ; } . faq-item { border : 1px solid # ddd ; border-radius : 10px ; margin-bottom : 15px ; } . faq-item > div { padding : 17px ; } . faq-title { color : skyblue ; cursor : pointer ; font-weight : bold ; } . faq-title : after { content : ' \f105 ' ; font-family : fontawesome ; float : right ; color : gray ; transition : 0.3s ; } . faq-desc { display : none ; } . awards-content { text-align : center ; } . award-image { position : relative ; /* border: 1px solid #000; */ margin-bottom : 40px ; } . award-image : after { content : ' July 21 1993 ' ; position : absolute ; background-color : black ; color : white ; width : 180px ; height : 40px ; text-transform : uppercase ; text-align : center ; line-height : 40px ; bottom : -20px ; left : 50% ; transform : translate ( -50% ); } . award-image img { width : 100% ; } . awards-content h2 { font-weight : bold ; font-size : 30px ; color : gold ; } . awards-content p { margin-bottom : 30px ; } . btn-awards { border : 1px solid # 000 ; padding : 12px 20px ; border-radius : 5px ; text-transform : uppercase ; transition : 0.3s ; } . btn-awards : hover { color : white ; border-color : transparent ; background-color : crimson ; } . faq-item . active { border : 1px solid skyblue ; } . faq-item . active . faq-title : after { color : skyblue ; transform : rotate ( 90deg ); } /* review */ . review { background-color : # f9f9f9 ; } . review-inner { width : 1300px ; margin : auto ; } . review-content { text-align : center ; width : 800px ; margin : auto ; } . slogan { font-size : 35px ; } . review-slider { padding : 0 50px ; } . review-slider div p { } . review-slider div p span { display : block ; font-weight : bold ; } . slick-dots . slick-dots li { margin : 0 ; } ul . slick-dots { margin-left : -45px ; } . review-slider . slick-prev : before , . review-slider . slick-next : before { margin-top : -50px ; } . review-slider . slick-prev : before { color : gray ; content : " \f104 " ; font-family : fontawesome ; font-size : 30px ; display : block ; } . review-slider . slick-next : before { color : gray ; content : " \f105 " ; font-family : fontawesome ; font-size : 30px ; display : block ; } /* focus */ . focus {} . focus-inner { width : 1300px ; margin : auto ; } . focus-item i { font-size : 10px ; } . focus-content { text-align : center ; } . start { padding : 10px ; } . focus-item { margin-top : 30px ; display : inline-block ; width : 30% ; padding : 0 50px ; } . focus-item img { width : 50px ; filter : invert ( 91% ) sepia ( 82% ) saturate ( 4535% ) hue-rotate ( 333deg ) brightness ( 100% ) contrast ( 95% ); } . focus-item h3 { font-weight : bold ; } . focus-item p {} /* guide */ /* news */ /* footer */
- 1
- 3
- 206
질문&답변
2022.07.24
왜 전 선생님과 화면이 다를까요?
확인했습니다 ㅎ.
- 1
- 3
- 174
질문&답변
2022.07.24
왜 전 선생님과 화면이 다를까요?
선생님은 코딩 입력하면 바로 위로 뜨던데 전 아래에만 떠서요..ㅠ 끝까지봐도그러네요 ㅠㅠ 상대주소로 입력은 수정해서 작성했습니다 (사진)
- 1
- 3
- 174
질문&답변
2022.07.24
따라했는데 이상합니ㅏㄷ..ㅠ
영상을 좀 더 끝까지봤으면 theme.css 들어갓을때 화면이 제 화면인건데 제가 바로 멈추고 계속 해결만하려고하니 안되었네요 ㅠㅠ죄송합니다. 그리고 상대주소로 넣는것도 배웠네요 감사합니다
- 1
- 2
- 158