네거티브 마진(negative margin) 🚀 네거티브 마진 네거티브 마진이란 말 그대로 margin에 음수 값을 주는 것이다.(margin : -100px) 아니 근데 이게 블로그를 따로 쓸만큼 중요한가요~?라고 생각할 수 있지만 생각보다 알아두면 디자인적으로 유용하게 사용할 수 있고, margin에 대해서 조금 더 심도 깊게 알 수 있어서 네거티브 마진에 대해 글을 쓰게 되었다. 솔직히 백문이 불여일타다닥이니까 바로 예시 코딩해보도록 하겠다. 1. 네거티브 마진 사용 예시 See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen. 이 뭔가 심심한 디자인을 보고 있으면 (물론 코드펜으로 막 해놔서 못생겼지만) 뭔가 저 이미지를 저 보더라인 밖으로 살짝 빼내는 디자인을 하고 싶어 진다.(아니어도 .. 멋사 프론트엔드 스쿨 4주차 회고 눈 떠보니 어느새 한 달이 지났고, 앞으로 멋사와의 함께할 시간이 100일도 안 남았는 사실에 적잖이 충격을 받은 날이었다.. 정말 시간이 빨리빨리 지나간다. 사실 지금 너무 행복하다. 같은 꿈과 목표를 갖고 공부하는 동기들과 정말 꼼꼼하게 수업해주시는 강사진 분들, 어떤 질문에도 성심성의껏 답해주시는 멘토분들, 그리고 항상 아기사자들 멘털 케어해주시는 운영진분들까지 멋사 프런트엔드 스쿨이 내 첫 부트캠프이지만 사실 어느 부트캠프와 비교해도 꿇리지 않을 것이라 진짜 장담한다. 꿇린다?? 아니 최고다. 이 시간이 너무 행복해서 왜 4개월인지 아쉽다고 느껴졌다. 6개월이면 더 좋았을걸 ㅜㅜ 진짜 너무 아쉬울 따름.. 그리고 캐릭터 경진대회 선물 왔음 ㅎㅎ 저번 주 토요일에 왔는데 놀러 갔다 와서 일요일에 열.. Sass(SCSS) 부셔보기 🔨 🚀 Sass(SCSS) 1. Sass(SCSS)가 뭔가요? Sass는 CSS로 컴파일되는 스타일 시트 확장 언어이고 CSS 전처리기의 하나이다(less, stylus 등이 있음). 2. Sass(SCSS)를 왜 쓰나요? 스타일시트가 커지면 커질수록 유지보수가 어려워지기 때문에 Sass안에 있는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에는 없는 편의 기능들이 있어서 시간 절약 가능 코드 재사용이 가능하기 때문에 3. Sass와 SCSS 차이점이 뭐예요? Sass //Sass $font-stack: Helvetica, sans-serif $primary-color : #333 body font: 100% $font-stack color: $primary-color SCSS //SCSS.. 멋사 프론트엔드 스쿨 3주차 회고 조금 늦은 3주 차 회고 일단 축하 좀요 ^^ 저 2주 차 칭찬왕 했습니다!! 크.. 1주 차 칭찬 학생 순위 안에 들었었는데 칭찬왕을 먹어버렸다~~ ㅎㅎㅎ 그리고 사실 좀 늦어서 3주 차 칭찬왕 뽑았는데 3팀의 막냉이 다희 님께서 받으셨다 ㅎㅅㅎ 다희 님이 사실 고생 많이 하시고 열심히 하셨는데 칭찬 학생에 못 들어가서 의아했는데 역시,, 다희 님이 뽑힐 줄 알았다 후후 그리고 클래스 1에서 칭찬 학생 4명이나 배출함 거의 명문 클래스 ㅋㅋㅋㅋㅋㅋㅋㅋ 그리고 나도 들어감 3주 연속^^ 이번 주는 사실 못 들어갈 줄 알았는데,, 감사합니다!! 우선 프로젝트를 진행하던 게 있는데 사실 잘 풀리지 않아서 멘털적으로 조금 힘들었다. 잘 풀려서 해결됐으면 ㅎㅎ 그리고 확실히 내 문제점이 점점 보이기 시작한 주였.. 레티나 디스플레이 대응법(CSS Sprite 기법을 곁들인) 🚀 레티나 디스플레이 물먹은 듯한 이미지 해결법 우선 해결법에 들어가기 앞서 반응형으로 해결하는 방법도 있는데 그것은 추후에 업데이트할 것이다.(나중에 보시는 분들은 이미 업데이트돼 있을지도!!) 먼저 다룰 방법은 이미지의 사이즈를 2배로 늘려서 원사이즈로 사용하는 것이다. 예를 들자면 64 x 64 인 이미지를 다운로드하여서 32 x 32 사이즈로 사용하는 방법이다. like 유압프레스 근데 이것만 하기엔 재미없으니까 이미지 sprite 기법도 함께 사용해보겠다. 1. CSS Sprite 기법 (Image Sprite 기법) 먼저 sprite 기법을 살펴보자 웹사이트를 만들면 여러 이미지 파일을 사용하게 되는데 이 때 여러 가지의 이미지를 하나의 이미지 파일 안에 배치해서 이미지 로드 부담을 줄이는 방.. 커스텀 checkbox, select 박스 🚀 input checkbox, select 박스 커스텀하기 checkbox, select 둘의 브라우저 스타일은 너무나도 못생겼기에 커스텀하는 방법을 써보겠다. 1. checkbox 커스텀 See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen. 자 이제 하나하나 뜯어보면 우선 input에 준 txt-hide가 중요한 키 포인트다. checkbox는 커스텀하기 어렵기 때문에 checkbox를 숨겨준 다음 label의 가상 클래스를 커스텀해서 꾸미는 방식으로 진행할 건데!! 여기서 키포인트 주로 알고 있는 방법으로는 display: none을 줘서 숨기는 방법이 있을 텐데 이는 접근성 측면에서 좋지 않은 방법이므로!! .txt-hide { positio.. CSS 설계 기법 🚀 CSS 설계 기법 CSS는 왜 저렇게 쓸까?? 클래스명은 왜 저렇게 쓸까?? 나는 camelCase를 쓰고 싶어!! 등등 개개인의 코드 스타일이 있을 것이다. 하지만 어느 정도 기준은 필요하다 기준이 없다면 그저 대혼란이 올 수도 있기 때문이다. 예를 들어 클래스명을 내 맘대로 s-d_e_w_e_r-r 이런 식으로 작성한다면?? 생각만 해도 끔찍~~ 그래서 CSS는 대표적으로 3가지의 설계 기법이 존재한다. 1. OOCSS(Object Oriented CSS) / ref : https://www.slideshare.net/stubbornella/object-oriented-css OOCSS의 개념은 레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법이다. 방법으로는 구조와 스킨을 분리한다. (같은.. float(overflow와 bfc를 곁들인..) 🚀 Float 1. float이란? 위 사진 처럼 그림이나 이미지를 따라 흐르는 텍스트 레이아웃을 구현하기 위해서 탄생한 속성이다. See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen. 2. 그럼 저런 용도로만 쓸까? 사실은 저렇게 사용도 하지만 주로 블록 박스 요소를 정렬하는 가장 기본적인 방법으로 사용되고 있다. - float : left See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen. - float : right See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen. 3. 요렇게 정렬을 하는데 용이하게 사용할 수 있으나 큰 문제점이.. 멋사 프론트엔드 스쿨 2주차 회고 앞으로는 주로 회고를 올리고 TIL보다는 그 때 그 때 모르는 것, 중요하다고 생각하는 것 위주로 블로그에 정리할 예정입니다요!! 2주차를 돌아보며.. 물론 조금 늦은감이 있지만 회고해보자면 HTML을 끝내고 CSS를 들어가게 됐다. CSS 수업이 시작한 만큼 좀 더 속도가 붙었고, 사실은 조금 따라가지 못했던 것도 있던 것 같다. 과제를 조금 어렵게 생각했던 것 같았다. 그치만 어렵게 생각해서 IR 기법에 대해 생각해 볼 수 있는 계기가 되었던 것 같다. 복습량이 많이 부족하다. 지금까지 배웠던 것을 천천히 읽어보며 한 번 복습을 해봤는데 사실 아직도 헷갈리는 부분이 있다. 이 부분은 좀 더 복습량을 올려서 HTML, CSS 기초를 잘 다져야겠다. 멋사 들어오기 전부터 하던 프로젝트가 있는데 사실 과제.. line-height 파헤치기 🚀 line-height line-height는 글자의 높이를 지정하는 속성이다. line-height의 단위로는 normal, number, px, em, % 등이 있는데 number를 사용하는 것이 좋다. 좋은 이유? 한 번 araboja 참고로 initial value는 normal임!! font마다 갖고 있는 글자의 기본 높이를 의미! 1. line-height를 px값으로 줬을 경우 See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen. 2. line-height를 em값으로 줬을 경우 See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen. 더 큰 font를 자식 요소에서 사용했을 경우에 .. 올바른 IR 기법 🚀 IR (Image Replacement) 기법 IR 기법은 이제 시각장애인 분들을 위해 이미지 대신 적절한 대체 텍스트를 제공하는 것이다. 웹 접근성이란 단어가 있다. 웹 접근성이 무슨 뜻이냐면 어떠한 사용자더라도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 하는 것을 말한다. 주로 IR 기법을 쓰는 곳에는 img 태그의 alt 속성 값으로 표현하기에는 너무 too much 하게 길 때 예를 들면 '부뚜막에 올라앉은 고양이를 쳐다보면서 뒤통수를 긁는 원숭이를 바라보는 긴 머리를 찰랑 거리...' 이런 식이라면 따로 p태그로 빼서 이미지를 소개한다. css로 background-img 속성을 사용해서 처리한 의미 있는 이미지일 때 사용하는데(의미 있는 이미지라면 img 태그.. px? em? rem? CSS 다양한 단위 정리 🚀 단위 코딩을 하다 보면 px을 써야 하나? em?? em은 또 뭐지 rem? rem은 뭐고 em은 뭐야!! 할 때가 있다. 나도 그렇기 때문에 지금 이 글을 정리하려고 한다. px, em, rem은 뭔지 araboja. 우선 CSS에서 사용할 수 있는 단위는 크게 세 가지이다. 절대 길이 단위 : cm, mm, px 등 상대 길이 단위 : em, rem, vw, vh 등 백분율 : % 세 가지 중 절대 길이 단위부터 살펴보겠다. 왜냐고?? 내가 px만 쓰면서 했으니까~ 반성하는 걸루다가 그냥 1. 절대 길이 단위 px '화소'를 의미하는 Pixel(Picture + Element)의 약자로 디바이스 화면에서 이미지를 표현하는 가장 작은 단위이다. 컴퓨터 모니터 설정을 보면 1920 x 1060 인가 .. 이전 1 2 3 4 5 다음
