#12 위치를 내맘대로! CSS Position 이해하기 - 웹 코딩 강좌

[@mappingmind]

코딩은 정말 기본부터 해야합니다! 이게 바로 그 기본이구요! 저처럼 시험 준비한다고 무작정 하드코딩만 하다보면 .. 전혀 안늡니다! 이 영상이 도움이 많이많이 됩니다!

[@designbase]

좋은 말씀 감사합니다!ㅎㅎ

[@Sunduck04]

무작정 따라하며 공부하던 중 가장 이해하기 힘들고 개념을 잡기 힘든게 포지션이였습니다(물론 z-index 포함), 근데 궁금했던 내용들을 너무 잘 설명해줘서..ㅠㅠ 감동입니다. 특히 디자인을 코딩으로 구현할 때의 궁금증들이 있는데, 이런 부분을 너무 잘 찝어서 설명해주시고, 고민해야하는 부분들을 이야기 해주셔서 감사합니다. 포지션을 어떻게 해야하는지 궁금하거나 막힐때 마다 다시 와서 완전한 이해가 갈때까지 들어야겠습니다.

[@designbase]

포지션과 float, flex 이렇게만 개념을 익히면 웬만한 레이아웃은 다 코드로 짜실수있을거에요ㅎㅎ 반복학습이 중요하죠

[@user-pb4ww4mg2q]

이번 영상도 정말 감동이에요. 이렇게 쉽게 이해가 갈 수 있게 알려주시기까지 선생님께서 고민해 주시고 수고해 주셔서 정말 감사합니다 ~ :) 선생님 덕분에 쉽고 재미있게 배웠습니다 !

[@designbase]

감사합니다!ㅎㅎ 재미를 느끼셨다니!

[@ppangttuck03]

맨날 배워도 까먹고 안만드니깐 까먹고 나는 백엔드 주력으로 공부하니까 괜찮겠지 하면서 토이프로젝트 만들때마다 부트스트랩 떡칠되고.. 맘에 안드는거 투성이였는데 이번에 제대로 배워서 풀스택으로 가보려고요! 강의가 너무 좋아서 멤버쉽까지 구독하고 듣고있습니다!

[@designbase]

와우 풀스텍 개발자되시는데 조금이나마 도움됐음좋겠네요ㅎㅎ 감사합니다 :)

[@김팬시]

감사합니다

[@designbase]

감사합니다👍

[@user-is2qp2gn6o]

무작정 홈페이지 만들고 relative 와 absolute의 효과는 비슷한데 어떤 차이가 있는지 몰랐는데 이 영상으로 한방에 이해가 됬네요!! 역시 저는 그림+영상으로 봐야 정의가 내려지는듯 합니다. 설명 엄청 잘하십니다.

[@designbase]

도움이 되셨다니 다행입니다.ㅎㅎ 좋은 영상 많이 올려드릴게요!

[@sosogood880]

속이 다 시원해집니다. 감사합니다~!

[@designbase]

감사합니다☺️

[@유서형-b9j]

이번에도 유용한 강의 감사합니다!!

[@designbase]

감사합니다 :)

[@user-js3gd2ce8q]

웹페이지에서 이미지 위치 지정하는 게 궁금했는데 영상 잘 보고 구독했습니다 :)

[@designbase]

감사합니다~! ㅎㅎ

[@AniPJS12]

예시랑 설명이 넘 좋네요!

[@designbase]

감사합니다!ㅎㅎ

[@2buzzang]

웹디자인의 길에 발을 내딛게 해주셨습니다 감사합니다

[@designbase]

화이팅입니다👏🏻👏🏻

[@jiwon7689]

쓰앵님 넘 이해 잘돼요 ㅜ 감사해요

[@designbase]

다행이네요! 감사합니다ㅎㅎ

[@gyeommyu]

설명 진짜 잘하시네요

[@designbase]

감사합니다ㅎㅎ🤗

[@user-pg3qy7gb3j]

이해잘돼요 넘우 감사해요 눈물좔좔

[@designbase]

감사합니다ㅎㅎ👍

[@hj-ck8ek]

img-wrap 안에 image-2가 absolute 일 경우 image-1가 부모 기준이 된다고 하셨는데, 그렇게 되면 image-1 가로 사이즈에 맞춰서 빨간 박스(6:47)가 생길 것 같은데, 오른쪽에도 왼쪽만큼 여백이 생기는 건 왜인 걸까요??

[@designbase]

image-2가 absolute일경우 image-1이 부모 기준된다기 보다는, img-wrap이 부모기 때문에 img-wrap 기준으로 됩니다. 근데, img-wrap 자체가 display가 block 속성이다보니 width가 100%로 적용되어서 우측에 사이즈가 여백이 보이는것입니다~!

[@user-bb8sn8tf2v]

