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 속성과 함께 사용되어야 한다. (깜놀방지 + 트래픽 유발 방지 + 접근성 측면에서.. 멋사 프론트엔드 스쿨 2기 TIL (03.30) 🚀 Text-level semantics , 태그는 줄 바꿈을 위한 태그 은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄 바꿈이 일어나게 하는 것 정말 중요한 태그 요소는 링크를 만들 때 사용!! 만 sections, grouping content 요소를 자식으로 하는 것이 허용! 📌 Internet Explorer 는 download 속성을 지원하지 않는다. , 태그는 굵은 글꼴을 표현하고 싶을 때 사용. 지금은 사용하지 않고 CSS 사용!! 태그는 굵은 글꼴에 중요도를 더해줌, 브라우저에서 이 내용이 중요하다는 걸 인식! , 태그는 기울임 글꼴을 나타낸다. 주로 전문 용어, 문단에서 주 언어와 다른 언어로 표현된 부분(주언 어가 한글이지만 영어로 표기되었을 경우), 소설의 등장인물의 생각이 .. 멋사 프론트엔드 스쿨 2기 TIL (03.29) 🕶 URL, IP, PORT 란? www.naver.com 도메인, URL 이름 223.130.200.104 IP 주소 22, 23, 80, 443 PORT 문 도메인과 IP 둘이 같아도 PORT가 다르면 다른 화면이 나온다 (ex. 로그인했을 때 OO님 안녕하세요!!) https의 PORT는 443, http의 PORT는 80! URL 뽀개보기 📝 HTML Living Standard 란? 📕 HTML(Hyper Text Markup Language) : 뼈대 📘 CSS(Cascading Style Sheet) : 피부 📒 JavaScript : 근육 HTML 표준 HTML Living Standard https://developer.mozilla.org/ko/docs/Web/HTML 🚀 Section.. 멋사 프론트엔드 스쿨 2기 TIL (03.28) 🦁 멋사 프론트엔드 스쿨 2기 시작!! 드디어 시작했다 사실 드디어라기 보다는 금방 왔지만..ㅎ 오늘부터 8월 1일 까지의 여정이 시작됐습니다. 진짜 너무너무 재밌었던 첫 날이었습니다. 👨👩👧👧 팀 편성 및 액티비티 팀 편성을 했고, 나는 회고 3(팀명 : 사멍일냥) 팀에 속하게 됐다. 4명의 🐶파와 1명의 🐱파 ㅎㅎ 물론 나는 강아지파이다. 고양이도 너무 좋아하지만 고양이털 알레르기가 있기에 그리고 조장 제비뽑기 했는데 남는걸 골랐는데 하필 그 남는게 꽝이었다 후.. 졸지에 조장행 ㅜㅜ 살려줘 발표 토나올거같아 열심히 같이 구글 Docs로 발표자료 만드는데 컨셉을 B급 발표자료 컨셉으로 했는데 매우 충실히 잘 만든것 같다 ㅎㅎ 아 그리고 내가 젤 나이 많음 ㅜㅜ 할비는 웁니다 ㅜㅜ 🚀 이두희님과 .. 멋사 프론트엔드 스쿨 2기 합격 ㅠㅠㅠ합격 너무 감사합니다. 정말 너무너무 감사합니다. ㅜㅜㅜㅜㅜ 사실 1기 때부터 하고 싶었지만 당시 직장을 다니던 나는 9시 6시 교육은 힘들었고, 다음을 기약하면서 1월에 퇴사를 한 뒤에 프론트엔드 스쿨 2기 지원만을 계속 기다려왔다. 뜨자마자 후딱 자소서를 다 작성하고 지원완료를 하고 서류합격 후 2차 과제 전형으로 들어갔다. 간단한 로그인 페이지 구현과 영상으로 자기소개 및 앞으로의 공부계획을 3분 이내로 영상을 찍어 보내는 게 2차 과제였는데.. 나의 간절함이 부족했던 것인지 결과 발표날 예비 합격자라는 결과를 받고 ㅜㅜㅜ 사실 다른 국비지원 부트캠프는 알아보지 않았는데 발등에 불 떨어진 채 이것저것 찾고 있었다.. 예비 합격자라고는 하지만 내가 2차 과제에서 영상도 1분 30초 정도로 내고,.. 불편한 편의점 불편한 편의점 내 맘대로 뒤죽박죽 감상평 태어나 처음으로 읽었던 아니 들었던 오디오북이었다. 전자책도 있었지만 뭔가 오디오북을 한 번 경험해 보고 싶었다. 그래서 오디오북 차트에서 1위인 김호연 작가님의 '불편한 편의점'을 선택했다. 베스트셀러를 엄청 좋아하는 편은 아니지만 그래도 1위라면 실패하지 않을 거라는 생각도 있었고, 듣는 책인데 생각을 많이 해야 한다면 책을 다 듣고 다시 전자책을 읽어야 할 것 같아서 1위인 책을 선택했던 것 같다. 이 책은 각 등장인물들과 주인공인 독고씨와의 에피소드들이 책의 주 내용이다. 책 제목인 불편한 편의점 Always의 사장님과의 에피소드로 책은 시작한다. 그렇게 편의점에서 일을 시작하게 된 후 만나는 사람들과의 에피소드로 진행이 되면서 마지막엔 독고 씨의 시점에서.. 'Uncaught Error: useLocation() may be used only in the context of a <Router> component.' 에러 해결방법 MBTI 테스트 같은 테스트를 만들고 있는 과정에서 home 페이지에서 test 페이지로 그리고 test 페이지에서 result 페이지로 이동할 때 매끄러운 Page Transition을 주기 위해서 AnimatePresence를 Router에 사용했는데 그 때 에러가 발생했다. App.tsx function App() { const location = useLocation(); return ( ); } 맨 처음에는 이런 식으로 코드를 짰는데 계속해서 'Uncaught Error: useLocation() may be used only in the context of a component.' 에러가 발생했다. 그래서 구글링을 통해 StackOverFlow 에서 해결 방법을 찾아낼 수 있었다. 답변은 in.. 이전 1 2 3 4 5 다음
