[JavaScript] Vue.js 소개 💬

📌 Vue.js란 https://vuejs.org/ Vue.js - The Progressive JavaScript Framework | Vue.js Versatile A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework. vuejs.org - UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크. - MVVM(Model-View-ViewModel) 패턴을 따르며, 어플리케이션 로직과 UI 분리를 위해 설계되었다. - Angular.js나 React.js보다 많이 알려지진 않았지만 최근 급속도로 확산되고 있으며 실제 Google Trends의 검색어 비율과 GitHub..

[CSS] Inline, Block box 📦

📌 Inline *display 속성이 inline인 엘리먼트는 "나란히" 배치(줄바꿈 x)* width와 height 속성은 무시되고 해당 태그가 마크업하고 있는 요소의 크기 만큼만 공간을 차지한다. margin과 padding 속성은 좌우 간격만 반영되고, 상하 간격은 반영되지 않는다. defalut가 inline인 태그 : 등 📌 Block *display 속성이 block인 엘리먼트는 "세로로" 배치(줄바꿈 o)* width, height, margin, padding 속성 모두 반영된다. defalut가 block인 태그 : 등 📌 Inline-Block *display 속성이 inline-block인 엘리먼트는 "나란히" 배치(줄바꿈 o)* width, height, margin, paddin..

[CSS] Box Model 📦

공식문서 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model CSS 기본 박스 모델 입문 - CSS: Cascading Style Sheets | MDN 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 developer.mozilla.org 📌 개념 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(m..

[CSS] CSS 입문 💬

📌 CSS란? CSS는 Cascading Style Sheets의 준말로, HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. 📌 CSS가 도입된 이유 HTML로도 웹 사이트를 만들고 디자인할 수 있다. 특별히 CSS라는 언어가 도입된 이유는 바로 '정보의 가치와 효율성'을 고려했기 때문이다. 다음과 같은 태그는 해당 Element가 링크라는 정보와, href 속성를 통해 클릭했을 때 이동할 주소에 대한 정보를 제공해준다. 해당 Element를 디자인하기 위해 태그를 추가해보자. 크기는 50px, 색은 빨간색으로 속성을 부여한다. 이를 출력해보면 다음과 같다. 왼쪽은 태그로만 이루어진 Element, 오른쪽은 태그가 추가된 Element이다. '정보의 가치'의 관점에서 ..

[WEB] GitHub를 이용한 웹 호스팅 🕸

1. 웹 사이트를 만든 코드 파일(HTML) 2. 깃허브 페이지를 사용할 수 있는 환경 만 있다면 웹 호스팅을 할 수 있다. 웹 호스팅이란 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ https://easyhomputer.tistory.com/9?category=930933 0. WEB에 대하여 - homputer 0. WEB에 대하여 안녕하세요 :) 이번 포스팅에서는 웹 프로그래밍 언어를 학습하기 전, 'WEB'이 무엇인지를 먼저 다뤄볼까 합니다.٩(ˊᗜˋ*)و ① Web의 접근성 웹의 가장 중요한 특성은 'Public Domain'이 easyhomputer.tistory.com 📌 GitHub 가입 / 로그인 깃허브 사이트(https://github.com/)에서 가입 후 ..

[HTML] HTML 입문 💬

📌 HTML이란? HTML은 HyperText Markup Language의 준말로, 웹 페이지가 어떻게 구조화되어 있는지 브라우저에게 알려주는 마크업 언어이다. 대부분의 웹 페이지는 모두 에서 해당 페이지를 만들어주는 HTML 코드를 볼 수 있다. 이를 통해 앞선 포스팅에서도 언급한 것처럼 웹이 접근성이 높다는 것을 확인할 수 있다. 📌 HTML의 생김새 HTML은 크게 '요소(Element)'들로 이루어져 있으며, 둘러싸는 '태그(Tag)'를 통해 다른 페이지에 연결하거나 글씨를 변경하는 등의 작업을 수행한다. ↓ ↓ 📌 자주 쓰이는 HTML 태그 정리 여는 태그 닫는 태그 기능 X 문서 유형을 지정해준다. 웹 브라우저가 해당 페이지를 어떻게 해석할 지 알려준다. 예시) : 이 페이지를 HTML로 해..

[WEB] WEB 입문 💬

📌 Web의 접근성 웹은 'Public Domain', 저작권이 없다. 모든 운영체제에서 동작하고, 소스코드를 누구나 볼 수 있으며, 저작권이 없는 공공재다. 이를 개방성과 접근성이 높다고 표현한다. 📌 인터넷과 웹 이러한 웹의 높은 접근성은 '인터넷(Internet)'에 의해 가능하다. Internet 과 Web 은 '포함 관계'로, '인터넷'이라는 수많은 분야 안에 '웹'이 존재한다. 📌 서버와 클라이언트 웹사이트의 동작 방식을 알기 위해서 서버와 클라이언트의 개념을 알아야 한다. 웹 서버는 웹 사이트에게 정보를 제공하는 '서버'의 역할을, 웹 사이트는 웹 서버에게 정보를 요청하는 '클라이언트'의 역할을 수행한다. 서버(Server) : 사업자. 무언가를 제공하는 사람. 클라이언트(Client) : ..