요즘 수업 너무 실습 위주라서 따라가기 어렵다..ㅜㅜ
코딩테스트에서는 이런 과제들이 주어진다는데... 정말.. 인생 쉽지않다!!!
언젠가 나도 스스로 코드를 치는 날이 오겠지?? 지금은 강사님 코드 따라치는 코린이..ㅜㅜ 가끔 타이핑 연습을 하는 거 같은 기분이 들어서 현타가 올 때도 있지만..!! 시간이 해결해주겠지~~ 라고 생각하며 수업 듣는 중!!
같이 수업을 듣는 분 중에서 현업에서 근무하시다가 오신 분도 있고 이전에 공부를 하셨던 분들도 많아서 상대적으로 많이 부족하다는 생각이 매번!! 들지만..
내가 느끼는 멘붕또한 그분들도 겪었던 과정이고, 포기하지 않고 공부했기 때문에 그만큼의 실력을 갖춘 것이라 생각하며 열심히 배우는 중이다!!
★ 호준 강사님 말씀!
왕도는 없다. 재능보다는 시간이다!!
나에게 무기는 남들보다 시간적 여유가 있다는 것!!!
대학 졸업 전까지 꾸준히 코딩 공부해서 나도 멋진 개발자가 되어야지!!!
정말 이번 과정 끝나면, 이번 교육과정 다시 복습하고 과제들도 혼자서 구현하고, 손코딩도 하고, 강사님들이 추천해주신 책들 하나씩 보면서 체계적으로 다시 공부할거다!! 코딩테스트까지!!! 그러다 보면 대학 2년 순삭당하겠지!! ㅋㅋㅋㅋㅋ 생각만해도 재밌군ㅋㅋㅋㅋㅋ 코린이의 무서운 성장을 보여주겠어!!!
이제 공부한 거 정리!! 잡담이 너무 많은 서지영씨..는 나...ㅋㅋㅋㅋ
오늘은 position에 대해서 공부하였다!! css 배치가 넘 어려움.. ㅜㅜ
과제하다보면 내 css들이 왤케 다닥다닥 붙어있는지.. 피그마도 솔직히 너무 낯설고,, 피그자 자료를 모두 써야되나 싶어서 다 복사하면 코드가 보기 싫게 지저분해지고!! 고민이 너무 많다!!
수업 자료랑 공식 문서 찾아보면 이론상으로 이해가 되지만, 실습만 하면 뭔가 어려운 것..
★ position
문서 상에 요소를 배치하는 방법을 말하며, 오프셋(Offset)을 선택적으로 사용할 수 있다.
- position: static; (기본값 / 정적인)
요소를 일반적인 문서 흐름에 따라 배치함. (위에서 아래로 물 흐르듯이)
이 경우에는 left, top, bottom, right 등 오프셋값은 비활성화 됨.
- position: relative; (부모에 대한 상대적 위치)
요소를 일반적인 문서 흐름에 따라 배치하되, 이를 사용한 경우 오프셋을 사용할 수 있음
- 참고: top은 bottom보다 우선하고, left은 right보다 우선함.
- 부모의 위치가 이동되면 그 부모를 기준으로 하기 때문에 같이 이동됨.
- position: absolute; (body를 기준으로 위치를 설정)
요소를 일반적인 문서 흐름의 배치에서 제외하기 때문에, 다음 순서의 element에 영향을 주지 않음. 즉, 다음 element는 absolute로 지정한 요소와 상관없이 배치됨.
- left,top 등 오프셋값이 따로 지정되지 않을 경우, 자기가 원래 있어야 되는 상위요소(부모 element)를 기준으로 지정됨. 단, static이 아닌 부모를 만나게 될 경우, 그 부모를 기준으로 위치가 지정됨. 만약, 부모가 static일 경우는 body를 기준으로 잡고 위치를 지정하게 됨.
- absolute을 사용한 경우, 부모와의 관계성이 끊겨서 자신의 크기는 자신의 컨텐츠 크기만해지고, 부모도 자식을 없는셈 침.
- position: fixed; (고정된 / 뷰포트를 기준으로)
특정한 위치에 화면을 고정시켜서 스크롤로부터 독립성을 가지게 됨. 즉 스크롤도 무시함.
- 하단에 고정되는 UI, 뱃지, 다크모드 설정 버튼 등에 사용됨.
- absolute와 유사
- 부모와의 관계성이 끊겨서 자신의 크기는 자신의 컨텐츠 크기만해짐.
- 부모 앨리먼트의 크기는 자식 앨리먼트의 크기를 포함하지 않음.
- absolute와 상반
- 오프셋값이 지정될 경우, 부모의 위치와 상관없이 화면의 시작부분을 기준으로 위치를 잡음.
- position: sticky; (끈적거리는 / 상위요소에 달라붙음)
평소에는 일반적이 문서 흐름에 따라 이동되지만, 스크롤되는 가장 가까운 상위요소를 만나면 오프셋이 적용되고 고정됨.
즉, 스크롤 이동으로 요소가 움직여도 스티키 요소는 고정된 상태를 유지함.
★ 수업 중 질의응답 (codepen 실습파일-2 참고)
absolute 적용시 그림자가 각 도형별로 위치함 / 도형에 relative 가 적용된 상태
.board-item { position: relative; top: 0; left: 0; width: 100px; height: 100px; transition: all .3s; }
.board-item::after { z-index: -1; content: ''; position: absolute; top: 10px; left: 10px; background-color: #999; width: 100px; height: 100px; transition: all .3s; }
fixed 적용시 그림자가 첫번째 도형에만 위치함 / 기준이 되는 도형에는 relative가 적용된 상태
.board-item { position: relative; top: 0; left: 0; width: 100px; height: 100px; transition: all .3s; }
.board-item::after { position: fixed; top: 10px; left: 10px; background-color: #999; width: 100px; height: 100px; transition: all .3s; }
- fixed는 뷰포트를 기준으로 고정된다는 거 알아두기!!!
★ 긍정의 한줄
인간의 삶 전체는 단지 한 순간에 불과하다. 인생을 즐기자. - 플루타르코스 -
오늘도 드디어 끝!!! 아 힘들어~~ㅋㅋㅋㅋㅋ 주말 힐링 가즈아~ ㅎ
