46,200원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
inline-block , position: absolute
span 태그에 position:absolute를 주면 display 속성이 inline-block으로 변경되는걸로 알고있습니다. 그래서 .square 태그에 position: relative .square span 태그에 position: absolute 를 주지 않고 .square span 태그에 display: inline-block 으로 주고 만들면 3개의 span 태그가 겹치는게 아니라 각각 분리되더라고요 분리되는 이유가 뭔지 알수 있을까요?
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요 선생님
안녕하세요 선생님 항상 강의 잘 보고있습니다!! 다름이 아니라 em 관련해서 질문을 드리고 싶습니다 확실히 알고 넘어가야할거 같아서요! em이 부모를 기준으로 몇 배 하겠다 이거로 알고 있는데 혹시 맞을까요?? 그렇다면 .tilte h2 의 부모는 .title인데 뭐를 기준으로 잡는걸까요 헷갈려서 질문드립니다 감사합니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
container에 관한 질문이 있습니다!
선생님 안녕하세요! 강의가 너무 재밌네요! 자세한 설명 항상 감사합니다. 다름이 아니라 여태까지의 수업들을 보면 어떤 강의에서는 전체적인 태그를 감싸주는 .container 클래스를 만들고, 어떤 것들은 .container 클래스 없이 만들고 하시는데, 어떨 때 만드는 것이 효율적이고 비효율적인 것인지 판단할 수 있는걸까요? 제가 검색해 본 바로는 container는 여러 아이템들을 묶어주기 위해서 사용하는 것으로 확인되는데요. 그렇다면, 3d 호버 애니메이션에서는 각각의 image들을 app-ui 가 감싸고 있는 형태인데, 여기서는 왜 또 한번 container로 감싸서 총 두번을 감싼건가요? 반면 호버했을 때 위아래로 분리되는 수업에서는 총 item이 3개가 있는데 이를 items로 한번만 감싸주기만 했습니다. 혹시 수업 중 설명해 주셨는데 제가 놓쳤던 것일수도 있으니 만약 그렇다면 죄송하지만 다시 한번 설명해주시면 감사드리겠습니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요
안녕하세요 선생님 항상 강의 잘 듣고 있습니다!! 다름이 아니라 VSCODE 확장 설치 파일인지 모르겠는데 로렘 더미텍스트 같이 긴 텍스트를 복사/붙여넣기 할 때 선생님 강의 영상 처럼 줄 바꿈 처리되서 눈에 보기 좋게 하고 싶은데 이렇게 한줄로 복사가 되는데요 혹시 제가 어떤거 설치를 안해서 그런걸까요 ㅠㅠ? 항상 불편해서요 이상한 내용으로 질문을 드려서 죄송합니다 항상 강의 잘 보고 있습니다!! 감사합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
각 square 색상 모두 다르게 하기
선생님 안녕하세요! 덕분에 정말 재밌게 잘 배우고 있습니다~! 좋은 강의 정말 감사드려요. 다름이 아니라 제가 이것저것 연습해보다가 이게 맞나 싶게 한 부분이 있어서 질문드립니다! 제가 하고자 했던 방향은 기존과 같이 square가 총 3개가 있으며, 1번 2번 3번 스퀘어에 각각 다른 색상이 3개씩 들어가게 하는 것입니다! 현재 구현은 했으나 맞게 한것인지 잘 모르겠네요..! https://github.com/Kyu-holic/double-radius-border-animation-3types.git 제 git 주소인데 확인 한번만 부탁드리겠습니다! 궁금한 부분은 style.css 파일에서 "첫번째 border" "두번째 border" "세번째 border"라고 주석처리 해 놓은 부분이며, 해당 부분에서 nth-child를 두번을 써서 만들었는데 이렇게 하는 것이 맞는지 알고싶습니다! 감사합니다^____^!!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
아코디언 슬라이드 질문드립니다!
안녕하세요 선생님 ! 선생님의 강의를 정말 잘 듣고 있는 한 학생입니다. 다름이 아니라 아코디언 컨텐츠 만드는 부분을 학습하고, 혼자 유형을 바꿔서 밀리의 서재 홈페이지 Q&A란을 만들고 있었습니다. <html + css 현재결과물> html과 script 부분 캡처본 올려드립니다. <html> 보시는 것 처럼 예제와 좀 다르게 스타일 형식이 title과 desc가 한 박스에 담겨있는 형태여서, accordian > content > title, desc 이렇게 묶었습니다. < js > 하지만 이 때문에 siblings 요소 안에 넣은 메소드들이 실행이 안되고 있습니다. (addclass와 slidedown은 잘 실행됩니다.) 어떤 요소를 써야지 removeClass와 slideUp이 실행될까요... 바쁘시겠지만 답변 부탁드립니다. ps. 수업 정말 잘 듣고 있습니다! 정말 감사드립니다. 취업 후 수강평 꼭 남기겠습니다!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님 강의를 들으면서 포폴을 제작하고 싶은데 어떤 강의 순서대로 들어야 효율적일까요?
■ 질문 남기실 때 꼭! 참고해주세요. 구매한 강의가 너무 많은데 어떤 순서로 들어야 할지 모르겠어요 웹디자인기능사 시험을 봐서 합격은 했고요 웹퍼블리셔 포폴을 제작해야 하는데 리뉴얼 사이트 제작도 포폴안에 넣을 예정이고 리뉴얼한 포폴을 올려놓을 개인포트폴리오 사이트로 제작을 해야 할 것 같아요 선생님의 강의를 보면서 제작하고자 하는데 어떤 강의를 순서대로 보면서 공부해야 좀 더 잘 배울 수 있을까요? 선생님의 추천 부탁드립니다! 꾸벅~ 꾸벅~! 웹퍼블리셔 포트폴리오 홈페이지를 제작해야 하는데
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
탭 메뉴 콘텐츠- 스타일 02(실전 제작) with jQuery: search-icon 안보여요.
안녕하세요 ~! 강의 마지막 부분 input background에 이미지 삽입이 안되는데, 어떻게 처리하면 될까요? 강의자료 다운로드 받아서 images 폴더에 모두 저장했고 html에서 첨부한 img (platform-logo-01~04.png) 파일은 오류없이 모두 첨부되는데, css에서 background: url로 첨부한 search-icon.png 파일만 첨부되지 않습니다. background-size도 강의해서 말씀해주신 23px로 모두 입력했는데 어떤 부분이 문제일까요? 답변 부탁드리겠습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요, 강의가 나오지 않아 문의드립니다.
다른 강의는 문제 없이 나오는데 제이쿼리 시작하기부터 이렇게 화면이 나옵니다. 어떤 문제인걸까요? 쿠기도 지우고 시크릿창에서 열어도 나오지 않습니다......
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
position 속성으로 인한 높이값문의
div 안에 div가 존재하고 자식 div에 position:absolute를 주면 높이값을 잃기 때문에 높이값을 부모요소에 준다고 알고있습니다. 근데 그 높이값이 고정으로 주는게 아니라 안에 자식들이 div가 여러개 있거나 자식 div높이값에 따라서 유동적으로 부모 div값도 고정값이 아닌 자동으로 높이값이 변경되게 하려면 어떻게 해야하나요? 꼭 고정값으로 줘야 하나요? 당연히...자식에 의해서 부모의 높이값을 주면 담길꺼라 생각했는데 실제 담기는게 아니라...부모 사이즈만 늘어나는것 같습니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
Extensions cannot run in local chrome pages for security reasons
Page Ruler Redux를 설치했는데, Extensions cannot run in local chrome pages for security reasons라는 오류가 뜨네요. 왜 그런건지 알려주세요!
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
a태그 중앙정렬2
이미 아래에 질문했었는데 며칠이 지나도 답이 오지 않아 다시 한 번 여쭤봅니다. 해결책으로 남겨주신 vertical-align:middle은 변화가 없었는데 잘못 추가한걸까요? 그리고 또 다른 해결책인 transform: translateY(-3px) 을 알려주셨는데 왜 -3px인지 궁금합니다 답 주시면 감사하겠습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>pseudo Example 1</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="gnb"> <a href="#none">Online Class</a> </div> </body> </html> @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,300&display=swap'); @keyframes jelly{ 0% , 100% { transform: translateY(0); } 33.3333% { transform: translateY(-10%); } 66.6666% { transform: translateY(10%); } } body { font-family: 'Raleway', sans-serif; font-size: 18px; color: white; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; } .gnb{ } .gnb a{ text-decoration: none; color: black; vertical-align: middle; } .gnb a::before{ display:inline-block; width: 25px; height: 25px; content: '06'; color: white; text-align: center; vertical-align: middle; font-size: 15px; line-height: 25px; background-color: dodgerblue; border-radius: 50%; margin-right: 5px; } .gnb:hover a::before , .gnb:hover a::after{ animation: jelly .5s linear infinite; } .gnb a::after{ display:inline-block; content: 'updated 👀'; padding: 0px 5px; margin-left: 7px; background-color: red; color: white; border-radius: 3px; }
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
hover했다가 마우스를 뗐을 때 2
아래 답변이 안와서 다시 남깁니다. 답 주신대로 해보았지만 지속적으로 잔상이 남습니다 그리고 이미 .back에 opacity:0, .item:hover .back에 opacity:1이 있던 상황입니다 지속적으로 안돼서 답변 기다렸는데 안와서요. 왜이런지 궁금합니다 코드 다시 첨부합니다 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>hover Example 4</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="items"> <div class="item"> <div class="front"> <img src="img/space-01.png"> <h3>Mars</h3> </div> <div class="back"> <p>화성은 태양계의 네 번째 행성이다. 4개의 지구형 행성 중 하나다. 동양권에서는 불을 뜻하는 화(火)를 써서 화성이라 부르고 로마 신화의 전쟁의 신 마르스의 이름을 따 Mars라 부른다.</p> <a href="#none">Read More</a> </div> </div> <div class="item"> <div class="front"> <img src="img/space-02.png"> <h3>Jupiter</h3> </div> <div class="back"> <p>목성은 태양계의 다섯번째 행성이자 가장 큰 행성이다. 태양의 질량의 천분의 일배에 달하는 거대행성으로, 태양계에 있는 다른 모든 행성들을 합한 질량의 약 2.5배에 이른다.</p> <a href="#none">Read More</a> </div> </div> <div class="item"> <div class="front"> <img src="img/space-03.png"> <h3>Saturnus</h3> </div> <div class="back"> <p>토성은 태양으로부터 여섯 번째에 있는 태양계의 행성으로, 진성(鎭星)으로도 불렀다. 토성은 태양계 내의 행성 중 목성에 이어 두 번째로 크며, 지름은 약 12만 킬로미터이다.</p> <a href="#none">Read More</a> </div> </div> </div> </body> </html> @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'); @keyframes bigger-animation { 0% { transform: scale(80%); } 100% { transform: scale(110%); } } body { font-family: 'Nanum Gothic', sans-serif; font-size: 13px; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; background-color: #4c6ef5; } .items{ display: flex; flex-wrap: wrap; width: 900px; justify-content: space-evenly; } a{ text-decoration: none; color: black; } .item { width: 250px; height: 200px; text-align: center; position: relative; border-radius: 10px; } .front{ width: 100%; height: inherit; position: absolute; top: 0; z-index: 1; box-shadow: 0 0 13px #91a7ff; transition: .5s; } .back{ width: 100%; height: inherit; line-height: 1.5em; position:absolute; padding: 20px; box-sizing: border-box; opacity: 0; transition: .5s; } .item:hover .front , .back { background-color: rgba(186, 200, 255, .7); } .item:hover .front{ top:-50%; box-shadow: none; border-radius: 10px 10px 0 0; border-bottom: 1px solid rgba(0,0,0,.5); } .item:hover .front img { animation: bigger-animation .4s linear infinite alternate; } .item:hover .back{ top:50%; opacity: 1; border-radius: 0 0 10px 10px; } .front h3{ margin: 0; padding: 0; } .back p{ margin: 3px 8px; } .back a{ display: inline-block; margin-top: 10px; padding: 3px 8px; background-color: #748ffc; border-radius: 3px; }
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
jquery 배경이미지 변경 안됨.
jquery부분에서 css background-image 적용이 안되네요.. 어디가 문제일까요..? <HTML> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> ex5. 마우스 올리면 배경이미지 변경하게 with JQuery</title> <link rel="stylesheet" href="../CSS/ex5.css"> </head> <body> <div class="container"> <!-- ul : 좀 더 섬세하게 해야 함. (before, after 사용 필요) 따라서, div - a태그만 쓰는 것보다, ul - li - a 태그를 써주는 것이 필요 --> <ul class="nav"> <!-- a태그 내 텍스트 : white data-text 텍스트 : 마우스가 올라갔을 때 yellow-green으로 채워짐. --> <!-- li는 줄을 바꾸는 역할 (a태그는 가로배치됨 - 그러면 display:block을 줄 것임. 이 경우 텍스트 양 만큼 채워놓지 못함. )--> <li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-01.jpg"> <a href="#none" data-text="ABOUT">ABOUT</a> </li> <li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-02.jpg"> <a href="#none" data-text="INSTRUCTOR">INSTRUCTOR</a> </li> <li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-03.jpg"> <a href="#none" data-text="CLASS">CLASS</a> </li> <li data-image="../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-04.jpg"> <a href="#none" data-text="LOCATION">LOCATION</a> </li> </ul> <!-- photo가 nav보다 앞에 있으므로, z-index를 줄 필요가 없음. 가장 뒤에 존재. ㅇ--> <div class="photo"></div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="../jquery/ex5.js"></script> </body> </html> <CSS> /* 구글폰트 - Fredoka */ @import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Nanum+Pen+Script&display=swap'); /* Google Web Fonts CDN */ /* font-family: 'Noto Sans KR', sans-serif */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); body{ font-family: Fredoka; margin:0; color: #222; display: flex; justify-content: center; align-items: center; height: 100vh; /* background-color: #000; */ } a{ text-decoration: none; color: #222; } .container{ } .photo{ background-image: url('../[완성본] HTML+CSS 실전 퍼블리싱 with jQuery/05) 마우스 올리면 배경이미지 변경하기 with jQuery/images/portrait-initial.jpg'); background-repeat : no-repeat; background-position: center center; background-size:cover; /* 독립 속성으로 작성 : 이유 ) Jquery에서 bakcground-image만 변경하기 위함 (background는 이 모든것을 한번에 쓸 수 있음) */ position: absolute; top:0; left:0; width: 100%; height: 100%; transition:0.5s; } .nav{ } .nav li{ list-style: none; } .nav li a{ color: #fff; position: relative; font-size: 4em; z-index:100; } .nav li a:before{ position: absolute; top: 0; left: 0; width: 0; overflow: hidden; /* 감춰지도록 */ content:attr(data-text); /* a태그의 data-text 내용을 받아옴 */ color: yellowgreen; transition:0.5s; } .nav li a:hover:before{ width: 100%; } <JQUERY> // mouseenter = hover $('.nav li').mouseenter(function(){ var changeImage = $(this).attr('data-image') // data-img는 변수가 아니고 속성이기 때문에, ' ' 내에 입력되어야 함. $('.photo').css({ 'background-image':'url('+ changeImage +')' }); }) $('.nav li').mouseleave(function(){ $('.photo').css({ 'background-image' :'' }) })
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
GNB 에서 실제 메뉴를 넣고 클릭시
강의는 다 들었구요..너무 감사합니다. 들었는데 막상 다시해볼려니...아 까묵은듯 캄캄합니다... 마지막 질문같은데요... 강의중에는 없던 내용인 질문같은데요.. 실제로 gnb inner 위치에 여러개의 메뉴를 넣으면 메뉴별로 페이지가 아동되어야 하는데...상단 메뉴는 그대로이면서 가운데 실제 section 부분에 lorem을 넣었던 부분만 페이지이동하듯이 상단 메뉴클릭시마다 바뀌어야 할텐데... 그럼 해당부분 section부분안을 iframe으로 실무에서 하는건가요? 그러면 메뉴클릭시 어떻게 페이지 이동되게 하는지 궁금합니다. 또하나는 실무에서 section부분에 만약 게시판형태가 있다면 HTML5에 입각하여 table th tr td 태그를 사용하는게 일반적인가요?
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
hover했을 때 보이게 하려면 어떤식으로 해야할까요?
안녕하세요. checked 메뉴 예제 3,4번을 약간 응용해서 예제 설명 때 말씀해주신 쇼핑몰처럼 한번 만들어보고 싶었는데요 우선 강의에서처럼 1,2,3번 요소가 있고 브라우저 새로고침시 1번 요소는 우선 기본적으로 checked되어 있지만 2,3번 요소로 hover했을 때 요소가 변하도록 하고 싶어요. 단순히 hover과 checked를 섞어서 쓰면 될 줄 알았는데, 어떻게 해야할지 모르겠더라고요.. 1번 요소에 기본적으로 checked를 주고 2,3번 요소는 hover을 주면 1번 요소는 계속해서 checked로 남아있어서요 약간 조건문처럼 1번요소는 기본적으로 checked, background red로 되어있고(새로고침시) 이외에 hover했을 때는 위의 조건은 소멸되고 background red로 변하고 이미지 변하게끔 하고 싶어요 어떻게 해야할까요? 감사합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
실전 스텝은 어디에 강의가 있을까요?
네번째 스텝인 실전강의는 어디에 있는지 궁급합니다.
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
차이점을 알려주세요
1번 예제 HTML <a href="#none" class="show-btn">보이기</a> <a href="#none" class="hide-btn">감추기</a> <p> 태그선택자 a를 클릭했습니다. </p> jQuery $(function () { $("p").css({"display":"none"}); $(".show-btn").click(function () { $("p").css({"display":"block"}) }); $(".hide-btn").click(function () { $("p").css({"display":"none"}) }); }); 2번 예제 HTML <a href="#none" class="show-btn">보이기</a> <a href="#none" class="hide-btn">감추기</a> <div>Box</div> jQuery $(function () { $("div").css({"display":"none"}); $(".show-btn").click(function () { $("div").show() }); $(".hide-btn").click(function () { $("div").hide() }); 1번 예제하고 2번 예제 둘다 보여주고 감추는 기능을 하는 명령문? 들 인데 2번예제의 jQuery를 1번 예제의 jQuery 처럼 작성해서 실행 시켜봤더니 동작이 안되네요?? 그 이유를 알 수 있을까요??
- 미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
hover했다가 마우스를 뗐을 때
영상을 먼저 보고 스스로 만드는 도중에 거슬리는 부분이 있어 질문드립니다. 마우스를 item에 hover하다가 뗐을 때 back부분의 텍스트가 잔상처럼 남다가 사라집니다. hover했다가 떼는 순간에 back부분은 없어지게 하는 방법은 없을까요?(영상에선 hover했다가 떼는 순간에 슬라이드되는 것처럼 back부분이 없어지는데 뭐가 문젠지 모르겠습니다) back에 transition을 주지 않으면 back부분이 단순히 생겼다 사라져서 문제를 해결할 수는 있지만 front부분처럼 슬라이드되는 느낌이 없어져서요. 투명도 문제인가해서 front부분에 투명도를 아예 없애봤지만 잔상처럼 잠깐 남았다가 사라져서 시각적으로 보기 불편합니다. 어떻게 해앟ㄹ까요? 아래가 css소스코드입니다. @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'); @keyframes bigger-animation { 0% { transform: scale(80%); } 100% { transform: scale(110%); } } body { font-family: 'Nanum Gothic', sans-serif; font-size: 13px; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; background-color: #4c6ef5; } .items{ display: flex; flex-wrap: wrap; width: 900px; justify-content: space-evenly; } a{ text-decoration: none; color: black; } .item { width: 250px; height: 200px; text-align: center; position: relative; border-radius: 10px; } .front{ width: 100%; height: inherit; position: absolute; top: 0; z-index: 1; box-shadow: 0 0 13px #91a7ff; transition: .2s; } .item:hover .front , .back { background-color: rgba(186, 200, 255, .7); } .item:hover .front{ top:-50%; box-shadow: none; border-radius: 10px 10px 0 0; border-bottom: 1px solid rgba(0,0,0,.5); } .item:hover .front img { animation: bigger-animation .4s linear infinite alternate; } .item:hover .back{ top:50%; opacity: 1; border-radius: 0 0 10px 10px; } .front h3{ margin: 0; padding: 0; } .back{ width: 100%; height: inherit; line-height: 1.5em; position:absolute; padding: 20px; box-sizing: border-box; opacity: 0; transition: .2s; } .back p{ margin: 3px 8px; } .back a{ display: inline-block; margin-top: 10px; padding: 3px 8px; background-color: #748ffc; border-radius: 3px; }
- 해결됨HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
p태그 수직중앙정렬
div class='back'부분의 p와 a태그를 div class='back'안에서 수직중앙정렬되게 하려면 어떻게 해야하는지 궁금합니다. 영상에서는 padding을 주시고 box-sizing:border-box;로 height:inherit(200px)안에서 벗어나지 못하도록 하셨는데 그 방법이 아닌 또 다른 방법으로 텍스트들이 한번에 수직중앙정렬되게 하는 방법은 없을까요? 왼쪽은 padding과 box-sizing으로 가운데로 보낸 경우, 오랜쪽은 padding이랑 box-sizing은 주석처리한 모양입니다. 제가 원하는 바입니다. padding이랑 box-sizing을 쓰지 않고 p태그와 padding이 들어간 a태그가 전부 div back안에서 div back의 가장 윗부분과 아랫부분에서 같은 거리에 위치하도록 하고 싶습니다. 아래는 제가 쓴 css입니당 아직 hover되는 건 안했습니다 @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'); body { font-family: 'Nanum Gothic', sans-serif; font-size: 13px; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; background-color: #f4f4f4; } .items{ display: flex; flex-wrap: wrap; width: 800px; justify-content: space-evenly; } a{ text-decoration: none; color: black; } .item { width: 250px; height: 200px; text-align: center; border: 1px solid black; position: relative; } .front{ width: 100%; height: inherit; position: absolute; /* z-index: 1; */ } .front img{} .front h3{ margin: 0; padding: 0; } .back{ width: 100%; height: inherit; border: 1px solid red; line-height: 1.5em; position:absolute; padding-top: 20px; box-sizing: border-box; } .back p{ margin: 3px 8px; } .back a{ display: inline-block; margin-top: 10px; padding: 3px 8px; background-color: #bac8ff; border-radius: 3px; }