소상공인 감자네

자바스크립트를 이용해 개발함에 있어 가장 중요한 것 중 하나인 객체(Object). 문자열, 숫자, 불리언 같은 원시타입들이 각각 하나의 값만 담을 수 있는 기본적인 데이터라면,객체는 이름, 나이, 주소 등 서로 연관된 여러개의 데이터를 한 묶음으로 관리해주는 데이터 묶음 상자라고 할 수 있다.객체는 관련있는 데이터들을 체계정으로 정리해줘 데이터를 구조화 할 수 있게 도와준다. 예를 들어 어느 한 사람의 정보를 저장해야 한다면,let name = "김철수";let age = 20;let adress = "서울시"; 객체를 사용하지 않는다면 각각의 정보를 따로 담아서 저장을 해야 할 것이다.하지만 객체를 이용한다면,let user = { name: "김철수", age: 20, adress: "서울시"..

HTML 요소의 안쪽 여백을 조절하는 패딩(padding)이 있었다면,테두리 바깥쪽에 공간을 만들어 다른 요소들간의 간격을 조절하는 역할을 하는 것이 마진(margin)이다. 요소들을 배치하다 보면 세부적으로 요소들의 간격을 조절하고 싶은 상황이 생기게 되고,그때 적절하게 사용할 수 있는 속성이 마진이다. Margin 사용하기1. margin 각 방향 사용padding 속성과 같이 4가지 방향 상(top), 하(bottom), 좌(left), 우(right)로 각각 조절 할 수 있다..top { margin-top: 20px;}.bottom { margin-bottom: 20px;}.left { margin-left: 20px;}.right { margin-right: 20px;} margin-..

웹페이지를 CSS로 꾸미다 보면 HTML 요소들은 하나의 상자안에 들어 있다는 것을 알 수 있다.이 상자 안에 텍스트를 넣을수도 이미지를 넣을수도 있는 것이다. 패딩(padding)은 이 상자에서 상자 속의 컨텐츠(텍스트, 이미지 등)와 상자의 테두리 사이에 존재하는 안쪽 여백을 조절하는 역할을 한다.여백을 조절함으로써 시각적으로 편안한 디자인을 보여줄 수 있다. padding 사용하기1. padding 각 방향 사용padding 속성은 4가지 방향 상(top), 하(bottom), 좌(left), 우(right)로 각각 조절 할 수 있다. .top { padding-top: 20px;}.bottom { padding-bottom: 20px;}.left { padding-left: 20px;}.ri..

웹페이지를 CSS 로 꾸미다 보면 HTML 요소들을 다양하게 활용해야 하는 경우가 생긴다.그 중 하나가 바로 테두리를 만듬으로 시각적으로 구획을 짓거나 버튼의 모양들을 다듬는 작업을 하게 된다. 그 HTML 요소들의 테두리를 만들어 디테일을 살리는 속성이 바로 Border 이다. border 속성은 단순한 선 같지만 실제로는 다양한 속성을 통해 만들어 진다. 1. 스타일 (border-style)border-style은 테두리를 실제로 보이게 하는 가장 중요한 속성이다.이 속성이 없으면 다른 설정을 하더라도 테두리가 보이지 않는다./* none: 기본값, 테두리 없음 */.box1{ border-style: none;}/* solid: 실선, 가장 일반적으로 사용된다. */.box2{ border-s..

웹사이트를 구성하는 HTML 의 각 요소들은 보이지 않는 상자(Box) 안에 존재한다고 할 수 있다.그럼 그 상자들의 사이즈는 어떻게 조절을 할 수 있을까? 상자의 크기는 너비를 표현하는 width 와 높이를 표현하는 height 를 통해 자유롭게 조절할 수 있다.웹사이트의 기본적인 크기의 단위인 px을 통해 값을 지정해 주면 된다.div { width: 200px; height: 200px; background: red;}span { width: 100px; height: 100px; background: blue;}"> 또한 %를 사용해서 상대적 크기를 지정할 수 있다.%를 사용하게 되면 부모 요소의 크기를 기준으로 비율을 지정하게 된다.// 부모 요소의 크기를 지정.parent { w..

웹사이트를 방문할 때 가장 먼저 눈에 띄는 것 중 하나가 바로 글씨.멋진 디자인들을 뒷받침 해주려면 그에 맞는 글꼴 디자인이 필요하다. 글꼴을 다양하게 변경해주는 CSS 속성들을 알아보도록 하자. 1. 폰트 종류(Font Family)font-family 속성은 텍스트에 적용할 글꼴을 지정한다.여러개의 글꼴을 나열 할 수 있으며, 컴퓨터는 그 순서에 따라 글골을 찾아 적용한다.만약 첫 번째 글꼴이 없으면 다음 글꼴을 사용하는 방식이다.p { font-family: "Pretendard", Arial, sans-serif;} - 가장 먼저 "Pretendard" 글꼴을 찾는다.- 만약 "Pretendard" 가 없으면 Arial 을 사용한다.- 두 글꼴이 모두 없다면 컴퓨터에 기본으로 설치된 '고딕체' ..

웹페이지를 CSS를 이용해 만들기 시작하면서 고민되는 것들 중 하나가 요소들의 배치다.기본적인 display 속성들로 배치를 하다보면 조금 마음에 안드는 부분이 생기기도 하는데,그 배치를 조금 더 편리하고 유용하게 해주는 속성이 바로 flex 다. Flexbox 는 유연하게 HTML요소들을 배치할 수 있는 도구이다.flex 이전 방식으로는 가운데 정렬이나 나란히 간격을 둔 배치 등이 매우 까다로웠지만,Flexbox가 등장하면서 상당히 쉽게 해결되었다. Flexbox는 기본적으로 '부모 - 자식' 관계를 기반으로 작동한다.그래서 이 관계를 이해하는 것이 flex를 이해하는 시작이라고 볼 수 있다. ◼ 플렉스 컨테이너 (Flex Container)Flexbox의 부모요소로 display : flex; 로 사..

본격적으로 자바스크립트를 활용해서 코딩을 하다 보면 점점 길어지는 코드 길이를 만나게 될 것이다.똑같은 행동을 하기 위해서도 작성된 코드를 다시 작성해야 하는 일들이 생기기 시작할텐데,그런 작업들을 획기적으로 줄여 줄 수 있는 것이 바로 함수(Function)다. 함수(Fuction)를 쉽게 설명하자면 특정 작업을 수행하는 코드의 묶음이라고 할 수 있다.미리 정해진 일을 수행해주는 것이라고도 설명할 수 있겠는데, 미리 정해진 코드를 간결하게 실행 할 수 있다. 예를 들어,"안녕하세요. 이번 학기에 수강하게 된 25학번 김철수 입니다."라는 메세지를 모든 신입생 이름을 넣어서 보여준다고 생각하자. 그럼 아마도console.log("안녕하세요. 이번 학기에 수강하게 된 25학번 김철수 입니다.");conso..

웹페이지를 만들려면 HTML로 구조를 만들고 CSS를 통해 레고처럼 위치를 잡고 쌓는 과정을 해야한다.잘 만들어진 웹페이지들은 바로 이 HTML 요소들을 제각각 규칙에 맞게 배치한 결과라고 할 수 있다. 그 규칙을 만들게 도와주는 CSS 속성이 바로 Display. displaydispaly 속성은 HTML 요소가 화면에 어떻게 보여지고 주변 요소들과 어떤 상호작용을 할지를 결정한다.요소 하나하나 성격을 정의한다고 보면 되는데 모든 HTML 요소들은 기본적으로 display 속성을 가지고 있다. display를 처음 만나기 위해 가장 기본적이고 대중적인 세가지 요소를 먼저 알아보자. 1. display : block;block(블록)이라는 이름 답게 이 값은 HTML요소를 하나의 커다란 벽돌 처럼 취급한..

자바스크립트(JavaScript)를 학습하는데 가장 출발점이 되는 변수에 대해 알아보자.아마 처음 자바스크립트 공부를 시작하거나 필요에 의해 간단한 정보를 원하는 사람들이 처음 접하는게 바로 "변수" 라는 단어일 것이다. 변수(Variable)1. 어떤 상황에서의 가변적 요인2. 어떤 관계나 범위 안에서 여러가지 값으로 변할 수 있는 수 사전적 의미로는 이러한 뜻을 가지고 있어서 학습을 하면 할수록 혼돈이 오는 경우가 생긴다.일단 컴퓨터프로그래밍에서의 개념으로 접근하면 흔히들 설명하는 데이터를 담는 그릇 이라고 많이들 표현한다. 개인적으로 나도 처음 학습을 할때 저렇게 설명을 들어서 추상적으로 그냥 그런건가? 싶으면서 정확한 이해가 쉽지 않았던게 사실.근데 실무를 거쳐 어느정도 업무를 진행하더라도 저 설..