티스토리

신예리의 개발자취

검색하기

블로그 홈

신예리의 개발자취

shinye0213.tistory.com/m

나의 코딩 삽질 연대기

구독자: 3

방명록 방문하기

주요 글 목록

[CSS] 100%와 100vw/100vh % %는 부모의 영향을 받는다. 정확히 말하면 부모의 높이/너비 대비 자식의 높이/너비를 지정해주는 단위다. vh, vw vh와 vw는 사용자의 눈에 보이는 스크린 범위에 영향을 받는다. 100vh 1vh는 1/100 viewport-height, 즉 뷰포트(스크린) 기준 100분의 1이다. 따라서 100vh는 뷰포트 전체 높이가 된다. 100vw 1vw 역시 1/100 view-width, 즉 뷰포트 기준 100분의 1이다. 100vw는 뷰포트 전체 너비와 같다. 참고 [CSS] vh란? / vw란? / what is vh? ❓ / %와의 차이 vh = viewport height vw = viewport width 즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다. 100vh.. 공감수 1 댓글수 0 2022. 1. 27.
[CSS] position: fixed;와 position: sticky; position: fixed; position: sticky; 결론 메인 내비게이션 바는 fixed를, 특정 영역 안에서만 움직이는 헤더는 sticky를 적용하는 게 좋다. 근데 어차피 sticky는 IE에서 못 쓰니까 웬만하면 fixed를 쓰자. 참고 position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다. developer.mozilla.org 공감수 0 댓글수 0 2022. 1. 26.
[CSS] display: none;과 visibility: hidden;과 opacity: 0; display: none; 해당 콘텐츠를 아예 치워버리기 때문에 콘텐츠가 차지하던 공간도 함께 없어진다. visibility: hidden; 해당 콘텐츠가 눈에 보이지 않을 뿐, 콘텐츠가 차지하던 공간은 그대로 남겨둔다. opacity: 0; visibility: hidden;처럼 눈에 보이지 않되 공간을 차지한다. 그리고 display: none;이나 visibility: hidden;과는 달리 이벤트가 정상적으로 작동한다. 요약 001.html normal 보이는가? O 이벤트 작동 O 공간 차지 O display: none; 보이는가? X 이벤트 작동 X 공간 차지 X visibility: hidden; 보이는가? X 이벤트 작동 X 공간 차지 O opacity: 0; 보이는가? X 이벤트 작동 O.. 공감수 0 댓글수 0 2022. 1. 25.
[CSS] normalize.css CSS 표준화 우선 reset.css를 알아야 normalize.css를 이해할 수 있다. reset.css는 CSS 설정을 초기화(reset) 하는 것이다. 하나부터 열까지 초기화 하기 때문에, 아주 사소한 속성까지 재설정해야 한다. 때로는 default CSS에서 시작하는 것보다 시간이 더 걸린다. '아 이런 것까지 없애버렸다고? 저런 것도 다 설정해줘야 한다고?'라는 생각이 들 수도 있다. reset.css CSS 초기화 브라우저마다 CSS의 설정값이 존재하는데 이를 0, 1, none 따위의 기본값으로 설정해 모두 초기화 하는 것을 뜻한다. CSS를 초기화하면 브라우저가 달라도 최대한 똑같은 화면이 보이게 shinye0213.tistory.com normalize.css는 CSS 설정을 표준화(n.. 공감수 0 댓글수 0 2022. 1. 24.
[CSS] reset.css CSS 초기화 브라우저마다 CSS의 설정값이 존재하는데 이를 0, 1, none 따위의 기본값으로 설정해 모두 초기화 하는 것을 뜻한다. CSS를 초기화하면 브라우저가 달라도 최대한 똑같은 화면이 보이게 해준다. reset.css CSS를 초기화할 때는 주로 reset.css에 초기화 할 내용을 담아 style.css에 import하는 방법을 많이 쓴다. 아래 코드가 가장 보편적인 reset.css 코드다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, .. 공감수 0 댓글수 0 2022. 1. 23.
[CSS] Grid 자동정렬 grid: auto-placement 005.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 005.html .grid { background-color: black; color: white; display: grid; gap: 5px; height: 100vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .item:nth-child(odd) { background-color: springgre.. 공감수 0 댓글수 0 2022. 1. 22.
[CSS] Grid Item 정렬하기 Grid Item 정렬하기 justify-self align-self place-self -content, -items, -self 비교하기 참고 justify-self - CSS: Cascading Style Sheets | MDN The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis. developer.mozilla.org align-self - CSS: Cascading Style Sheets | MDN The align-self CSS property overrides a grid or flex item's align-items value.. 공감수 0 댓글수 0 2022. 1. 21.
[CSS] Grid Container 정렬하기 Grid Container 정렬하기 004.html header content nav footer 004.css .grid { background-color: black; color: white; display: grid; gap: 5px; height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { background-color: springgreen; } .content { background-color: deepskyblue; } .nav { background-color: mediumpurple; } .footer { background-color: orange; } ju.. 공감수 0 댓글수 0 2022. 1. 20.
[CSS] Grid Items 정렬하기 Grid Items 정렬하기 004.html header content nav footer 004.css .grid { display: grid; gap: 10px; height: 50vh; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); } .header { background-color: springgreen; } .content { background-color: deepskyblue; } .nav { background-color: mediumpurple; } .footer { background-color: orange; } justify-items align-items place-items Block 요소와 .. 공감수 0 댓글수 0 2022. 1. 19.
[CSS] Grid Template Grid Template fr(fraction) 004.html 004.css .grid { display: grid; gap: 5px; height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { background-color: springgreen; } .content { background-color: deepskyblue; } .nav { background-color: mediumpurple; } .footer { background-color: orange; } 004.css .grid { display: grid; gap: 10px; height: 50vh; grid.. 공감수 0 댓글수 0 2022. 1. 18.
[CSS] Grid Item Child Elements (Items) grid container에 포함된 grid items. 축약형(grid-column, grid-row) Grid Layout Module Grid Layout Grid Columns Grid Rows Grid Gaps grid-column-gap 각 column의 간격(가로 여백) grid-row-gap 각 row의 간격(세로 여백) grid-gap Grid Lines grid-column-start 특정 영역의 시작점이 되는.. shinye0213.tistory.com 004.html grid-column grid-row 004.css .grid { display: grid; grid-template-columns: repeat(4, 100px); grid-t.. 공감수 0 댓글수 0 2022. 1. 17.
[CSS] Grid Container Grid Container display: grid;와 display: inline-grid; grid-template-columns column의 너비와 개수를 정한다. grid-template-rows row의 높이와 개수를 정한다. 추가 속성 반복(repeat) minmax auto-fill auto-fit max-content와 min-content 참고 repeat() - CSS: Cascading Style Sheets | MDN The repeat() CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring patte.. 공감수 0 댓글수 0 2022. 1. 16.
[CSS] Grid Layout Module Grid Layout Grid Columns Grid Rows Grid Gaps grid-column-gap 각 column의 간격(가로 여백) grid-row-gap 각 row의 간격(세로 여백) grid-gap Grid Lines grid-column-start 특정 영역의 시작점이 되는 column의 번호 grid-column-end 특정 영역의 끝점이 되는 column의 번호 grid-row-start 특정 영역의 시작점이 되는 row의 번호 grid-row-end 특정 영역의 끝점이 되는 row의 번호 참고 CSS Grid Layout W3Schools offers free online tutorials, references and exercises in all the major language.. 공감수 0 댓글수 0 2022. 1. 15.
[CSS] Flex Box - Flex Item Flex Item flexbox 정렬에 영향을 미치는 속성. flex container와 달리 부모(container)가 아니라 자식(item, box)에 직접 설정해야 한다. flex container에 대한 설명은 아래 링크에서 읽어보면 된다. Flex Container Flex Container 부모(container)가 display:flex일 때, 부모에게 설정하면 그 자식(box)의 정렬에 영향을 미치는 속성. flex-direction flex-wrap flex-flow flex-direction과 flex-wrap을 함께 사용할 때, fle.. shinye0213.tistory.com align-self align-items, align-content와 비슷하므로 자세한 설명은 생략. 말 .. 공감수 0 댓글수 0 2022. 1. 14.
[CSS] Flex Box - Flex Container Flex Container 부모(container)가 display:flex일 때, 부모에게 설정하면 그 자식(item, 즉 box)의 정렬에 영향을 미치는 속성. flex-direction flex-wrap flex-flow flex-direction과 flex-wrap을 함께 사용할 때, flex-flow로 대체하면 코드가 짧아진다. justify-content align-items 이 속성은 cross axis 방향의 box 위치와 여백 설정에 관여하며, 개행하지 않는다. align-content 마찬가지로 cross axis 방향의 box 위치와 여백 설정에 관여해 align-items와 유사한 성질을 가진다. 부모의 width가 부족하면 flex-wrap처럼 개행하며, box 덩어리들을 inli.. 공감수 0 댓글수 0 2022. 1. 13.
[CSS] Row와 Column, Main Axis와 Cross Axis 행(Row)과 열(Column) 축 개념을 이해하려면 row와 column부터 알아야 한다. row≒가로≒inline, column≒세로≒block이다. Block-level elements와 Inline elements 블록-레벨 요소(Block-level elements) 기본적으로 세로 방향으로 정렬, 요소 단위로 강제 개행, 모든 너비를 차지함(옆에 다른 요소 두기 X) 인라인 요소(Inline elements) 기본적으로 가로 방향으로 정렬, shinye0213.tistory.com 축(Axis) flexbox 개념을 이해하려면 축부터 알아야 한다. 주축(Main Axis) 교차축(Cross Axis) 이름 그대로 주축과 '교차'한다. 따라서 주축이 가로면 교차축은 세로, 주축이 세로면 교차축은.. 공감수 0 댓글수 0 2022. 1. 12.
[CSS] Display와 Floats display: block; display: inline; display: inline-block; display: flex; (번외) float: left; 아래 글에서 float에 대해 상세하게 설명해 놓았다. 영어 전문을 읽을 필요 없이 그림만 봐도 어느 정도 이해가 된다. All About Floats | CSS-Tricks Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is comm.. 공감수 0 댓글수 0 2022. 1. 11.
[HTML] Block-level Elements와 Inline Elements 블록-레벨 요소(Block-level Elements) 기본적으로 세로 방향으로 정렬, 요소 단위로 강제 개행, 모든 너비를 차지함(옆에 다른 요소 두기 X) 인라인 요소(Inline Elements) 기본적으로 가로 방향으로 정렬, 공간이 충분하면 개행하지 않음, 필요한 너비만 차지함(옆에 다른 요소 두기 O) 참고 블록 레벨 요소 - HTML: Hypertext Markup Language | MDN HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 developer.mozilla.org 인라인 요소 - HTML: Hyperte.. 공감수 0 댓글수 0 2022. 1. 10.
[Internet] 도메인 이름이란 무엇일까? DNS는 어떻게 작동할까? 도메인 이름(Domain Name) 컴퓨터는 인터넷에서 IP 주소로 서로를 식별할 수 있지만, 사람은 숫자의 나열인 IP 주소를 기억하기 어렵다. 이 문제를 해결하기 위해 일정한 규칙에 따라 단어를 조합해 만든 것이 바로 도메인 이름이다. 도메인 이름은 각 부분마다 담당하는 DNS 서버가 있고, 특정 도메인의 IP 주소를 알려면 역순(Root → Top-level → Second-level → Sub)으로 긴 여정을 떠나야 한다. 도메인 등록 웹사이트에 원하는 도메인 이름을 등록하고 돈을 지불하면 해당 도메인 이름을 쓸 수 있다. 도메인 이름 시스템(DNS, Domain Name System)의 작동 원리 참고 [생활코딩] DNS(Domain Name System) 회사에서 강의 듣고 정리한 내용 1. .. 공감수 0 댓글수 0 2021. 12. 24.
[Internet] HTTP란 무엇일까? HTTPS와의 차이는? HTTP(HyperText Transfer Protocol) 서버와 클라이언트 간의 요청과 응답을 전송하는 프로토콜. 웹에서만 사용하며, TCP/IP 기반으로 작동한다. 상태를 가지고 있지 않은(Stateless) 프로토콜이다. 미니사전 클라이언트 [client] 웹페이지 손님. 정보를 요청(request)하는 컴퓨터. 서버 [server] 웹페이지 주인. 요청에 응답(response)하는 컴퓨터. 프로토콜 [protocol] 컴퓨터의 데이터 교환 방식을 정의하는 규칙(통신규약). 인터넷 프로토콜 슈트 [Internet Protocol Suite] 프로토콜 모음. 이 중 TCP와 IP가 가장 많이 쓰임. 전송 제어 프로토콜 [TCP, Transmission Control Protocol] 전송 조절 프로.. 공감수 0 댓글수 0 2021. 12. 20.
[Internet] IP주소란 무엇일까? IP(Internet Protocol) 위키백과에서 '송신 호스트와 수신 호스트가 패킷 교환 네트워크에서 정보를 주고받는 데 사용하는 정보 위주의 규약(프로토콜)'이라고 설명하고 있는데 배경지식이 부족하다보니 뭔 말인지 알 수가 없다. 호스트(Host) 인터넷에 연결된 컴퓨터를 호스트라고 한다. 그러니까 송신 호스트는 정보를 보내는 컴퓨터, 수신 호스트는 정보를 받는 컴퓨터다. 패킷 교환 네트워크(Packet Switching Network) 덩치가 큰 정보는 통으로 전송하는 것보다 쪼개버리는 것이 효율적이고 안정적이다. 이 때 작게 자른 데이터를 패킷이라고 하며, 이렇게 패킷으로 정보를 주고받는 것을 패킷 교환 방식이라고 한다(자세한 내용은 다음에 알아보자). 프로토콜(Protocol) 통신 규약, 그.. 공감수 0 댓글수 0 2021. 12. 19.
[Internet] 인터넷은 어떻게 작동할까? 인터넷(Internet) 컴퓨터 네트워크 통신망. 인터넷으로 연결된 컴퓨터끼리 통신 규약을 통해 정보를 주고받을 수 있다. 라우터(Router) 흔히 인터넷 공유기라고 부르는 그것. 인터넷 회선 하나로 여러 기기에서 인터넷을 사용하게 해주는 장치. 다른 게시글에서 자세하게 다룰 예정이니 오늘은 이 정도만 알고 넘어가자. 웹(Web) 월드 와이드 웹(World Wide Web, WWW, W3)이라고도 한다. 인터넷과 웹을 혼용하는데, 사실 둘은 다른 개념이다. 인터넷이 인프라라면, 웹은 그 인프라 위에 구축된 서비스다. 서버(Server)와 클라이언트(Client) 웹페이지/사이트/앱을 저장하고 정보를 제공하는 컴퓨터를 서버라고 한다. 일반 사용자로, 서버에 정보를 요청하는 컴퓨터를 클라이언트(Client.. 공감수 0 댓글수 0 2021. 12. 17.
톰캣 에러(Tomcat Error) HTTP 상태 404 – 찾을 수 없음 요청된 리소스 [/]은(는) 가용하지 않습니다. Origin 서버가 대상 리소스를 위한 현재의 representation을 찾지 못했거나, 그것이 존재하는지를 밝히려 하지 않습니다. 방법 1. Path 확인 방법 2. component 파일 수정 이클립스 기존 프로젝트 import 시 프로젝트명 변경 이클립스 기존 프로젝트 import 시 프로젝트명 변경 개발자라는 일을 하면서 새 프로젝트를 진행할때 처음부터 환경설정을 하고 뭐하고 하는 경우는 드물다. 보통 기존의 프로젝트를 가져와 현 aljjabaegi.tistory.com 방법 3. 프로젝트명만 원상복구 공감수 9 댓글수 2 2021. 3. 30.
[Ant Design] 앤트디자인 아이콘 에러/미표시 문제 앤트디자인 에러(Ant Design Error) Attempted import error: 'Icon' is not exported from 'antd'. Attempted import error: 'Icon' is not exported from 'antd'. 방법 1. antd 재설치 및 코드 수정 [오류해결] 'Icon' is not exported from 'antd' 위와 같은 오류가 뜨기 시작. Attempted import error: '@ant-.. shinye0213.tistory.com 앤트디자인 에러(Ant Design Error) Warning: [@ant-design/icons] Should have `component` prop or `children`. Warning: [@an.. 공감수 1 댓글수 0 2021. 3. 10.
[Gulp] Replace Autoprefixer browsers option to Browserslist config. Replace Autoprefixer browsers option to Browserslist config. Gulp 에러(Gulp Error) ReferenceError: primordials is not defined gulp 에러(gulp Error) gulp : 'gulp' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이 방법 1. 터미널 변경 [오류모음] npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있.. shinye0213.tistory.com Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .bro.. 공감수 1 댓글수 0 2021. 3. 8.
[Gulp] ReferenceError: primordials is not defined ReferenceError: primordials is not defined gulp 에러(gulp Error) gulp : 'gulp' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이 방법 1. 터미널 변경 [오류모음] npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 VSCode와 Node.js 를 설치하고 간단한 프로젝트를 생성하기 위해 npm init을 쳤는데 shinye0213.tistory.com 방법 1. package.json 수정 [Gulp] ReferenceError: primordials is not defined in node 에러 문제 ReferenceError: primordials is not d.. 공감수 0 댓글수 0 2021. 3. 8.
[Gulp] gulp : 'gulp' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되 지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 .. gulp : 'gulp' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되 지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 방법 1. 터미널 변경 [오류모음] npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 VSCode와 Node.js 를 설치하고 간단한 프로젝트를 생성하기 위해 npm init을 쳤는데 다음과 같은 오류... blog.naver.com 방법 2. 환경 변수 추가 'gulp'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램... 오류 해결 방법 semantic ui를 윈도우에서 사용하려고 하는데관리자 모드로 cmd창을 켜서 npm.. 공감수 0 댓글수 0 2021. 3. 8.
[Node.js] Error: Cannot find module 'moment' Error: Cannot find module 'moment' 방법 1. moment 설치 비디오 업로드 FORM 만들기(1) 에서 Sign Up 이 되지 않습니다 ㅠㅠ - 인프런 | 질문 & 답변 안녕하세뇨 ^^ 강의 봐주셔서 너무 감사합니다 ~! 그리고 너무 자세하게 에러 보여주셔서 감사해요 우선 처음 스크린샷 보시면 Cannot find module moment 이렇게 있잔아요 ? 이거는 www.inflearn.com 방법 2. npm update check failed npm update check failed Last night I tried to update my node and npm, it seemed to have been successful, however ever since then .. 공감수 0 댓글수 0 2021. 2. 27.
[Node.js] Error: Cannot find module 'cors' Error: Cannot find module 'cors' 방법 1. cors 설치 Error: Cannot find module 'cors' I keep getting this error message below: I tried to find other stackoverflow post and articles but couldn't really sovle it. do any of you guys know what the problem is it? `kimeric@pal-nat186-87-... stackoverflow.com 공감수 1 댓글수 0 2021. 2. 25.
[Ant Design] Warning: [@ant-design/icons] Should have `component` prop or `children`. 앤트디자인 에러(Ant Design Error) Attempted import error: 'Icon' is not exported from 'antd'. Attempted import error: 'Icon' is not exported from 'antd'. 방법 1. antd 재설치 및 코드 수정 [오류해결] 'Icon' is not exported from 'antd' 위와 같은 오류가 뜨기 시작. Attempted import error: '@ant-.. shinye0213.tistory.com Warning: [@ant-design/icons] Should have `component` prop or `children`. 방법 2. 설치 명령어 변경 ant-design icon, button .. 공감수 0 댓글수 0 2021. 2. 25.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.