sns아이콘 애니 만들기 중] 오버플로우, 차오르는 애니메이션 질... - 인프런

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

sns아이콘 애니 만들기 중] 오버플로우, 차오르는 애니메이션 질문

해결된 질문

작성

285

파트원 실습

가상클래스 before after 가상클래스 활용한 실전 퍼블리싱 03(SNS 아이콘 애니메이션)

10:30 부터

안녕하세요 항상 친절한 답변 감사합니다ㅠㅠ

현재는 일부 강사님이 하신 코드 데려와서 붙여서 되는 상황입니다. 제가 한건 주석처리에 표시 해놓았어요

01. a태그에 오버플로우 히든 적용이 제가 입력한 코드에서 작동이 안되는 이유가 찾아봐도 뭔지 모르겠습니다

02. 보더 래디우스 50%를 적용하고 오버를 하면

예시처럼 주욱 올라오는게 아니라 뒤에서 들어올려지는 것 같이 나와서

원인을 찾다가 래디우스가 원인인걸 알았습니다 20%같이 다른 퍼센트도 해봤는데 그냥

적용을 하면 그렇게 보이는 것 같더라고요... 이건 그냥 착시현상처럼 보이는걸까요?

03. 개인역량차이(?)겠지만 항상 정렬같은거 하다가 안될때가 많아서 애먹네요

요점을 훑고 연습해도 실제로 할때랑은 무엇이 문제인건지 파악이 늦어요

(뭐 예를들면 포지션 위치를 맞는곳에 써야하는데 비슷한 다른곳에 쓴다던지..)

남들도 이러는지 모르지만

저는 강사님 한거 한번 쭉 보고 혼자 안보고 붙들고 늘어지고 하다가 정 안되는것만 강의 다시 봅니다

강사님처럼 딱 딱 하고싶은데 답답할때가 많네요ㅠㅡㅠ 언제쯤 금방 파악할지

이런거 줄이는 방법 혹시 있을까요 많이 하는게 답일까요?

아래에 소스 달겠습니다 파일첨부기능이 없네요

그리고 저 사실 질문 많은데 매번 공부하다가 기록하고 있답니다,,,,^^

한꺼번에 하는게 좋을거 같아서요 번거롭게 하는 것 같아 죄송합니다.

정 이상한거만 일단 합니다

HTML/CSS jquery

답변 4

lololo

질문자

감사합니다!!

흑흑 바디가 빠진줄은 몰랐습니다 바로 수정하고 래디우스 위치도 확인하면서 고쳤습니다!

말씀하신 overflow 문제도 해결했습니다 inline-block이 문제일 줄은 꿈에도 몰랐습니다ㅠㅠ

overflow가 inline-block을 안하니까 아예 안되더라고요

블록이나 인라인블록에서만 먹히는건가요? 인라인 태그에선 아예 안먹히네요

답변 정말 감사합니다!

더불어 블록, 인라인 블록,인라인을 먼저 염두에 두고 문제파악 할 생각을 못했습니다(요점부터 돌렸는데도 껄껄) 이번에 완벽히 숙지하고

또 문제해결 할 때 이것부터 고려해야겠습니다

물어볼 사람이 없으신데도 정진하여 최고의 강사까지 하시고 코딩웍스님 대단하다고 생각합니다.

우연히 인프런 강의에서 마음에 드는 강의 골라 들었는데 강사님 강의 정말 좋고 잘 골랐다고 생각해요!

저 역시 열심히 해서 프로코딩러가 되겠습니다 돈도 마니 벌고,,,,

이런 말도 있죠.. 적게 일하시고 돈 많이 벌라는 말..

적게 일하시고 돈 많이 버세요! 감사합니다.

코딩웍스(Coding Works)

지식공유자

lololo 님이 만드신 코드에서 문제점이 몇가지 있습니다.

첫째는, HTML 코드에 시작하는 <body>가 없습니다. 물론 이게 없다고 지금의 현상에 영향을 주는것은 아니지만 html 기본 문서구조가 잘못되면 어떤 문제가 생겼을 때 원인을 찾는게 꽤 어려워집니다. 항상 html 기본 문서구조는 정확하게 작성해주세요.

둘째는, CSS코드에서 문제입니다.

a {

overflow: hidden;

border-radius: 50%;

display: inline-block;

}

위에 코드를 보시면 border-radius: 50%는 부모요소인 a에 있어야 하는 겁니다. 그러면 a:before의 배경색이 4개 모서리가 넘칠테니 overflow: hidden을 주어 넘친 4개 모서리를 감추는 겁니다.

