173만명의 커뮤니티!! 함께 토론해봐요.
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="./js/jquery-2.1.4.js"></script> <!-- page scroll Effects js＆css --> <script src="./js/velocity/modernizr.js"></script> <script src="./js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="/js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css"> <!-- custom js＆css --> <script src="./js/custom.js"></script> <!-- 순서가 중요함 pc버전인 스타일 css가 먼저우선시 되야함 --> <link rel="stylesheet" href="./style.css"> <!-- 모바일 부분만 반응 css --> <link rel="stylesheet" href="./responsive.css"> </head> <!-- 애니메이션 속성들 --> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <!-- 네비게이션 부분 --> <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger active"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> <!-- .cd-vertical-nav --> </body> </html> $(function() { /* Trigger */ $('.trigger').cli(function(){ $(this).toggleClass('active') }) }) /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * {box-sizing: border-box;} ul { list-style: none;} a {text-decoration: none;} /* Default CSS */ body{ font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */ width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; /* 넘치는 부분 끊기 */ overflow: hidden; } /* Header */ header { position: fixed; top:0; left: 0; width: 100%; } .gnb-inner { /* bd+tab =보더 생성 */ /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; /* 높이값만큼 주면 중앙 정렬 */ line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: block; } .menu a{ } .gnb a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } 햄버거 버튼이 x로 바뀌지 않습니다 ㅠㅠ
ckrnckr12
2024-06-17T08:55:59.546Z
댓글 2
좋아요 0
조회수 242
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DesignWokrs Agency</title> <script src="./js/jquery-2.1.4.js"></script> <!-- page scroll Effects js＆css --> <script src="./js/velocity/velocity.min.js"></script> <script src="./js/velocity/velocity.ui.min.js"></script> <script src="/js/velocity/main.js"></script> <link rel="stylesheet" href="./js/velocity/velocity.css"> <!-- custom js＆css --> <!-- 순서가 중요함 pc버전인 스타일 css가 먼저우선시 되야함 --> <link rel="stylesheet" href="./style.css"> <!-- 모바일 부분만 반응 css --> <link rel="stylesheet" href="./responsive.css"> </head> <!-- 애니메이션 속성들 --> <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax --> <body data-hijacking="on" data-animation="rotate"> <div class="container"> <section class="cd-section visible"> <div> <div class="content"> <img src="./images/temp-section-01.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-02.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-03.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-04.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-05.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-06.jpg"> </div> </div> </section> <section class="cd-section"> <div> <div class="content"> <img src="./images/temp-section-07.jpg"> </div> </div> </section> <header> <div class="gnb-inner"> <div class="logo"> <a href="#none"><img src="images/logo.png"></a> </div> <!-- 네비게이션 부분 --> <div class="gnb"> <div class="menu"> <a href="#none">Home</a> <a href="#none">About</a> <a href="#none">Project</a> <a href="#none">Plan & History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> </nav> <!-- .cd-vertical-nav --> </body> </html> /* 모바일전용 */ /*pc min:최소너비 */ /* 모바일 기준 최대넓이 768을 넘지 못한다 */ @media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; }; /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: 0; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; }; /* Trigger */ .trigger{ display: block; border: 1px solid #000; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; cursor: pointer; }; }; /* pc버전 */ /* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * {box-sizing: border-box;} ul { list-style: none;} a {text-decoration: none;} /* Default CSS */ body{ font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background-color: #fff; } /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: #ddd; position: absolute; /* 연산함수 calc를 이용하여 섹션내에 삐저나오지 않고 들어오게함 */ width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; /* 넘치는 부분 끊기 */ overflow: hidden; } /* Header */ header { position: fixed; top:0; left: 0; width: 100%; } .gnb-inner { /* bd+tab =보더 생성 */ /* border: 1px solid #000; */ width: calc(100% - 40px); margin: auto; height: 60px; /* 높이값만큼 주면 중앙 정렬 */ line-height: 60px; } .logo { float: left; } .gnb { float: right; } .menu { display: block; } .menu a{ } .gnb a {} .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } 아까 질문드렸던 수강생입니다 추가하여 업로드 하였습니다
ckrnckr12
2024-06-14T08:03:50.961Z
댓글 2
좋아요 1
조회수 233
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
& History</a> <a href="#none">Awards</a> <a href="#none">Location</a> <a href="#none">Contact</a> </div> <div class="slogan">We design places, not projects.</div> </div> <!-- 햄버거 버튼 --> <div class="trigger"> <span></span> <span></span> <span></span> </div> </div> </header> </div> @media (max-width: 768px) { /* Entire Layout(전체적인 레이아웃) */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; left: 20px; bottom: 20px; }; /* Header */ .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: 0; width: 250px; height: 100vh; /* 왼쪽,위아래,퍼짐정도 */ box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); } .menu { line-height: 40px; /* 메뉴를 전체적으로 내림 */ margin-top: 60px; } .menu a { text-align: right; display: block; padding-right: 20px; color: #000; font-size: 20px; }; /* Trigger */ .trigger{ display: block; border: 1px solid #000; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; cursor: pointer; }; }; 위 코드 적용시 이렇게 임시 보더 박스가 표기 되지 않습니다 ㅠㅠ
ckrnckr12
2024-06-14T02:22:49.130Z
댓글 3
좋아요 1
조회수 277
미해결
구글 애드센스 수익형 워드프레스 블로그 만들기
강사님.. 여러 차례 수강전 문의 드리고 수강신청하였습니다. 수상 신청하자마자.. 내리 7강 까지 들었네요 문의 드릴것이 있는데요,, 우선 뉴스페이퍼 테마는 다시 도메인과 알려주시 업체 호스팅을 하고 구매를 해서 진행하려고 합니다. 먼저 앞서,, 현재 저렴한 워프 사이트가 하나 있는데,, 너무 방치하고 있어서요,, 카페24에서,, 1100원 짜리 와 도메인과 함께 구입을 해서 이것 저것 만저보다.. 현재 아무것도 못하고있는데요 섹션 4의 Generatepress Theme 부분 강의를 먼저 듣고 그것 먼저 세팅을 해도 될까요? 괜찮다면 우선 그것 먼저 세팅을 한 후에 새로이 제대로된 호스팅을 하고 테마도 사서 진행하려 합니다 카페24에 1100원의 워드프레스가 강사님께서 지급해 주신다는 Generatepress Theme 정식버젼이 잘 작동이 될까요? 아니면 바로 위에것으로 업그레이드 하고 이것 나름 데로 살려서 써야 할 것 같아서요
HTML/CSS wordpress php 웹-디자인 반응형-웹
서비
2024-06-12T09:14:44.233Z
댓글 1
좋아요 0
조회수 328
미해결
부트스트랩(BOOTSTRAP)3을 활용한 반응형 웹페이지 만들기
안녕하세요? 개념들이 잘 이해가 되게 가르쳐주셔서 감사합니다. 수업중 알려주신 내용의 코드들을 구축중인 홈페이지에 일부 사용해도 되나요?
2024-06-12T08:13:48.460Z
댓글 1
좋아요 0
조회수 200
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
선생님 안녕하세요 헤더 영역 스크롤 방향 이벤트 동적 구현이 되지 않아 문의 드립니다 해당 파일 알집으로 압축하여 보냈는데 하기 내용처럼 뜨면서 보내지지가 않습니다.... 확인 부탁드립니다 감사합니다. 파일 첨부 실패 첨부할 수 없는 파일과 사유는 아래와 같습니다. 첨부파일 목록파일명사유 헤더스크롤이벤트.Zip 관리자가 제한한 파일 형식
HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger
이정화
2024-06-09T13:46:08.071Z
댓글 1
좋아요 0
조회수 235
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
스크롤 내렸을 때는 문제가없는데 스크롤 올릴 시 .con02의 .worklist와 .title이 높이 올라갔다가 다시 원위치되는 현상이 발생합니다.
HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger
동호
2024-05-06T08:31:22.878Z
댓글 1
좋아요 0
조회수 201
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
제 메일은 rkddus3177@naver.com 입니다
HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger
김강연
2024-04-25T06:07:13.624Z
댓글 2
좋아요 0
조회수 314
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
안녕하세요~! ScrollTrigger 실무 활용_visual영역 제작하기 강의를 보던중 궁금한게 생겨서 여쭤봅니다! 8분 25초쯤보면 html,css 작업까지만 했을때 img_1의 높이만큼 스크롤이 생겼는데, 10분 47초에 scrollTrigger를 적용해주니까 높이값이 많이 늘어나있던데 혹시 왜 늘어나는지 알수있을까요?? 스크롤트리거를 사용하려면 스크롤이 되어야하는건 알겠지만 따로 높이값을 지정하지 않았는데 어떤것을 기준으로 늘어난건지 궁금해서 여쭤봅니다!
HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger
넴모
2024-04-24T11:39:36.965Z
댓글 2
좋아요 0
조회수 296
미해결
플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다. 선생님 안녕하세요 pc, 모바일 반응형은 대응이 됐는데, 웹사이트 창을 1250px정도로만 줄여도 가로스크롤이 발생을 해서요ㅠㅠ 혹시 이런 경우에는, div와 이미지 크기를 80%같은 수치로 줄여야하는건지? 아니면 overflow로 대응을 해야하는건지? 궁금합니다. 혹시 몰라서 제가 임의로 img에 max-width:100% height:auto로 해놨는데 이미지가 안넘어가고 가로스크롤이 발생해서요ㅠㅠ 답변주시면 감사합니다. 다른 질문들을 확인해보니, @media (min-width: 768px) and (max-width: 1024px) 이런식으로 대응하라고 하셨는데 폰트사이즈와 이미지를 줄여야하는건가요?ㅠㅠㅠ 아니면 flex구조를 컬럼으로 바꿔야할까요?
소영
2024-04-22T19:46:55.643Z
댓글 1
좋아요 1
조회수 495
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
하드코딩으로 이미지맵(image map) 만들기 코딩웍스 유튜트 채널에 있는 [이미지맵(image map) 만들기 ]에 상세히 강좌가 있습니다. 실무에서 꼭! 사용하게 되니까 한번쯤 만들어보세요. 하드코딩으로 이미지맵(image map) 만들기 강좌보기 https://youtu.be/21WRDP06O4s ※ 연습파일 다운로드는 유튜브 영상의 [더보기]를 누르시면 다운로드 링크가 있습니다. ==================================== 이렇게 되어 있는데 유튜브 링크 내에 다운로드 링크가 없고, 인프런 강의 18섹션 다운로드 부분에도 이미지맵 관련 파일은 안보이네요 연습파일을 얻을 수 있을까요?
d111
2024-04-11T10:41:06.558Z
댓글 1
좋아요 0
조회수 276
미해결
Tailwind CSS로 만드는 멋진 웹 UI 스타일링
섹션1 Animation에서 실습에 활용되는 svg 파일이 images 폴더 안에 안 들어 있습니다. 확인 부탁드려요
HTML/CSS 반응형-웹 tailwind-css
Ik Yeon Jo
2024-04-06T03:04:00.333Z
댓글 1
좋아요 1
조회수 291
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
jump up 이론 파트 em단위와 rem 단위 이해하기 부분 강의를 듣는 중입니다. em 단위가 부모요소에 대해 상대적으로 지정하는 단위이고 line-height에 주로 쓰인다고 하셨는데 그렇다면 주로 p의 폰트사이즈는 주로 p를 감싸고 있는 부모요소에 지정하고 줄간격은 p 그 자체에 지정하는 것인가요?
d111
2024-04-01T02:56:42.894Z
댓글 1
좋아요 1
조회수 241
미해결
Tailwind CSS로 만드는 멋진 웹 UI 스타일링
(사진)
HTML/CSS 반응형-웹 tailwind-css
chopa111
2024-03-25T07:07:20.065Z
댓글 2
좋아요 1
조회수 389
해결됨
HTML5 CSS3 기초 & 반응형 웹 템플릿 만들기!
index.html파일에서 style태그로 작성하면 돌고래 사진이 잘 나오는데 style.css에서 작성하면 백그라운드 컬러만 적용되고 사진이 표시되지 않습니다. 왜 이런가요??
nao505
2024-03-22T09:40:41.921Z
댓글 1
좋아요 1
조회수 542
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
오른쪽 사진 밑에 슬릭 dots 보이게 하고 싶은데 어떻게하면 될까요? 같은 질문과 답변을 보았지만 해결이 안되어서 다시 질문드려요~ 위에 history는 dots 보이는데 밑에 project photo 부분은 dots가 안보여요 히스토리에서 했던 것 처럼 .history-slider .slick-arrow{ display: none !important; } .history-slider .slick-dots li button:before{ color: #fff; font-size: 40px; } .history-slider .slick-dots li { margin: 0; } 이런 것 해줘야하나요? 강의 중 섹션 9 - PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - #06(Slick.js 이미지 슬라이더) 마지막 파트입니다
d111
2024-03-20T01:17:06.926Z
댓글 1
좋아요 1
조회수 307
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
이런 화면만 나오는데요? css 연결 잘했는데 안돼요
tkddnjs1018
2024-03-15T04:58:40.813Z
댓글 1
좋아요 1
조회수 282
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
<section class="news" id="news"> <div class="news-inner"> <div class="headline-share"> <h1>스타트메이트 최신 소식</h1> </div> <div class="news-content"> <div class="news-left"> <div class="news-big"> <img src="images/news-thum-big.jpg"> <div class="news-headline"> <h2>Merry Christmas 2020</h2> <p> 스타트업 CEO 여러분~ 지금은 사회적으로 힘든 시기를 보내고 있지만 우리는 이겨낼수 있습니다.<br> 스타트업메이트가 여러분을 응원합니다. <small class="date">Dec 24, 2020</small> </p> <a href="#none" class="btn-view">자세히 보기</a> </div> </div> </div> <div class="news-right"> <div class="news-items"> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-01.jpg"> <span class="badge hot">hot issue</span> </div> <p> 스타트업 메이트 드디어 사무실이 확장 이전했습니다. <small class="date">Dec 11, 2020</small> </p> </div> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-02.jpg"> <span class="badge new">new issue</span> </div> <p> 예상 고객의 요구사항 분석을 미리 알아보는 오프라인 CEO 프로젝트 <small class="date">Oct 21, 2020</small> </p> </div> </div> <div class="news-items"> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-03.jpg"> <span class="badge hot">hot issue</span> </div> <p> 스타트업을 위한 앱 개발 유료서비스 플랫폼 서비스 오픈 <small class="date">Nov 12, 2020</small> </p> </div> <div class="news-thum"> <div class="news-photo"> <img src="images/news-thum-small-04.jpg"> <span class="badge new">new issue</span> </div> <p> 스타트업 CEO를 위한 사업 기획서 작성과 아이디어 도출 방법 <small class="date">Oct 16, 2020 </small> </p> </div> </div> </div> </div> <a href="#none" class="btn-readmore">read more news</a> </div> </section> //css .news { background-color: #f9f9f9; } .news-inner { width: 1300px; margin: auto; } .news-content { overflow: hidden; width: 95%; } .news-content > div { float: left; width: 50%; } .news-big { position: relative; width: 550px; height: 550px; margin: auto; } .news-big::before { content: ''; position: absolute; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; top: 0; left: 0; transition: 0.3s; } .news-big:hover::before { background-color: rgba(0, 0, 0, 0.4); } .news-big img { width: inherit; height: inherit; object-fit: cover; } .news-headline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; width: 90%; } .date { display: block; margin-top: 20px; font-size: 14px; } .btn-view { background-color: #000; padding: 5px 10px; border-radius: 5px; color: #fff; } .news-items { margin-bottom: 20px; } .news-items > div { display: inline-block; } .news-thum { width: 280px; } .news-thum:first-child { margin-right: 30px; } .news-thum:hover .news-photo img { transform: scale(1.1); } .news-thum p { margin-top: 0; } .news-photo { position: relative; display: inline-block; overflow: hidden; } .news-photo img { display: block; transition: 0.3s; } .badge { position: absolute; bottom: 0; left: 0; color: #fff; font-size: 14px; padding: 0 10px; } .badge.new { background-color: red; } .badge.hot { background-color: #000; } .news-thum .date { float: right; } .btn-readmore { background-color: #69acfe; color: #fff; width: 180px; text-align: center; padding: 5px; border-radius: 20px; text-transform: uppercase; font-weight: bold; font-size: 16px; display: block; margin: auto; margin-top: 30px; } 제목 길이에 따라 date 위치가 바뀌는데 어떻게 수정해야 같은 위치로 놓을 수 있나요?
김주아
2024-03-14T00:53:18.573Z
댓글 2
좋아요 1
조회수 270
미해결
Tailwind CSS로 만드는 멋진 웹 UI 스타일링
[다운로드]+Tailwind+CSS(v3.4.1)+이론+및+실전+예제+ 완성본.zip 파일을 다운로드 받았는데, 강의내용과 폴더안의 파일이 다른것같습니다. 확인부탁드립니다.
HTML/CSS 반응형-웹 tailwind-css
2024-03-13T05:45:29.113Z
댓글 2
좋아요 1
조회수 492
미해결
구글 애드센스 수익형 워드프레스 블로그 만들기
올려주신 드라이브 파일에서 sticky 관련 파일은 찾을 수가 없는데 누락된건가요? 제가 못찾은거라면 어느부분에 작성되어 있는 지 알 수 있을까요? +추가) 밑줄 없애는 css 코드도 따로 없는것 같은데 확인 부탁드립니다..!
HTML/CSS wordpress php 웹-디자인 반응형-웹
kscr37
2024-03-12T04:53:19.126Z
댓글 1
좋아요 0
조회수 375
