Front-End Developer

가지고 놀면서 배우는 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 ..

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

신경쓴 점 반응형 대응/ 더 손쉬운 유지보수를 위해 애초에 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은 ..