minTech

scss는 module.css와 굉장히 유사하다는 말만 들어보았지 직접 사용해본적이 없다. 매번 사용해보고 싶다는 생각이 들었는데 마침 이번 프로젝트에서 CSS의 스타일 정의 방법으로 module CSS + SCSS 방식이 채택되었다!! 프로젝트에 들어가긴 전에 한 번이라도 써보고 들어가고 싶어 한번 test 해본 것을 글로 작성해보겠다! 😁 먼저 시작에 들어가기에 앞서 문득 궁금했다. scss란 무엇이고, 왜 module CSS와 SCSS를 둘이 혼합해서 사용하고, module CSS만 쓸 때와 어디가 어떻게 다른건인지? SCSS란 그럼 무엇인지 알아보잣 !!!   Sass?scss를 알아 보면서 먼저 알아야할 점이 Sass이다. Sass는 SCSS의 원조 문법? 이다.  먼저, Sass는 css의 ..

구현하려는 내용 프로젝트 내에서 사용한 스킬들을 badge 형태로 나타내려고 하였다. 전체적인 동작은 다음과 같다. 사용 stack 이름을 파라미터로 받는 StackBadge 컴포넌트가 동작한다. 컴포넌트 내에서는 stack 이름을 getBadgeColor의 인수로 넘겨준다. getBadgeColor 함수의 return 값으로 받은 배경 색을 badge의 background color로 입혀준다. 각각의 코드는 다음과 같다. // getBadgecolor.js export const getBadgeColor = (stack) => { let backgroundColor = ""; switch (stack) { case "Javascript": backgroundColor = "yellow-300"; br..

🤷‍♂️문제 발생 팀프로젝트를 하다가 배경색을 지정하기 위해, width 100vw, height 100vh 값을 지정한 container 박스를 만들고, background color를 지정해주었다. const ContainerDiv = styled.div` width: 100vw; height: 100vh; background-color: "beige" `; 처음에는 스타일이 잘 적용되었길래 넘어갔지만, 프로젝트를 진행하다가 그 내부 요소들이 뷰포트를 넘어가게 되고, 스크롤을 내리는 순간 !! 내린 부분에는 background 컬러가 적용이 안되어있는 것을 보았다. 🕵️문제 원인 height: 100vh; height의 값을 100vh로 지정해주면, 현재 보이는 창을 기준으로 100%만큼의 높이로 지..

DOM DOM은 웹 페이지/문서 에 나타나는 HTML 문서 전체를 객체로 표현한 것을 의미한다. * 웹 페이지/웹문서 : 웹 브라우저에 나타나는 컨텐츠 부분 DOM 트리란? HTML 위의 HTML의 구조는 !+enter를 치면 나오는 자동으로 짜여지는 HTML의 구조이다. HTML은 다음과 같이 계층 구조를 이루며, 계층 간의 관계에는 부모태그와 자식태그가 있다. DOM 트리 DOM 의 경우 HTML과 동일하게 계층구조이다. HTML과 다른 점이 있다면, 각 객체를 노드(Node)라고 표현하며, 각 노드끼리의 관계에는 부모노드, 자식노드, 형제노드가 있다. DOM트리구조의 경우 다양한 노드 타입을 갖는다. 요소 노드 : 태그를 표현하는 노드 텍스트 노드 : 문자를 표현하는 노드 💡텍스트 노드의 경우 따로..

Javascript를 통해 웹페이지를 다루기 위해서는 원하는 요소를 정확하게 선택할 수 있어야 한다. 이러한 요소를 선택하는 방법에 대해 작성하였다. 👉 Id 명으로 요소 선택하기 let tag = document.getElementById( 아이디명 ) 필요한 아이디를 가진 태그를 명확하게 선택할 수 있다. 만약 존재하지 않는 태그를 선택할 경우 null 값을 출력한다. 👉 Class명으로 요소 선택하기 let tags = document.getElementsByClassName( 클래스명 ) 여러 개의 요소들이 배열의 형태 같이 저장된다. 배열의 형태 같지만 완벽한 배열의 형태가 아닌 유사 배열 객체(Array-Like Object) 임을 주의한다. 요소들의 순서는 깊이에 상관없이 HTML의 위부터 ..

🫸브라우저 렌더링 원리에 대해 알기 전에 ☝️ 브라우저란(browser)? 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램이다. 우리는 필요한 정보를 얻기 위해서 구글이나 네이버에 접속한다. 해당 사이트에 접속하기 위해 사용하는 도구를 '브라우저'라고 한다. ✌️렌더링(Rendering)이란 서버로부터 HTML, CSS, JavaScript로 작성된 파일을 받아 브라우저에 시각적으로 출력하는 것을 말한다. 👩‍🎨브라우저 렌더링 과정의 대략적인 그림 사용자가 원하는 URL을 입력하면 아래 과정으로 렌더링을 진행한다. client가 서버에 주소를 보내면 sever에서는 해당 HTML 파일로 응답을 한다. CSS 파일과 JS파일도 마찬가지로 client에서 파일 요청..

이 글은 생활 코딩의 강의를 보고 개인적으로 정리한 글입니다. 1. 웹 개발자 도구 웹 브라우저란 웹 서버에 설치되어있는 HTML을 받아 화면에 표시해주는 장치이다. 만약에 랴는 태그를 사용한다면 WB(Web Browser)는 태그를 만날 시 src 속성 값의 파일을 웹 서버에 들어가 몰래 다운 받고 화면 띄운다. 2. Mobile 지원