• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

저도 아래 질문과 같은 질문이네요

22.01.18 13:13 작성 조회수 142

1

아래처럼 답변하셨는데..갑자기 나오니 당황스럽네요...

import도 처음보고 , flex, justify, align-item,

vh단위~ 

그래도 저 각각의 속성들이 뭔지는 알고 넘어가야 하지 않나요? 계속 반복된다고 해서 저 의미를 알게되는건 아니잖아요....? ㅠㅠ 계속 쓰이는지는 알수있겠으나 또 마치 셋트처럼 쓰인다 치더라도 최소한 각각의 의미는 알아야 하지 않을까요?

------------------------------

 

키프레임,  플렉스,  애니메이션, 오파시티 등등 이런거는 앞의 강의에서 없던 내용인데 그냥 실습 따라하면서 외우는 건가요? 이부분은 이론이 필요없나요?

 

 
<button class="ac-button is-md is-outlined is-gray my-reaction__button e-post-_reaction" style="box-sizing:inherit;margin:0px 8px;font-family:'Noto Sans KR', -apple-system, 'system-ui', BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica;position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:100px;font-weight:500;cursor:pointer;appearance:none;padding:0px 12px;height:40px;line-height:1.43;font-size:14px;letter-spacing:-0.3px;color:#495057;background-color:#ffffff;border:1px solid #e9ecef" data-id="44866" data-type data-cnt="4">4</button><button class="ac-button is-md is-outlined is-gray my-reaction__button e-post-bookmark" style="box-sizing:inherit;margin:0px 8px;font-family:'Noto Sans KR', -apple-system, 'system-ui', BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica;position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:100px;font-weight:500;cursor:pointer;appearance:none;padding:0px 12px;height:40px;line-height:1.43;font-size:14px;letter-spacing:-0.3px;color:#495057;background-color:#ffffff;border:1px solid #e9ecef" data-id="44866" data-cnt="0">0</button>
코딩웍스(Coding Works)
코딩웍스(Coding Works)2020.07.28 AM 00:40

안녕하세요. 코딩웍스입니다.

키프레임, 애니메이션, 오파시티는 실습 예제를 따라하시면 여러번 반복되니까 예제 학습으로 이론을 충분히 이해하실 수 있다고 생각됩니다. 그리고 플렉스는 수직 중앙 수평 중앙을 하기 위한 좀 더 편한 방법이 있다는 소개 정도로 생각하시면 됩니다.

course-thumbnail

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

CSS 키프레임 애니메이션 활용한 실전 예제 제작 01(원형 크기 변경 로딩 애니메이션)

강의실 바로가기

답변 1

답변을 작성해보세요.

0

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2022.01.18

해당 과정은 실전예제 제작 중심이라 모든 CSS이론을 자세히 다루기는 어렵습니다. 강의소개에 있는 것처럼 별도 이론사항은 코딩웍스 유튜브채널의 이론영상과 함께 병행하시면 됩니다.

코딩웍스 유튜브채널에 CSS 초급이론과 중급이론을 함께 보시면서 학습하시면 됩니다. 어지간한 이론 사항은 다 있습니다.

odark님의 프로필

odark

질문자

2022.01.18

아네네..알겠습니다.

혹시 body에 서 중앙정렬하기위해 이용하신것중에 

body {
    margin:0;
    display:flex;
    justify-content: center;
    align-items: center;
    /* height:100vh; */
}

마지막 height 값은 왜 들어가는지요?

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2022.01.18

body의 height는 기본값이 auto 입니다. 곧 현재로선 자식요소가 없으니까 높이값도 없다는 말입니다. 그러서 수평 중앙은 되지만 수직 중앙이 안됩니다. 그래서 강제로 높이를 100vh로 넣어준겁니다.

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2022.01.18

CSS 퍼블리싱의 이론은 완벽하게 다루고 있는 코딩웍스 강의를 수강하시면 지금 애매하고 이해안되는 거의 모든 것이 해결되실거에요. 강의소개 참고해보세요~

중상급 퍼블리싱을 위한 CSS3의 모든 것

https://www.inflearn.com/course/%EC%A4%91%EC%83%81%EA%B8%89-%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1-css3-%EC%BD%94%EB%94%A9%EC%9B%8D%EC%8A%A4

 

이 글과 비슷한 Q&A