이 글은 우아한Tech 영상을 참고하여 작성하였습니다. https://www.youtube.com/watch?v=7RiMu2DQrb4 this 란? this는 현재 실행중인 함수나 메서드가 속한 객체를 참조하는 키워드이다. this를 사용하여 현재 실행중인 컨텍스트 내에서 사용되는 객체에 접근할 수 있다. 🙌 브라우저 --> this는 window 다. window에 탑재된 속성들이 출력되는 것을 볼 수 있다. 🙌 노드 --> 모듈을 가리킨다. 콘솔로그에 노드의 this를 출력하면 텅텅 빈 객체가 출력이 된다. globalThis 를 출력하면 노드에서 사용되는 전역 객체들이 출력된다. 바인딩 (Binding) 이란? 먼저 자바스크립트에서 모든 함수(Function)은 this를 갖고 있다. 함수가 호출될..

NPM (Node Package Manger) 기본적으로 자바 스크립트를 배우기위해서는 다들 Node.js를 설치했을 것이다. 그 때 보는 Node로 이를 이용하여 다양한 자바스크립트 애플리케이션을 실행할 수 있고, 서버에 주로 사용한다. 자바스크립트는 웹상에서 사용하거나 node.js를 설치하여 로컬환경에서 사용할 수 있다. 자바스크립트로 작성된 오픈소스나 라이브러리 등을 가져와서 사용하려면 npm을 사용한다. 재밌는 범쌤의 이야기를 인용해보자. 자바스크립트로 작성된 오픈소스, 라이브러리가 작성된 도서관이 있다. 이곳에서 책을 빌리기전 먼저 해야하는 것은 npm init npm init -y git init 처럼 제일 처음 기본값을 생성한다고 생각하면 된다. 이를 수행하면 package.json 파일이..

https://developer.mozilla.org/ko/docs/Web/CSS/float float - CSS: Cascading Style Sheets | MDN CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. developer.mozilla.org MDN 사이트를 참조하여 글을 작성합니다. float float은 요소를 띄워 표시하는 기능이다. 하지만 가야한다. 알바가기싫다... 알바가기싫다... 알바가기싫다... 일단 알바가기 싫다에 기본적인 float left를 사용하면 알바가기 싫다가 하나의 문장이 된것처럼 ..

Swiper Demos 위와 같이 HTML/CSS 이미지 슬라이드를 만들어보자! 먼저 사이트에 접속한다. https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 디자인 예시를 보면서 원하는걸 선택해 준다. 빨간색으로 밑줄친 Core에 들어가서 먼저 붙여넣을 것들을 붙여넣어준다 Core 에 들어가면 html 파일이 작성된걸 볼 수 있는데 10번째 줄에 있는 link를 Head 영역안에 붙여넣어준다 영역안에 붙여넣고 제일 아래에 보이는 두가지

Flex는 최대한 예시를 많이 집어 넣으면서 변하는 과정을 볼게요 먼저 박스들을 만들어봅시다. Flex 의 기본 작동 11111 22 3 4444 Flex container 가 될 container 하나와 그안에 박스를 만들 item 4개를 만들어봤습니다. 그리고 container에 Flex를 주면 이렇게 되네요. 이처럼 부모요소인 container 안에 가로로 쭉 배치가 되게 됩니다. 만약 부모요소의 너비값이 이거보다 작으면 어떻게 될까요? 보이는 것처럼 아무 이상이 없는것 처럼 보이지만 개발자 도구를 통해 확인하니 초록색 영역인 부모 너비를 뚫고 나온 모습을 확인할 수 있습니다. 가로로 배치되고, 너비가 충분치 못해도 똑같이 작동하는 것을 확인할 수 있죠. Flex 방향 설정(가로, 세로) Flex는..

그리드 가든 CSS에서 박스들을 배치하는 방법중 Grid에 대해 공부해보자. https://cssgridgarden.com/#ko 먼저 그리드 가든 게임사이트에 들어가면 간단하고 재밌게 문법에 대해 알아 볼 수 있다. 그리드에는 column과 row 즉 열과 행이 있다. column (열) -> 세로 row (행) -> 가로 다른 개발언어와 다르게 시작점이 1이므로 이미지에서 보이는 빨간색 기준점들은 2가 된다. /* 행과 열의 시작점*/ grid-column-start: 2 ; grid-row-start: 3; /* 행과 열의 끝지점*/ grid-column-end: 3; grid-row-end: 4; 와같이 시작점을 지정해주거나 끝지점을 지정해 주면된다. 박스1 박스2 박스3 박스4 박스5 박스6 박..

