분류 전체보기

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이 선택된 것을 볼 수 있다. 밑에서는..

background-image에 no-repeat이 안되요 - 초심자의 깜찍한 실수

문제점 오늘 아래처럼 background-image를 추가하던 중, .select-btn { background-image: url(images/Polygon\ 1.png); } 드롭다운 박스를 만들면서, 아래화살표 이미지를 추가하기 위해 아래와 같이 속성에 no-repeat;를 추가하였다. .select-btn { background-image: url(images/Polygon\ 1.png) no-repeat; } 그랬더니 아래와 같이 이미지가 아예 사라져버렸네~ 내 화살표 어디갔니 개발자도구를 살펴보니 오류가 난 것을 알 수 있다. 해결 그리고 답은 의외로 간단하고 어이없었는데... stack over flow에서 찾을 수 있었다. https://stackoverflow.com/questions/1..

항상 헷갈리는 text-align, 딱 두 가지만 기억하자

text-align은 그 요소들을 담고있는 부모 박스요소에 줘야한다. text-align은 오로지 인라인 요소들만 컨트롤한다. 딱 이 개념만 확실하게 이해하고 있으면 된다. 1. text-align은 그 요소들을 담고있는 부모 박스요소에 줘야한다. 아래 사진처럼 div박스 안에 img, h1, p태그를 하나씩 주었다. french fries lorem bla bla 이 태그 안에 있는 컨텐츠들을 div박스 안에서 중앙정렬 시키고싶다. 이럴 때에는 컨텐츠들을 담고 있는 div박스에 text-align속성을 주어야 한다. div { text-align: center; } 부모 div 박스가 아닌 인라인요소인 이미지 자체에 text-align:center를 주면 안되나? 안된다. 왜냐? text-align은 ..

9주차 회고 - 이 순간 너무 소중해

내가 너무나 좋아하는 드라마 The Office의 최종화에 이런 말이 나온다. "I wish there was a way to know you're in the good old days before you've actually left them." 좋은 시절을 보내고 있다는 것을, 그게 떠나기 전에 알 수 있는 방법이 있었으면 좋겠어요. 나는 요즘에 누가 잘 하고 있냐고, 힘들지 않냐고 물어보면 '배울 수 있어서 행복한 시간 보내고 있다'라고 대답한다. 취업이 안될 까 두렵고, 이 개념이 나만 이해되지 않는 것 같아 불안한 그런 감정들은 국소적이고 편협하다. 주어진 상황을 객관적으로 바라보기가 어렵다. 그런데 한 발 짝 떨어져서 (십년 후에 내가 지금의 나를 돌아본다고 생각하면, 혹은 죽는 시점의 나?)..