회원가입 했는데 회원전용이 안보여 확인해 봤더니 1개월 되어야 별을 달수 있더군요... 횟수를 건너뛰지 않고 쭉~~~ 보고 싶은데 11회차는 못보고 12회로 넘어 왔어요.. 너무 아쉽!! 그래도 열심히 따라해볼게요.. 너무 귀에 쏙쏙 들어오는 강의입니다.!!

[@designbase]

안녕하세요! 회원전용이 안보이는거라면 나도이제 풀스텍디자이너 등급으로 선택을 안하신것같습니다..!! 확인 부탁드려요!🥲

[@user-bb8sn8tf2v]

@@designbase 앗!! 그렇네요.. 확인하고 등업했어요... 소중한자료 잘쓰겠씁니다.

[@user-cq8ze3vg9o]

와 진짜 재밌다.. 다음 강좌는 언제 올라오나요??

[@designbase]

재밌나요???ㅎㅎ 너무 좋은 반응👍 주말에 편집해서 웹 디자인 강좌와 함께 다음주 월, 수에 업로드 예정입니다.

[@user-wb4lf3gd7t]

두개의 버튼 위치를 지정하고 싶은데 Flex 태그도 잇더라고요. Position태그랑 Flex태그중에 뭐가 적합한가요? 둘다 위치를 지정해주는 태그 같은데... ㅜㅜ

[@designbase]

Display는 본인 혹은 자식 선택자(하위요소)에 대해 배열을 조절할때 시용하는 기능이고 그중에 flex라는 기능이 있어요. 포지션은 현재 혹은 부모의 위치를 기준으로 특정 위치에 배치할때 사용하는기능이에요. 둘이 비교대상은 아니고 둘다 사용할때도 있습니다ㅎㅎ

[@user-is8sf2ts3z]

선생님 혹시 예제는 직접 만들어서 해보는건가요?! 멤버십 이용 중입니다!

[@designbase]

안녕하세요ㅎㅎ 예제는 멤버십 커뮤니티에서 다운받아 영상보면서 직접 따라할수 있습니다 :)

[@user-is8sf2ts3z]

@@designbase 멤버십 커뮤니티에는 안 보이는 예제들은 어떻게 해야할까요?

[@nnw4459]

7:12 빨간색 테두리 라인이 위에 검정색이미지 폭에 맞춰져야 할 것 같은데 왜 컨테이너 패딩값에 맞춰지는지 궁금해요.

[@designbase]

.img-wrap에 빨간 border값을 준건데, 해당 클래스를 가진 Div 태그의 display 속성이 block이라서 그렇습니다. inline-block으로 바꾸게 되면 하위에 있는 검정이미지 폭에 맞춰지게 됩니다.

[@user-gg3mr5bx9n]

항상 영상 보면서 많이 배우고 있습니다! :-) 이번 영상 보면서 파일을 만들던 중 본문 텍스트가 길어서 두 번째 이미지와 겹치더라구요 ㅜㅜ 그 부분은 어떻게 해결해야 할까요?

[@designbase]

텍스트의 최대폭을 조절해보세요! width를 vw 단위로 조절하셔도됩니다.

[@designbase]

디자인을 어떻게 했냐에 따라 혹은 코드를 어떻게 짰냐, 반응형은 어디까지 대응하냐에 따라서 코드를 적는 방법이 달라서ㅠㅠ 이리저리 고민 많이 해보셔야됩니다!

[@user-gg3mr5bx9n]

감사합니다 ㅠㅠ! 디자인베이스님 덕분에 해결됐어요!

[@designbase]

@@user-gg3mr5bx9n 다행이네요!ㅎㅎ

[@user-lq4vf5hd6m]

7:58 헷갈리는게 있습니다. 문서 좌표를 기준으로 할때는 오른쪽으로 갈수록 값이 커지고, 아래로 갈수록 값이 커지는데 이 아이는 absolute라서 reative가 기준이고 그 기준에서 y축이 값이 커질 수록 위로, 작아질 수록 아래로 가는 건가요? 그리고 x축은 image-2부분까지 합쳐진것 같은 느낌이 드네요.. 원래는 저 검정색 부분까지가 기준 아닌까요?

[@designbase]

relative는 현재 기준을 가지고 상대적으로 몇으로 이동할래?가 되는거고, absolute를 사용하면 좌표의 기준이 부모의 너비가 기준이 됩니다. x: -10px로 하면 부모 테두리를 기준으로 왼쪽으로 10px이동하라는 의미에요

[@kohahn21]

fixed 하고 width 백프로하면 이 백프로는 누구한테 상속받은값인지 아시나요?

[@designbase]

Fixed는 100%하면 뷰포트 기준입니다. 만약 부모 기준으로 하려면 width: inherit 처리하거나 자바스크립트 이용해요.