전체 글

가지고 놀면서 배우는 position: absolute;

div 안에 div 안에 div 1. .child에 position:absolute를 주자. 그리고 top과 left를 0을 줌으로써, 어디를 기준으로 위치가 이동되는지 보자. .child { width: 30px; height: 30px; background-color: orange; position: absolute; top: 0; left: 0; } 뷰포트를 기준으로 top: 0, left: 0이 적용되어 뷰포트 최상단 왼쪽에 붙었다. 기준이 되는 부모컨테이너를 지정해주지 않고 단독으로 absolute를 가지고 있으면, 뷰포트 전체 창 기준에서 움직인다. 흔히 우리가 position:absolute 사용 시 기준이 되는 부모컨테이너를 지정해주지 않으면 body 혹은 html을 기준으로 움직인다고 하..

Sass 연습 - @function 와 @return

Sass 첫 경험! CSS를 더 가독성 있게, 반복되는 작업들을 줄여줄 수 있도록 효율성을 올리기 위해 사용한다고 한다. 그 중 배웠던 기능 한가지를 정리한다. 변수에 여러가지 색깔 넣어주기 1 2 3 4 $colors: ( primary: #005dff, accent: #fff6bb, ); cs $colors라는 변수명 안에 두가지 컬러를 용도에 따라 지정해 주었다. 여기서는 내가 만드는 웹페이지에 주로 사용할 primary와 강조하는 요소에 사용할 accent색깔을 넣어주었는데, 당연히 버튼에 사용할 색, 배너에 사용할 색 등 원하는대로 지정이 다 가능하다! 1 2 3 4 .background { background-color: map-get($colors, primary); } Colored by ..

10주차 회고 - 동굴 밖으로 나와서

https://www.youtube.com/channel/UCFk1UTFYVBn0oFzP9eGCN5A 세상에 나 개발자 준비한다고 알리기! 코햄의 프론트앤드유치원 www.youtube.com 운영진과의 만남 한 달 여간 온라인으로 내적 유대감을 쌓아왔던 멋사 운영진분들과 직접 오프라인에서 만나는 시간을 가졌다. 참 시작부터 느낀거지만 운영진 분들은 항상 조금이라도 불편한 부분이 있나, 더 도와줄 건 없나 계속해서 물어보고 또 정말 가능한건 빠르게 반영한다. 이 과정에서 수강생들은 정서적인 안정감과 함께 교육과정에 대한 믿음 + 과정 완주를 위한 책임감이 생기는데, 이 프로그램에 자신의 목소리가 반영되어있다고 생각하기에 그런 듯 하다. 동기들과의 첫 만남 운영진과의 만남 이후에 정말 많은 멋사 2기 동료들..

미디어쿼리를 이용한 반응형 웹 구현하기

신경쓴 점 반응형 대응/ 더 손쉬운 유지보수를 위해 애초에 html font-size를 10으로 맞춰놓고, 미디어쿼리에서 rem값을 사용하여 font-size를 조절했다. margin이나 padding의 값도 반응형을 위해 rem으로 조절했다. flex를 사용하여 두 컨텐츠가 direction을 row 혹은 colum으로 손쉽게 방향을 전환할 수 있도록 했다. 배운 점 미디어쿼리를 처음 사용해봤는데 생각보다 어렵지 않았다. min-width 와 max-width는 생각보다 이름이 막 와닫지 않는다. 확실히 외워버려야겠다! 사실 저 텍스트들이 한글자씩 다음행으로 떨어지는게 싫어서 word-break: keep all;을 설정했는데 먹지 않았다. 시간부족으로 일단 넘겼으나, 찾아보니 빔캠프에 영상이 있어 공..

헷갈리는 CSS Combinators - 형제선택자 편

매번 헷갈리지만 그냥저냥 넘어갔던 선택자들을 정리하려 한다. 실무적인 측면에서도 이런 선택자들을 활용해 CSS적인 문제를 해결해줄 수 있는 팁들이 많으니 꼭 알아두도록 하자. 예제 핵심: div를 제외한 h1, h2, h3, h4 그리고 ul은 모두 형제요소이다. 나는야 h1 짬뽕 탕수육 피자 나는야 h2 사과 딸기 배 나는야 h3 광주 서울 부산 나는야 h4 자전거 버스 지하철 형제 선택자, 무슨말이야? 아래 선택자는 뭘 선택하고 있을까? h1 + ul { background-color: yellow; } = 너가 ul인데, 너 바로 앞 형제가 h1야? 라는 의미다. (ul이면서, 바로 앞에 형제요소로 h1을 가지고 있는) 바로 앞 형제요소인 h1을 가지고있는 ul이 선택된 것을 볼 수 있다. 밑에서는..