둘째는 a는 인라인 요소입니다. 그렇기 때문에 크기값을 가질 수 없습니다. lololo 님 코드를 보니까 a에 display: inline-block를 주지 않고 width height를 주셨더라구요. 그래서 크기가 안먹는 겁니다.

퍼블리싱은 인라인, 인라인블록, 블록 요소의 특징을 명확하게 아는 것 부터 시작입니다. 가장 중요합니다.

강의에 섹션 2에 있는 [퍼블리싱의 모든 것! HTML 인라인 요소, 블록 요소, 인라인블록 요소] 강의를 다시 한번 보세요. 그리고 display 속성에 대한 이해도를 완벽하게 가지셔야 합니다. 그래야 앞으로 예제도 어려움이 없으실거에요.

그리고 이건 여담인데요...

03. 개인역량차이(?)겠지만 항상 정렬같은거 하다가 안될때가 많아서 애먹네요... 이렇게 적으셨는데..

맞습니다. 개인역량차이입니다. 하지만 그 역량 차이를 줄이기 위해서 노력하는 겁니다. 지금처럼 고민하고 하나씩 알아가면 걱정하시는 개인 역량 차이는 서서히 줄어듭니다. 시작하는 사람이 경험많은 사람을 단번에 따라잡을 수는 없습니다. 지금처럼 정진하시면 됩니다.

그리고 정렬은 초보자나 중상급자나 항상 어렵습니다. 퍼블리싱이 결국 정렬을 잘하기 위한 것이잖아요.

조급하게 마음가지시면 오히려 독이 됩니다. 누구나 역량을 올리는데 시간과 노력이 들어갔습니다. 저도 그랬구요. 저라고 lololo 님 같은 때가 없었겠어요. 저도 쌩초보때가 있었죠. 다른 점은 저는 막히는걸 물어볼 사람이 전혀 없어서 혼자서 모든걸 해결했다는 차이뿐입니다.

다시 말씀드리지만 [퍼블리싱의 모든 것! HTML 인라인 요소, 블록 요소, 인라인블록 요소] 이 부분에 대한 완벽한 이해가 없으시면 앞으로도 비슷한 오류로 어려우실거에요. 반대로 이 부분에 대한 이해가 완벽하게 모든게 잘 이해되실거에요.

화이팅입니다~!!!

lololo

질문자

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body {
  margin: 0;
}

a {
  text-decoration: none;
  color: black;
}

/* common */

.inner {
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.gnb {
  padding: 40px;
  background-color: rgb(218, 218, 218);
  border-radius: 30px;
}

a {
  border: 5px solid #fff;
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  line-height: 80px;
  font-size: 40px;
  position: relative;
  overflow: hidden;
  margin: 0 10px;

  /* 오버플로우, 아래제가한것 */
  /* border: 5px solid white;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(240, 240, 240);
  font-size: 30px;
  position: relative;
  padding: 20px 25px;
  overflow: hidden;
  margin: 0 10px; */
}

a:before {
  content: '';
  position: absolute;
  background-color: rgb(0, 0, 71);
  width: 100%;
  height: 0;
  left: 0;
  bottom: 0;
  transition: 0.5s;
  /* border-radius: 20%; */
  /* 보더, 여기, 아래는 제가한것 */
  /* content: '';
  position: absolute;
  background-color: rgb(0, 0, 65);
  width: 100%;
  height: 0;
  border-radius: 50%;
  left: 0;
  bottom: 0;
  transition: 0.5s; */
}

a:hover:before {
  height: 100%;
  /* overflow: hidden; */
}

.fa {
  transition: 0.5s;
  position: relative;
}

a:hover .fa {
  transform: rotateY(360deg);
  color: white;
}

lololo

질문자

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

  <div class="inner">
    <div class="gnb">
      <a href="#none"><i class="fa fa-envelope-open" aria-hidden="true"></i></a>
      <a href="#none"><i class="fa fa-envelope-open" aria-hidden="true"></i></a>
      <a href="#none"><i class="fa fa-envelope-open" aria-hidden="true"></i></a>
      <a href="#none"><i class="fa fa-envelope-open" aria-hidden="true"></i></a>
      <a href="#none"><i class="fa fa-envelope-open" aria-hidden="true"></i></a>
    </div>
  </div>

</body>
</html>

인프런 커뮤니티 질문&답변

sns아이콘 애니 만들기 중] 오버플로우, 차오르는 애니메이션 질문