우선 반응형 웹 디자인을 하기 위해선 마크업을 잘 해야한다. (마크업 이란. 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지로 HTML에선 HTML구조를 짜는 과정을 말함) 완성된 모습 코드리뷰 먼저 가장 눈여겨 봐야할 점은 모바일과 웹의 모습을 순차적으로 본다면 순서가 다르다. 이럴땐 order: -1 을 이용하여 순서를 바꿔줘야 한다. 코드를 보면 위에서 순서대로 1,2,3,4 순으로 작성했다. 모두 웹사이트상을 기준으로 작성했다고 생각하면 편하다. 이제 우리는 모바일을 위해 마크업의 순서를 살짝 변경해줄거다. 뭐를이용해서? order : -1; 속성을 이용해서. order 속성을 -1 주면 우선순위가 먼저로 바뀌게 된다. 따라서 모바일의 로그인, 회원가입에 해당하는 2번 memb..

GNB (Global Navigation Bar) 웹 사이트 전체에 동일하게 적용되는 내비게이션 바로 보통 웹 사이트 최상단에 위치하며 전역에 해당된다는 의미로 Global 이라고 표현한다. 모든 서비스를 표현하는 곳으로 직관적인 것이 좋다. LNB (Local Navigation Bar) 현재 서비스 영역에 해당하는 네비게이션 바를 말한다. 보통 카테고리 아래에 표현되는 네비게이션 바로 중분류, 소분류 등이 자세히 나와 있는 바를 말한다. SNB (Side Navigation Bar) 이름에서 유추가 가능하듯 사이드에 나와 있는 네비게이션 바를 말한다. 메인메뉴, 서브 메뉴를 제외한 나머지 기타 메뉴바에 해당한다. FNB (Foot Navigation Bar) 대한항공 홈페이지에 있는 Foot 네비게이..

Flex-basis basis는 Flex로 구성된 박스의 크기를 설정하는 최소 단위이다. 쉽게말해 기본적으로 크기를 정해주고 만약 내용이 그 크기를 넘는다면 자연스럽게 늘어나게 된다. 아래의 이미지는 예시로 flex-basis를 이용하여 박스의 크기를 키워본 이미지이다. width는 임의로 설정한 item의 기본값 Flex-grow grow는 basis 의 값보다 커질 수 있는지를 지정한다. grow 에 1을 세팅한 경우 1을 설정했을 때 부모요소에 맞춰 크기가 설정된다. 0을 설정하면 부모요소의 너비만큼 기본값을 가지고 나머지 박스들이 크기를 나눠가지게 된다. 1이상의 값들을 설정하면 크기를 비율로 나눠가진다고 생각하면 쉽다. Flex-shrink shrink 는 grow와 반대라고 생각하면 쉽다. b..

HTML 이란? Hypertext Markup Language로 하이퍼텍스트를 작성하기 위해 만들어진 기본적인 웹 언어다. 하이퍼 텍스트 : 단편적인 정보들을 하이퍼링크라는 고리를 이용하여 엮어 다른 문서로 이동하거나 정보를 보내는 등의 다각적으로 정보에 접근할 수 있는 체계를 의미한다. 시멘틱 마크업(semantic markup) 이란? 시멘틱 마크업이란 웹 문서를 구조화하고 내용을 의미론적으로 표현하는데 사용되는 HTML 요소들을 말한다. 시멘틱마크업은 웹 페이지의 요소들이 그들의 의미와 역할을 명확하게 나타내도록 설계되었다. 이는 SEO(검색엔진 최적화)와 접근성을 향상시키는데 도움을 줄 수 있다. 시멘틱 마크업을 사용하면 얻는 이점 검색엔진 최적화 (SEO) : 검색엔진은 문서의 구조와 의미를 파..