CSS 레이아웃 정리 display, position 완성 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

ความคิดเห็น • 589

  • @dream-coding
    @dream-coding  4 ปีที่แล้ว +250

    여러분~ 다들 강의 보고 계시나요~?
    저 질문 있어요~ :) 찾아보니 유튜브에 기초강의가 많이 있던데, 제 강의가 도움이 되나요~?
    풀타임으로 일하면서 시간을 쪼개어서 만들고 있는데, 가치가 있는지 모르겠어요~ 🤣
    아래 출석체크 부탁드려요 🙏🏼

    • @hospitaller100
      @hospitaller100 4 ปีที่แล้ว +10

      유튜브에 기초 강의가 많긴하지만 저는 엘리님께 보기 좀 더 편한거 같아요. 저는 지금 복습차원에서 하나하나 다시보고있는데 강의 주제 넘기는것도 자연스럽고 편집도 보기 편하게 알차게 잘 하셔서 그런지 코딩 강의 특유의 칙칙함이 없어서 더 좋은거 같아요. 바쁜 시간 쪼개서 하신다는거 쉽지 않으실텐데 늘 감사드립니다 :) 다음 플렉스박스 편 기대할게요!

    • @dubailee7781
      @dubailee7781 4 ปีที่แล้ว +6

      타기초강의는 전체훑어보는데 좋고 엘리님은 현업에서 쓰이는 핵심중심으로 강의해주시는것같아 좋습니다 수업중에 새로운정보들 알려주셔서 감사합니당 ㅎㅎ

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      @@hospitaller100 오~ 감사합니다 😭 앞으로 Javascript 할때 칙칙해 지지 않도록 신경을 더 써야겠네요 ㅋㅋㅋㅋㅋㅋ 네 조만간 플렉스박스 가지고 올께요~!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +2

      @@dubailee7781 코멘트 시간내어 써주셔서 감사해요~ 앞으로 현업에서 쓰는 팁을 조금더 넣어 보도록 할께요 ❤️

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      @ummru 감사합니다 :) 다른 강의도 보고 있다니 다행이예요 ㅠ ㅠ
      네 기본적인 CSS만 끝나면 Javascript하기전에 저적인 웹사이트 만드는거 한번 해볼꺼예요 🙌

  • @dream-coding
    @dream-coding  4 ปีที่แล้ว +61

    7:26 여기 영상을 보실때 파란색 뒤에 오는 빨간색 박스가 어떻게 변하는지 한번 보세요 :)
    relative를 쓰면 파란색 박스가 원래 있던 공간은 유지가 되면서 옮겨가기 때문에 그 뒤에 빨간색 박스들이 그대로 있죠?
    absolute를 쓰면 파란색 박스가 원래 있던 자리에서 쏘~옥 빠져나오기 때문에 빨간색 박스가 파란색이 있던 자리로 올라오는게 보이시죠?
    그리고 absolute의 경우 부모 박스중에 가장 근접한 static이 아닌( relative, absolute, fixed) 부모 박스 포지션 기준으로 움직여요.
    developer.mozilla.org/en-US/docs/Web/CSS/Containing_Block
    중요한 포인트를 설명을 안한거 같아서 추가적으로 코멘트 달아놓아요 🤗

  • @수열조-y4t
    @수열조-y4t 3 ปีที่แล้ว +25

    position 정리
    static : 기본 위치
    relative : static 위치에서 이동
    absolute : 바로 상위 박스위치에서 이동
    fixed : 페이지상에서 이동
    sticky : static위치 계속 유지

  • @CoreanoLatina
    @CoreanoLatina 4 ปีที่แล้ว +9

    Block은 한줄에 하나만 위치할 수 있다.
    inline-block은 한줄에 여러개 위치할 수 있다.
    inline은 안에 존재하는 콘텐츠의 양에 따라 그 크기가 가변한다.
    relative는 원래 있어야 하는 위치에서 상대적으로 이동한다 !!!
    absolute는 아이템이 담겨있는 상자 안에서 위치가 변한다 !!!
    fixed는 상자를 벗어나!! 윈도우 내부에서 위치가 변한다 !!!
    모두 이해 했어요 ㅎㅎ 너무 설명 개꿀이에요 ~~

    • @씅주이
      @씅주이 4 ปีที่แล้ว +1

      오우 잘 요약해놓으셨네요!

  • @reelsuper4737
    @reelsuper4737 3 ปีที่แล้ว +14

    아. 제가 본 강의 중 최고에요... 책을 몇 권을 봐도 다 문법적인 얘기, 그것도 기본적인 얘기만 담겨 있지 정작 깔끔하고 고급스런 웹사이트를 만들기 위한 방법을 알려주는 책은 하나도 없어서 뭘 어떻게 해야 하는지 감이 안잡혔는데 엘리님 강의 들으니 확 트이네요.

  • @catsheo739
    @catsheo739 3 ปีที่แล้ว +1

    엘리님 CSS 핵심 정리 잘듣고 갑니다.!!

  • @hinoko58
    @hinoko58 3 ปีที่แล้ว +6

    감사합니다. 잘 보고 있습니다.
    9:45 absolute를 쓰면 가까운 위치에 있는상자(부모)에서 배치되고 맞기는 하지만
    그경우는 부모속성에 relateve를 주어야 합니다.
    그렇지 않을경우에는 부모밖으로 나가 버립니다.

    • @dtd6797
      @dtd6797 2 ปีที่แล้ว

      부모를 기준으로 한 절대좌표로 이해하면 되겠군요

  • @Klklpia
    @Klklpia 4 ปีที่แล้ว

    inline :
    컨텐츠 자체만, 안에 들어있는 내용에 따라 크기를 맞춰 꾸며줌
    ( 이런식으로 내용 없으면 아무것도 x)
    inline-block :
    컨텐츠, 안에 들어있는 내용에 상관없이
    width, height에만 맞춰서 표기가 된다
    (내용이 width, height보다 크면 걍 삐져나온다)
    block : inline은 한 줄에 여러개라면
    block은 걍 한 줄에 하나
    position 기본 설정은 static
    relative : 아이템이 원래 있어야 하는 자리에서를 기준으로 상대적으로 변경
    absolute : 아이템이 담겨있는 상자 안(상위 클래스)에서를 기준으로 변경
    fixed : 전체 위치를 기준으로
    sticky : 마우스 스크롤링 되면 같이 움직임

  • @김상호-d4p5v
    @김상호-d4p5v 2 ปีที่แล้ว +2

    정리 (자세한건 영상을 참조하는 것을 강추!)
    postion : static
    Default 값, 명시 하지 않아도 자동으로 지정됨, left나 right 같은 위치 지정이 통하지 않음,
    inline-level이면 한줄에 여러개 block-level이면 한줄에 한 개씩 html에 흐름대로 elem이 배치됨
    position : relative
    원래 있던 자리를 기준으로 left right top bottom 으로 위치를 지정할 수 있음
    position : absolute
    가장 가까이에 있는 부모(?) 또는 postion이 absolute나 static이 아닌, 속성을 기준으로
    위치를 설정함
    position : sticky
    static 처럼 그 자리에 고정이 되나, scroll시 계속 보여지는 역할을 함
    header의 menu bar 기능 구현할 때 유용할 듯 보임

  • @gmd317
    @gmd317 4 ปีที่แล้ว

    display : inline, inline-block, block
    position : static , relative, absolute, fixed, sticky
    요즘 취미생활로 나만의 사이트 만들고 있는데
    이쁘게 꾸미는데 도움이 되겟네요
    잘보고 갑니다 ~

  • @민정-c7p
    @민정-c7p ปีที่แล้ว

    오늘부터 팬 할게요! 코딩 시작한지 1달 되었어요. 포지션이랑 이것저것 너무 헷갈려서 영상을 찾아보게 되었는데, 영단어 발음이 남다르시네요 넘 멋있어요!! 10:58 귀여운 재치까지 ㅠㅠ 드림코딩과 함께 지금 원하는만큼이라도 멋지게 성장했으면 좋겠어요. 소중한 정보 감사합니다~

  • @choh.6859
    @choh.6859 3 ปีที่แล้ว

    그... 수업과 전혀 관련없는 얘기지만 뒤에서 그랜절하고 계시는 엘리님 대단하세요...

  • @imkim1893
    @imkim1893 4 ปีที่แล้ว +1

    너무 감사합니다.. 대학다니고 회사다니면서, 7년간 잘못 알고 있던 지식을 13분 강의로 바로 잡아주시네요.. 엘리님 감사합니다.

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      개념을 잡으셨다니 ❤️

  • @park3min
    @park3min 4 ปีที่แล้ว +1

    오늘도 공부하며 댓글 남겨요. 요즘 구독자 분들이 많이 느신다는걸 느껴요. 제가 엘리님 채널 들어올 때마다 구독자 수가 팍팍 달라지네요. 좋은 콘텐츠는 역시 별다른 이야기를 하지 않아도 많은 분들이 저절로 구독하게 되죠! ^^ 오늘도 잘 배워갑니다.

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      좋은 말씀 감사합니다 ❤️ 그래서 빠르크님의 구독자 분들이 엄청 많아요~ 정말 좋은 컨텐츠가 많아서요 하하 🙌

  • @돗개-v5w
    @돗개-v5w 3 ปีที่แล้ว

    엘리 정말 감사해요. 1년이나 지난 영상이지만 너무 감사드리고자 댓글 달아요. 정말 position, display에 대해 알아보기 귀찮고 이해도 안됬는데 한번에 이해됬어요. 정말 너무너무 고맙습니다.

  • @chawoochawoo
    @chawoochawoo 3 ปีที่แล้ว

    position 개념도 없이 항상 이것저것 넣어보면서 되는대로 썼는데, 그래왔던 저를 반성하게 됩니다.
    덕분에 개념 많이 잡아가고, 지금이라도 아무 이해없이 코딩하는 습관을 고쳐야 되겠어요.
    제 프론트엔드 개발 커리어의 분기점은 엘리 강좌를 들은 전과 후로 나뉠 것 같습니다.
    나머지 강의들도 하나하나 댓글은 못달지만, 항상 감사한 마음으로 잘 듣고 있어요.
    감사합니다. 엘리

  • @eunchullee6207
    @eunchullee6207 4 ปีที่แล้ว +1

    출석체크요. 이런 강의가 조회수가 안나오는게 이해가 안되네요. 개인적으로 너무나 큰 도움이 되고 있습니다. 바쁘신 중에도 이런 재능기부 감사합니다. ^^

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      하하 감사합니다 😊

  • @solhee0923
    @solhee0923 3 ปีที่แล้ว

    현직 개발자예요.
    대기업에 다니고 있지만, 육아휴직과 흘러버린 시간들 ㅠㅠㅠ
    개발자로 이생망이다 싶다는 생각만 드는 요즘
    엘리는 강의듣고 혼자 공부하고 있어요.
    마지막에 맨날 포기하지 말라는 말듣고 힘내고 있어요.
    대학생때도 생각나고 너무 재밌네요. 강의 감사합니다.

    • @dream-coding
      @dream-coding  3 ปีที่แล้ว

      육아휴직 너무 힘들죠? 내 인생의 길고 긴 포즈가 눌린 느낌, 지금도 늦지 않았어요! 화이팅입니다

  • @khm6793
    @khm6793 4 ปีที่แล้ว +1

    출석체크합니다~!! 잘 시간이 한참 지났네요 ㅎ 하나만 본다는게 몇 개를 본건지 ㅎ 내일 또 오겠습니다~ 앞으로도 양질의 강의 부탁드립니다. 감사합니다

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      우아 하루만에 진도가 정말 많이 나가셨네요 :)
      꼭 중간에 나간 선물들 직접 해보셔서 kh님께 잘 장착하셨으면 좋겠어요 ❤️

  • @michaeloh3728
    @michaeloh3728 4 ปีที่แล้ว +6

    포트폴리오 사이트 강의 들으면서, 중간중간 돌아와서 다시 듣고 있네요~ ㅎㅎ
    전에 코드아카데미, 생활코딩으로 기초적인 내용을 이해했다면, 엘리 강의로는 현업에서 중요하게 여기는 개념과 사용한다고 가정하고 예상하며 들을 수 있어서 좋네요~ 시간대비 효율 짱 강의 !! 고맙습니다 :)

  • @user-iliillllIllill
    @user-iliillllIllill ปีที่แล้ว

    너무 잘 가르쳐 주셔서 화가 날 지경입니다.. 이걸 먼저 봤다면 시간을 덜 낭비했을텐데 !! 같은 분노네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 늘 감사합니다!!! 리액트는 엘리쌤에게 배워보려고 합니닷

  • @sdaniellekable
    @sdaniellekable 4 ปีที่แล้ว +5

    정말 엘리님 강의가 너무 큰 도움이 되고있습니다. 감사하다고 몇번을 이야기해도 부족하지 않겠네요. 상대에게 지식을 전달하는건 정말 어려운 일이라고 생각하는데, 엘리님은 그걸 어떻게 이렇게 잘하시는지 모르겠어요. 엘리님 강의 강추입니다~!!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      따뜻한 코멘트 감사해요 ❤️

  • @emilypark8144
    @emilypark8144 4 ปีที่แล้ว +5

    이제까지 본 position 강의 중에 진짜 최고에요!!!
    아무리봐도 이해가 가지않았던 position: relative position:absolute 가
    엘리쌤 강의보고 이해바로 가요 ㅠㅠ 이제 플젝에서도 잘 적용시키도록할께요

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      오웃 이해가 되셨다니 ♥️

  • @롤피아
    @롤피아 ปีที่แล้ว

    선생님 사랑합니다 국비교육듣다가 현타 너무심했는데 한방에 쉽게 이해됩니다 정말정말감사합니다

  • @TrutherHidden
    @TrutherHidden ปีที่แล้ว

    HTML, CSS에 대해 어설프게 알고 있었다가 기초부터 다시 단단히 다지는 느낌이 드네요
    좋은 강의 정말 감사드립니다~!!
    인생의 늦은시기에 풀스택 개발자로 취업의 문을 두드리고자 준비하고 있습니다.
    좋은 자료가 너무 힘이되네요~! 감사합니다

  • @livepen0713
    @livepen0713 4 ปีที่แล้ว +1

    출첵이요~ 좋은 강의 감사해요

  • @homies5593
    @homies5593 ปีที่แล้ว

    선생님은 저의 워너비가 되셨습니다....

  • @GotoFinal
    @GotoFinal 4 ปีที่แล้ว

    주옥같은 강의 잘보고 있습니다. 이렇게 머릿속에 다이렉트로 박아버리는 강의는 머리털나고 처음입니다.

  • @Sksksbsbabana
    @Sksksbsbabana 3 ปีที่แล้ว

    컴공 학생인데 뒤늦게 프론트앤드 개발자가 되고 싶어서 정주행 중입니다. 학교에서 몇년전에 웹프로그래밍 수업을 배웠지만 다 까먹어서 다시 처음부터 감을 잡고 싶은 마음에 듣고 있습니다!!!!!!!!!! 학교에서 배운 수업보다 알차고 쓸데 없는것도 없고 진짜 필요한 부분만 알려주시는거 같아서 좋네요 영상도 짧아서 금방 감 익히는데 너무 좋은거같습니다 좋은 영상 감사드립니다!!!!!!!!!!!!!!!!!!!!!

  • @정인태-e6c
    @정인태-e6c 2 ปีที่แล้ว

    엘리 누님은 뼈대를 먼저 알려주시니 열번 공부하는 것보다. 누님 강의 한번 듯는게 훨 나은 것 같아요. 엘리 화이팅🍎🍎

  • @을왕라
    @을왕라 4 ปีที่แล้ว +1

    안녕하세요 css공부중 내용이 가득한 수업이라 구독누르고 영상보고있습니다 감사합니다.
    질문이 있는데 8:24초에 bluebox의 position을 fixed로 고치셨을때
    웹사이트 기준으로 변경된다고 저는 그렇게 이해했습니다.
    그런데 그 말씀대로라면 container와 같은 시작위치가 되고 top, left도 20px이니 1번 redBox와 동일한 위치에 있어야 하는거 아닌가요?
    강의 더 만들어 주세요~~

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      fixed는 viewport 기준으로 움직이기 떄문에 20px 20px로 옮겨 갔구요. 컨테이너 안에 있는 red 박스와 위치가 같지 않은것은 컨테이너가 relative로 원래 있던 자리에서 20px씩 옮겨갔어요.
      즉 body안에 margin이 8px로 들어 있기 때문에 실제로는 viewport 기준으로 28px씩 옮겨간거예요 :)

    • @을왕라
      @을왕라 4 ปีที่แล้ว

      @@dream-coding 아하! 숨겨진 8px이 있던것이군요 ㅠ 감사합니다.!!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      @@을왕라 네네 body { margin: 0 } 이렇게 하면 똑같이 나와요

  • @tobiasy88
    @tobiasy88 4 ปีที่แล้ว +1

    출책 완료.
    진행 Speed 아주 좋습니다. 반복 연습과 복습은 우리의 몫.
    position has 4 values:
    relative
    absolute
    ---------------
    sticky
    fixed
    ---------------
    Imagine how they were moving when scrolling down & up.
    Bootstrap & jQuery Bye.

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      우아 주말동안 진도 정말 많이 나가셨는데요? 대단 🤗
      > 반복 연습과 복습은 우리의 몫.
      Absolutely correct ✅

  • @귀돌안
    @귀돌안 2 ปีที่แล้ว

    너무 재미있게 잘 보고있어요. 열심히 보고 있는데 다 못본 영상을 챙겨보느랴 바쁘네요.

  • @가집사의함께살림
    @가집사의함께살림 4 ปีที่แล้ว +1

    이해하려고 몇번을 보는지 모릅니다
    감사합니다! 너무 멋지세요!^^

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      레이아웃 조금 어렵죠~? 코멘트 감사합니다 🙌

  • @nohde7479
    @nohde7479 3 ปีที่แล้ว

    항상 마지막에 격려에 말씀에 더 열심히 하게 되요 감사합니다.

  • @참-b9g
    @참-b9g 4 ปีที่แล้ว +1

    출첵이용~ 얕게만 알고있던 내용들을 이렇게 콕콕 짚어주시니 이해가 더 잘 되네요 특히 포지션에서 정말 많은 도움이 되었어요 !

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      보시는 영상마다 출책 감사해요 ❤️

  • @김유정-c2p6i
    @김유정-c2p6i 4 ปีที่แล้ว +4

    엘리님 영상 정주행중입니다 ㅎㅎ 너무 재밌게 보고있어요+_+ 사람들을 흡입하는 매력이있으신것같아요 !! 저의 롤모델이십니다 ㅜㅜ

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      이런 스윗한 코멘트 감사해요 ❤️

  • @pisuyeon
    @pisuyeon 3 ปีที่แล้ว

    숙제다하고 출첵하러 왔어요~~ 항상 시간 내서 강의 만들어 주셔서 감사합니다 ㅎㅎ

  • @백산-q8t
    @백산-q8t 2 ปีที่แล้ว

    span은 안에 내용이 잇어야됨
    div는 block level이고
    span 는 Inline-level이다
    css로 변경가능
    display가 block이면 한줄에 하나씩
    inline-block이면 옆으로 한줄에 여러개
    position : fixed; 윈도우 브라우저 웹페이지 기준으로
    움직임
    static은 기본 설정값 아무것도 안지정하면
    sticky:그자리 고정

  • @LEEKEE_0209
    @LEEKEE_0209 3 ปีที่แล้ว

    선생님이 제 빛과 소금이십니다..

  • @hyom__
    @hyom__ 4 ปีที่แล้ว

    position : static (기본값)
    relative = 기본값을 기준으로 이동
    absolute = 나를 담고있는 박스를 기준으로
    fixed = 모든 박스를 벗어나 웹페이지 기준
    sticky = 화면 이동시에도 계속 같은 위치에 보이게 해주는 속성

  • @sujeongchu5840
    @sujeongchu5840 3 ปีที่แล้ว

    출첵! 열심히 듣고 있습니다. 기본강의 완강 후에 포트폴리오 클론코딩 강의 들을 예정이에요!

  • @이상희-g3c
    @이상희-g3c 3 ปีที่แล้ว

    와… 저 position 에서 많이 헤맸었는데 이번 강의로 완전 이해됐어요… 저 완전 엉뚱하게 알고 있었어요.. 진짜 무료강의임에 너무 감사합니다

  • @startcoding.official
    @startcoding.official 4 ปีที่แล้ว +1

    absolute의 경우 담긴 박스를 기준으로 움직이는게 아니라 부모태그중 static이 아닌( relative, absolute, fixed) 포지션 기준으로 움직이는 게 맞는거 아닌가요? ㅎㅎ

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      아, 정확하세요. 그 부분을 코멘트에 업데이트 해놓을께요. 감사합니다 🙏🏼
      developer.mozilla.org/en-US/docs/Web/CSS/Containing_Block

  • @ehoi5489
    @ehoi5489 3 ปีที่แล้ว

    저는 처음 개념 잡는데 엘리님한테 배워서 전혀 헷갈리지 않고 바로 이해했어요 ღ 엘리는 사랑입니다

  • @yo5po
    @yo5po 3 ปีที่แล้ว

    선생님이라고 불러도되죠? 학원에서 배우다가 못 따라가겠어서 선생님 강의 들으면서 예복습 중이에요 정말 최고십니다 오늘도 감사히 잘 배웠어요❤️

  • @pearl4102
    @pearl4102 4 ปีที่แล้ว

    엘리 교수님.. 저의 파편화된 지식이 완전히 정리되었습니다! 감사합니다!!!!!!!!!!!!!!!!!

  • @seon_douga
    @seon_douga 4 ปีที่แล้ว +1

    출석체크 합니다! 헷갈렸던 부분들이 싹 정리되는 느낌이네요 !

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      정리가 되셨다니 다행이예요 🙌 영상마다 이렇게 출석체크 해주셔서 감사해요 ❤️

  • @jeunghunhan
    @jeunghunhan 4 ปีที่แล้ว +1

    저한테 꼭 맞는 강의입니다. 이해만 하면 되는 핵심적인 것을 군더더기 없이 되어 있어 딱 좋습니다.

  • @꼬꾸마-z9f
    @꼬꾸마-z9f 4 ปีที่แล้ว

    출석체크! 코딩언어쪽에는 한국보다 외국영상이 많아서 늘 파파고돌리면서 겨우겨우 봤는데 이렇게 명쾌하고 쉽게쉽게 설명해주는 한국어영상이 있어서 너무 행복해요 ㅠㅠ 감사합니다

  • @DAHYEKIM902
    @DAHYEKIM902 2 ปีที่แล้ว

    신입 퍼블리셔인데 너무 강의가 좋아요 잘 듣고 갑니다!

  • @jiwoongyeon5615
    @jiwoongyeon5615 3 ปีที่แล้ว

    미국 시애틀에서 소프트웨어를 공부하고 있는데, 매일 많이 배워 갑니다~ 감사합니다!!!

    • @dream-coding
      @dream-coding  3 ปีที่แล้ว +1

      제 친구가 시애틀로 넘거갔는데, 더 반갑네요 :))

    • @jiwoongyeon5615
      @jiwoongyeon5615 3 ปีที่แล้ว

      @@dream-coding 친구분은 어느 컴페니에 가셨나요? ㅋㅋ

  • @mjk3155
    @mjk3155 4 ปีที่แล้ว +1

    하루만에 재생목록 다 끝내기는 욕심이었나봐요 ㅠㅠ ,, css 실습에서 예상치못하게 시간이 많이 드네용 ㅠㅠ 내일도 열심히 달려보겠습니다 영상감사합니다!!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      하하 강의를 끝내는것에 목표를 두시지 마시구 꼭 쿠키님껄로 소화하셔서 익힌다에 목표를 두셨으면 좋겠어요 ❤️

  • @chaneo-qw2uv
    @chaneo-qw2uv 4 ปีที่แล้ว +2

    css에서 position 개념 잡기가 제일 힘들었는데 정말 깔끔하게 정리해주신 것 같아요! position: sticky도 첨 알게 됐는데 넘 유용할 것 같아요!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      sticky넘 유용하답니다 :) 우와 제 영상 정주행 다하신거 같네요 ㅋㅋㅋㅋ

  • @Tony-zg7vf
    @Tony-zg7vf 4 ปีที่แล้ว

    10:34 벽에 사진은 엘리님이신가요? 이쁘네요

  • @빈빈-m6g
    @빈빈-m6g 4 ปีที่แล้ว +1

    출석체크합니다~ 얼른 기본강의 끝내고 실전편에서 같이 만들어보고 싶네요~

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      실전편에서 기다리고 있을게요 ❤️

  • @damgomiyo
    @damgomiyo 3 ปีที่แล้ว

    지금 css 배우면서 position이 제일 이해가 안 되었는데 영상보고 정리가 너무 잘 되었어요 감사합니다

  • @hogoonlee8391
    @hogoonlee8391 2 ปีที่แล้ว

    설명이 직관적이고 설명해주시는 표현들이 잘 이해가 됩니다!

  • @showmeeee
    @showmeeee 4 ปีที่แล้ว +7

    학원에서 아무리 배워도 귀에 들어오지 않았고 ㅠㅠ 따라가기 힘들었는데 너무 감사해요

  • @인성폭발람바루가
    @인성폭발람바루가 4 ปีที่แล้ว +1

    스티키는 처음봤어요 ~ 꿀태그 빨리빨리 더 배우고싶네요

  • @Nobuhiro15
    @Nobuhiro15 4 ปีที่แล้ว +1

    확실히 정리되었네요 머릿속에서 떠다니던 개념들이 좋은강의 감사합니다!!

  • @lucaskim3601
    @lucaskim3601 4 ปีที่แล้ว +1

    우와 정말 간단하고 재밌어요!! 시간가는 줄 모르고 봤답니다~
    바로 복습하러갈게요!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      우앗! 여기까지 오셨네요 😍 복습도 꼬박꼬박 다 하시는거 같은데 정말 화이팅입니다! 🙌

  • @타몽-v1k
    @타몽-v1k 3 ปีที่แล้ว

    오늘은 가장 헷갈려하던 position에 대해서 공부했습니다. 감사합니다.

  • @강소장-v7t
    @강소장-v7t 11 หลายเดือนก่อน

    이번 강의도 잘 봤습니다. 감사합니다!

  • @jrKim99
    @jrKim99 3 หลายเดือนก่อน +1

    출체 D2V4
    position 부분의 absolute 와 fixed이 좀 헷갈렸는데 직접해보니 container 너비 모두 0으로 해도 initial 화면과는 여전히 gap이 있네요. 해결!

  • @Alex_loves_Danny
    @Alex_loves_Danny 4 ปีที่แล้ว +1

    출첵입니다!!!! 강의 정말 잘하세요 ^^

  • @yunmiseo8079
    @yunmiseo8079 4 ปีที่แล้ว +7

    relative, absolute, fixed 헷갈렸던 거 완벽하게 정리됐어요!! 이렇게 이해 잘 되는 예시는 처음 봐요 ㅎㅎ 감사합니다 !

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      너무 스윗한 코멘트 감사드려요 ❤️

  • @ioue98
    @ioue98 3 ปีที่แล้ว

    엘리선생님 강의가 최곱니다. 다른 강의에서 HTML CSS 를 질질 끌어가면서 배웠었는데요 ㅠㅠ 엘리쌤이 그냥 최고에요. 오늘도 감사합니다.

  • @김세연-g1d
    @김세연-g1d 3 ปีที่แล้ว

    앨리쌤~! position 정확히 이해하고 가겠습니다~~ 좋은 강의 감사합니다!

  • @유원우-v1n
    @유원우-v1n 3 ปีที่แล้ว

    css 레이아웃 정리 듣기 완료!

  • @Lucky-yc2su
    @Lucky-yc2su 4 ปีที่แล้ว +1

    깔끔한 강의 감사합니다!
    시애틀에서 개발자를 꿈꾸며 출석 체크 합니다!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +2

      코멘트 정말 감사합니다 ❤️ 시애틀에 계세요~? 안그래도 친구가 시애틀에서 아마존에서 일하고 있는데 저보고 오라고 꼬시고 있거든요 하하

    • @Lucky-yc2su
      @Lucky-yc2su 4 ปีที่แล้ว +1

      @@dream-coding 오 시애틀에 오신다면 구독자와의 만남 진행 하시는 건가요?ㅎㅎ 시애틀 너무 좋은 도시예요 꼭 한 번 놀러오세요ㅎㅎ

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      @@Lucky-yc2su 하하 구독자와 친구의 만남 좋네요 ❤️ 시애틀 너무 가보고 싶네요~ 근교에 정말 좋은곳 많다고 들었어요 :) 그리고 세금이 낮아서 너무 사랑합니다 하하

  • @고경택학생전자정보대
    @고경택학생전자정보대 2 ปีที่แล้ว

    포트폴리오 웹사이트 클론코딩 강의 등록하고 개념 공부하러 왔어요! 감사합니다~ㅎㅎ

  • @oxeanondo
    @oxeanondo 3 ปีที่แล้ว

    출석체크완료! CSS는 해볼수록 진짜 신기한것 같아요 :-) 늘 감사합니다!

  • @mischief_maker
    @mischief_maker 3 ปีที่แล้ว

    출석체크 완료! 오늘도 핵심 잘배우고 가네요 항상 감사합니다~

  • @kekennnnhhh
    @kekennnnhhh 4 ปีที่แล้ว

    복습겸으로 듣고있어요 출첵이요 !!

  • @이민동-r8g
    @이민동-r8g 3 ปีที่แล้ว

    머리 속에 쏙쏙 들어오네요! 훌륭한 강의 정말 감사합니다!

  • @il4946
    @il4946 4 ปีที่แล้ว +1

    역시 강의 맛집이네요 ㅋㅋㅋ 잘봤숨당

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      여기까지 오셨네요~ 감사합니다 ❤️

  • @wyneeoo
    @wyneeoo 4 ปีที่แล้ว

    css 두번 째 강의도 잘 봤습니다!

  • @eden8592
    @eden8592 4 ปีที่แล้ว +1

    깔끔한 강의 감사해요. 어제서야 정리가 좀 되네요 ㅎㅎㅎ

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      정리가 되신다니 ❤️ 감사합니다 🙌

  • @hakkouser
    @hakkouser 4 ปีที่แล้ว +1

    엘리쌤 position fixed 에서 궁금한게 있는데요 영상 8:20 쯤 .box가 상자를 벗어나 웹페이지 안에서 움직인거라고 말씀해주셨는데 html 코드에서는 body 기준으로 움직였다고 봐도 될까요? 아니면 html 기준으로 움직였다고 봐야하나요?

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      body안에 모든 태그들이 들어 있고, fixed는 viewport 기준에서 움직이는거니 body로 보는것이 더 맞지 않을까 생각해요 :)

  • @jasonko1202
    @jasonko1202 4 ปีที่แล้ว +1

    이렇게 좋은 강의를 이제야 보네요. 정주행하러 갈렵니다~

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      코멘트 남겨 주셔서 감사합니다 ❤️ 실전에서 기다리고 있을께요 🙌

  • @TheDdd0413
    @TheDdd0413 4 ปีที่แล้ว +1

    여기까지 쭉 다 들었습니다. 감사해용 :)

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      와 많이 오셨네요 🙌

  • @josephsong2290
    @josephsong2290 4 ปีที่แล้ว

    일하시면서 시간내서 강의 내주시니 감사합니다!
    하나하나 쉽게 알려주셔서 너무 감사해요~ㅎㅎ
    중간중간에 재미난 멘트와 추가소리(?)들로ㅋㅋ 한번씩 웃고갑니다 ㅎㅎ

  • @soook3645
    @soook3645 4 ปีที่แล้ว +1

    너무 잘 보고 있어요~ 개념부터 확실하게 알려주시니 이해하기 너무 좋습니당! 요즘 저의 가장 골칫거리 자바스크립트 강의도 기대됩니다!! 얼른 올려주세용

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      좋은 피드백 남겨 주셔서 감사합니다 🙌 자바스크립트 강의도 하나씩 올라가고 있어요 ❤️

  • @오잉-r4z
    @오잉-r4z 3 ปีที่แล้ว

    sticky는 처음봤는데 정말 유용하게 쓰일 것 같아요!! 오늘도 감사합니다 !!!

    • @dream-coding
      @dream-coding  3 ปีที่แล้ว

      출첵해 주셔서 감사해요 🙌

  • @zoo1609
    @zoo1609 4 ปีที่แล้ว +1

    이번강의도 완강~~ 알기 너무 쉬워요 ㅋㅋ 안녕히계세요 여러분이 인상에 남는 강의네요 ㅎㅎㅎ감사합니다.

  • @nayu6381
    @nayu6381 4 ปีที่แล้ว +1

    오늘도출석체크해요! 재미있게 배우고있습니다!ㅎㅎ

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      항상 출책해주서서 감사합니다 ❤️

  • @jismith3855
    @jismith3855 4 ปีที่แล้ว +1

    출첵합니다. 복습용으로 보는데 너무너무좋네요 🥰 엄청 깔끔한정리 감사합니다

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      출책 감사합니다 ❤️

  • @임꺄륵
    @임꺄륵 4 ปีที่แล้ว

    엘리쌤은 진짜 멋쟁이...

  • @wwoojin
    @wwoojin 4 ปีที่แล้ว +1

    감사합니다! 디스플레이와 포지션에서 조금 헷갈리는 부분들이 정리되었어요!

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      코멘트 감사합니다 ❤️

  • @jj_ziemniak
    @jj_ziemniak 2 ปีที่แล้ว

    감사합니다! 깔끔하고 똑부러지는 설명으로 헷갈렸던 개념을 단번에 이해하고 가요~!

  • @bigmingc7003
    @bigmingc7003 4 ปีที่แล้ว +3

    이번 강의도 잘 들었습니다! 저도 다른 분들과 마찬가지로, 다른 강의에 비해 엘리님의 강의가 요점을 잘 전달해주고, 또 흡입력 있게 들을 수 있는 것 같아요 ㅎㅎ 항상 좋은 강의 감사합니다.

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      좋은 피드백 감사합니다 :)

  • @rebeccadabinchae376
    @rebeccadabinchae376 3 ปีที่แล้ว

    캐나다에서 부트캠프들으면서 이해안되는 부분을 엘리님 강의로 해결중이에요~ 이런 강의 너무 감사합니다!! 부트캠프끝나고는 바로 엘리님 아카데미 강의를 들으려구요 ㅎㅎ 이런 강의 쭉~~~ 계속 해주세요!!

  • @도롱뇽-x4k
    @도롱뇽-x4k 3 ปีที่แล้ว

    발음이 또박하셔서 귀에 쏙쏙 들어오는거같아요!

  • @hsk291
    @hsk291 4 ปีที่แล้ว

    그 어떤 설명보다 이해하기 쉬웠어요~^^ 엘리 최고!ㅎㅎㅎ

  • @쩡이-i1n
    @쩡이-i1n 2 ปีที่แล้ว

    넘 재밌어요! 쉽게 설명 감사드립니다. 출석체크!

  • @화이팅-l9l
    @화이팅-l9l 4 ปีที่แล้ว +1

    출석했습니다.! 박스디자인할때 필요한 display와 position에 대해서 잘배웠습니다

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว

      오! 배우고 가신다니 정말 뿌듯하네요 🤗 코멘트 남겨 주셔서 감사합니다 🙏🏼

  • @yoonyena
    @yoonyena 4 ปีที่แล้ว

    Absolute랑 relative 확실하게 이해했어요! 원래 있던 위치와 비교해서 알려주시니 너무 쉽네요 감사합니다~~

  • @graceyun9377
    @graceyun9377 4 ปีที่แล้ว +1

    혼자 position 파트 공부하다가... 뭔말인가.. 했는데 선생님 강의 들으니깐 확실히 이해되네요 ㅎ 늘 감사합니다.

    • @dream-coding
      @dream-coding  4 ปีที่แล้ว +1

      꺄아~ 미션 완료 🙌

  • @군만두-s3e
    @군만두-s3e 3 ปีที่แล้ว

    앨리님 너무 좋아요! 헷갈렸던 개념들 앨리님강의 들으면서 다잡고 있어요 정말 감사합니다