썸네일 커스텀 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 태그..
썸네일 Inline 박스 요소와 block 박스 요소 간의 차이 🚀 인라인 박스 vs 블록 박스 CSS에는 크게 두 가지 박스 유형이 있는데 바로 블록 박스와 인라인 박스이다. 둘의 차이점을 확인해보자!! 1. 블록 박스 사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채운다. 상위 컨테이너에서 사용 가능한 공간을 채움 width, height 속성 사용 가능 padding, margin, border 사용 가능, 해당 속성들이 다른 요소들을 밀어냄 2. 인라인 박스 콘텐츠의 크기만큼 박스의 크기가 커지고 작아짐, 따라서 줄 바뀜이 없음 width, height 속성 사용 불가 padding, border 속성 사용 가능 하지만 margin은 좌우만 조절 가능, 해당 속성들은 다른 요소들을 밀어내지 않음!! 예시 See the P..
썸네일 CSS 마진 병합 현상 🚀 마진 병합 현상 어라라 나는 분명 마진 값을 줬는데 맘처럼 여백이 생기지 않는 경우가 있을 수 있다. 이때는 마진 병합 현상이 일어난 것인데 우선 마진 병합 현상에 대해 알아보자 마진 병합 현상 마진 병합 현상은 붙어있는 블록 요소의 상하단 마진이 병합되는 현상을 말한다. 이러한 마진 병합 현상이 일어나려면 조건이 필요한데 마진 병합 현상의 조건 붙어있는 block요소끼리만 일어난다. 좌우는 일어나지 않고 상하단만 일어난다. 아니 알겠는데 이딴게 왜 일어나냐고요!! 그냥 하면 될 것을!!이라 생각할 수 있지만 사실 디자인하기에는 매우 용이하다 ^^ 브라우저야 고마워~ 하지만 원치 않는 마진 병합을 만날 수도 있다. 부모와 자식간의 마진 병합 See the Pen Untitled by alstjr594..
썸네일 멋사 프론트엔드 스쿨 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로서..
썸네일 멋사 프론트엔드 스쿨 2기 TIL (04.01) 🚀 특강 (빔 캠프 : 이종찬 강사님) CSS 첫발!! 두근..🙊 드디어 CSS를 1주 차 마지막 날인 금요일에 특강을 통해 처음 접하게 됐다. CSS 첫 강의인데 빔 캠프 종찬 님의 강의라니 역시.. 멋사 오길 잘했어 후.. 그럼 오늘 배웠던 CSS를 정리해보겠다. CSS의 기본 형식 CSS Property 속성을 만났을 때 관심을 가져야 할 부분들 초기값(initial value) Property를 MDN에 검색해서 보면 초기값이 적혀있다. 앞으론 Property를 만났다면 이건 초기값이 뭘까? 하는 의문을 품기를 바란다. 상속(inheritance) 상속여부 역시 MDN에서 확인해볼 수 있다. 상속이 가능한 property가 있고, 그렇지 않은 것도 있으니 확인해보고 사용해보자!! 기본 스타일(U..
썸네일 멋사 프론트엔드 스쿨 2기 TIL (03.31) 🚀 Embedded content(30일 부터 이어서) 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용 width, height 속성으로 크기 조절 가능, default는 width: 300px, height: 150px src 속성에 불러올 HTML링크를 설정할 수 있다 보통 유튜브 영상을 불러올 때 많이 사용 frameborder : 사용하지 않음 CSS border 속성 사용 allow : iframe 에서 허용할 기능들을 지정 allowfullscreen : 전체화면을 지원!! ⭐️ autoplay 속성은 브라우저 정책 상 일부 모바일 브라우저에 작동하지 않을 수 있으며, 항상 mute 속성과 함께 사용되어야 한다. (깜놀방지 + 트래픽 유발 방지 + 접근성 측면에서..
라이브러리 브랜드 그룹 | 공대생의 개발자 도전기

티스토리툴바