CSS

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 ..

헷갈리는 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은 ..

그냥 꾸미면 되는게 아냐..? - input 체크박스 꾸미기

input 속성의 타입을 checkbox로 만들어주면, 위와 같은 모양의 체크박스가 default로 유지된다. 버튼처럼 그냥 보더를 없애고 예쁘게 꾸미면 되는 줄 알았는데... 그게 아니다? 사실 체크박스는 기본 모양을 다르게 꾸며서 (버튼 꾸미는 것 처럼) 스타일링을 하는 것이 아니고, 기본 모양을 아예 보이지 않게 처리 한 뒤, 그 공간에 원하는 형태의 박스 이미지를 넣어줌으로써(이미지였다니!!) 변경하는 것이다. 체크 했을 때의 변경 된 모습은, 가상선택자 :checked를 사용하여 체크시 변경된 모습의 이미지를 하나 더 넣어주는 것이다.(속았다!) 체크박스 구현해보기 HTML 로그인 상태 유지 위의 체크박스를 만들어주겠다. 1. 일단 기본 체크박스를 안보이게 만들자. input[id="chkbox..

위니브 로그인페이지 클론코딩(멋쟁이사자처럼 지원과제)

URL: https://koreanhamster.github.io/weniv_login_page/ 소스코드: https://github.com/Koreanhamster/weniv_login_page 결과물 구현시 신경 쓴 점 웹 접근성 두번 째 로그인 페이지 - 보여지는 순서대로 마크업을 하면 스크린리더 상에서 아이디 입력으로 넘어가기 전에 닫기버튼이 나오기 때문에, 닫기버튼을 마크업 맨 마지막으로 배치하고 CSS를 통해 상단에 위치하게 함 소스 절약 각 회사 아이콘에 이미지 스프라이트 기법 사용 - 1장의 이미지만 사용함으로서 소스 및 로딩시간 절약 부딪혔던 문제점 1. 약간의 삽질 회원가입과 아이디/비밀번호찾기 사이에 있는 저 수직라인을 만들고 싶었다. 가상요소를 생성하여 라인을 만들어주려고 했는데,..