썸네일 네거티브 마진(negative margin) 🚀 네거티브 마진 네거티브 마진이란 말 그대로 margin에 음수 값을 주는 것이다.(margin : -100px) 아니 근데 이게 블로그를 따로 쓸만큼 중요한가요~?라고 생각할 수 있지만 생각보다 알아두면 디자인적으로 유용하게 사용할 수 있고, margin에 대해서 조금 더 심도 깊게 알 수 있어서 네거티브 마진에 대해 글을 쓰게 되었다. 솔직히 백문이 불여일타다닥이니까 바로 예시 코딩해보도록 하겠다. 1. 네거티브 마진 사용 예시 See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen. 이 뭔가 심심한 디자인을 보고 있으면 (물론 코드펜으로 막 해놔서 못생겼지만) 뭔가 저 이미지를 저 보더라인 밖으로 살짝 빼내는 디자인을 하고 싶어 진다.(아니어도 ..
썸네일 멋사 프론트엔드 스쿨 3주차 회고 조금 늦은 3주 차 회고 일단 축하 좀요 ^^ 저 2주 차 칭찬왕 했습니다!! 크.. 1주 차 칭찬 학생 순위 안에 들었었는데 칭찬왕을 먹어버렸다~~ ㅎㅎㅎ 그리고 사실 좀 늦어서 3주 차 칭찬왕 뽑았는데 3팀의 막냉이 다희 님께서 받으셨다 ㅎㅅㅎ 다희 님이 사실 고생 많이 하시고 열심히 하셨는데 칭찬 학생에 못 들어가서 의아했는데 역시,, 다희 님이 뽑힐 줄 알았다 후후 그리고 클래스 1에서 칭찬 학생 4명이나 배출함 거의 명문 클래스 ㅋㅋㅋㅋㅋㅋㅋㅋ 그리고 나도 들어감 3주 연속^^ 이번 주는 사실 못 들어갈 줄 알았는데,, 감사합니다!! 우선 프로젝트를 진행하던 게 있는데 사실 잘 풀리지 않아서 멘털적으로 조금 힘들었다. 잘 풀려서 해결됐으면 ㅎㅎ 그리고 확실히 내 문제점이 점점 보이기 시작한 주였..
썸네일 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. 요렇게 정렬을 하는데 용이하게 사용할 수 있으나 큰 문제점이..
썸네일 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를 자식 요소에서 사용했을 경우에 ..
썸네일 멋사 프론트엔드 스쿨 2기 TIL (04.05) 🚀 Tabular data table 태그는 테이블을 생성할 때 사용(표 만들 때!) table의 마크업 구조도 caption은 테이블의 제목이나 설명을 의미, 테이블 요소의 첫번째 자식으로 사용!! (legend와 비슷) caption은 꼭 넣어주는게 좋다 접근성 측면이나, SEO 측면이나! , , table 내부의 header, main, footer의 느낌이라고 보면 될 것 같다. 보통 tfoot에는 total(소계, 합계)값을 사용한다. , , tr 태그는 테이블의 행을 나눌 때 사용 tr에는 넓이와 높이를 줄 수 없다. td 태그는 tr 태그로 나눈 행에서 셀을 분리할 때 사용한다. 텍스트, 이미지, 목록, 테이블 등을 포함할 수 있다. th 태그는 행, 열의 머리말을 나타내는 데 사용한다. ..
썸네일 멋사 프론트엔드 스쿨 2기 TIL (04.04) 🚀 Forms 폼은 정보를 입력하는 영역(ex. 로그인 아이디 비밀번호 입력, 회원가입 시 입력하는 양식) 폼 동작 방식 웹 페이지에 있는 form에 데이터 입력 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동 웹 서버는 데이터를 처리하기 위해 APP 호출 필요에 따라 APP은 DB로 데이터 전송 DB에서 CRUD 작업이 일어나고 작업 결과를 APP, WEB에 전송 웹 서버는 받은 결과를 Client 브라우저에게 보낸다. 폼의 속성 action : 입력 값을 전송할 페이지를 나타냄 method : 폼의 데이터를 전송할 방법을 정의한다. 속성에는 get과 post가 있다. 📌 CRUD는 Create, Read, Update, Delete의 약자이다 📌 GET VS POST get : url로서..
라이브러리 브랜드 그룹 | 공대생의 개발자 도전기

티스토리툴바