DigIT의 DevLog & TechLog

SIMPLE 1. 미니 웹사이트 프로젝트 2023.01.02~2023.1.13까지 진행된 웹사이트 제작 프로젝트. 4명의 프론트엔드와 2명의 백엔드 인원이 모여서 작게나마 의미 있는 프로젝트를 만들려고 모두들 열심히 노력했다. 나는 백엔드를 맡았고, 2주 간의 일정을 관리하는 Project Manager도 겸하게 되었다. 2. SIMPLE의 소개 SIMPLE은 心(마음 심)과 PLACE를 합친 말로, 가심비를 채워주는 제품을 제공한다는 계획으로 만들어진 사이트다. 가심비는 비용과 상관없이 만족스러운 것을 구매하는 소비 행태로, 가심비를 추구하는 MZ세대를 주 타겟으로 삼았다. 따라서 가심비를 채워줄 상품이 무엇이 있을까 고민하다가, 캠핑에 감성을 더해주고 그 공간을 가치있게 바꿔주는 캠핑 용품을 팔아보면..

1. var / let /const 차이점 JavaScript에서는 var, let, const를 이용해서 변수를 선언할 수 있다. var ES5까지 var 키워드를 통해서만 변수 선언 가능. var를 사용해도 되지만, 최신 버전에 맞는 문법(let, const)을 사용하는 것이 좋다. 중복 선언 가능. var name = 'javascript'; console.log(name); // javascript var name = 'javascript2'; console.log(name); // javascript2 //동일한 이름 'name'으로 여러 번 중복해서 선언 가능 Function-level scope로 함수 내에서 선언된 변수는 함수 내에서만 유효, 함수 외부에서는 전역 변수로 취급. Hoisti..

[Flexbox Froggy Level 24 Solution!] (Korean is at the bottom) 1. First of all, We can see that yellow frogs and the other frogs are separated. Therefore, we can guess that we need to use 'flex-wrap' properties to set them apart. 2. The flex items are placed vertically, so we need to use 'flex-direction' properties. 3. We can see that the red frog is placed on the top. To move it to the bottom, w..

[CSS] Position 1. Position →position은 요소들을 어떻게 배치할지 정하는 속성 static(기본값으로 요소를 나열한 순서대로 배치) relative(원래 요소가 배치되는 위치를 기준으로 상대적 위치를 지정한다.) absolute(특정한 상황에서 가장 가까운 부모 또는 조상 요소를 기준으로 절대적으로 위치 지정) fixed(브라우저 화면을 기준으로 요소 배치) sticky(설정된 위치 전까지는 static, 그 이후부터는 fixed처럼 행동하는 속성) 2. relative position: relative; 만으로는 아무런 변화 없다. top,left,bottom, right 값을 추가적으로 설정하게 되면 원래 그 요소가 있어야 할 자리를 기준으로 위치가 이동하게 된다. Ex.)..

[HTML & CSS] List List 1.Ordered List() 첫번째 두번째 첫번째 두번째 2.Unordered List() 첫번째 두번째 첫번째 두번째 [HTML & CSS] Table Table - 태그 사용 - :table row - :table data - :table heading(가운데 정렬 및 글씨 굵기 굵어짐) -rowspan 은 행 병합, colspan 은 열을 병합 2열 제목 3열 제목 4열 제목 2행 제목 1 2 3 3행 제목 1 2 3 4행 제목 1 2 3 5행 제목 1 2 3 6행 제목 2

[CSS] Block / Inline /Inline-Block 1. Block 가로 크기가 부모 요소의 100%를 차지(쉽게 말하자면 옆(좌우측)에 다른 요소를 붙여넣을 수 없다) -대부분의 element는 block 요소(, , , , , , .......) -가로(width)와 세로(height) 크기를 지정가능. 2. Inline 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치 가능(옆에 다른 요소를 붙일 수 있다.) -, , ...... cf. 주의! width와 height 속성을 지정해도 무시된다. 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있고, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영X cf.)inline 성질을 block으로 변경 가능 span..

[HTML&CSS] Semantic Web(의미론적인 웹) (※https://ko.wikipedia.org/wiki/시맨틱_웹 을 보고 정리해본 것으로 아닌 것 같으면 말씀해주세요!) →웹상의 Data(resources)의 의미를 인간과 컴퓨터 모두 잘 이해할 수 있게 하여 정보 그 자체로 존재하는 것이 아니라 추출, 해석, 가공 등의 다양한 처리를 가능하게 하는 것. Ex.(출처:https://ko.wikipedia.org/wiki/시맨틱_웹) HTML5에서는 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었는데, 기존에 내용 로만 나타낼수 있던 머리 부분을 내용 로 쉽게 더 의미론적으로 나타낼 수 있게 되었다. 이는 div와 id=header 모두 읽었던 예전 XHTML이나 HTML4보..

[HTML&CSS]이미지 1. 태그로 이미지 넣기 alt: 이미지가 불러올 수 없을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트 src: 이미지 파일 경로 혹은 이미지 url 주소 2. background-image로 이미지 넣기(CSS 이용) → background-image:url("http://~~~~) Macbook Pro HTML 삽입 미리보기할 수 없는 소스 cf.)background-size를 조절 안하면 이미지를 담는 영역인 .ex의 크기만 줄이고 배경이미지는 원본 크기로 나타남. HTML 삽입 미리보기할 수 없는 소스 cf.) width,height값을 안 주면 div태그의 경우,div 태그 내부에 있는 내용의 세로 크기("Macbook Pr..

[CSS]CSS selector 1. CSS selector(추가 내용) 기존의 태그 선택자,클래스 선택자,ID 선택자를 제외하고 전체 선택자와 복합 선택자, 그룹 선택자, 가상 클래스 선택자, 가상 요소 선택자 등이 존재 1-1. 전체 선택자(Universal Selector)(*) →모든 요소를 선택 가능 *{ color: blue; } 1-2. 복합 선택자(Combinators) 1-2-1. 후손 결합자(Descendant Combinator)(공백 사용) →특정 요소의 모든 후손 요소에 적용 div p { background-color: yellow; } 1-2-2. 자식 결합자(Child Combinator)(>) → 모든 후손 요소가 아닌 직계 자식 요소만 선택(중간에 Wrapper 요소가 있..

[CSS] Margin & Padding 1. Margin과 Padding HTML element는 아래와 같이 박스 모델로 되어있음. 박스 구성: Content(텍스트나 이미지), Padding (테두리와 컨텐츠 사이 거리) , Border(테두리), Margin (border와 다른 요소사이 거리) Example) 박스가 차지하는 영역: Content의 영역 + padding+ border+margin →273(content width) + 50(padding-left) + 50(padding-right) + 5(border-left) + 5(border-right) + 50(margin-left) + 50(margin-right) = 483 ●css로 표시 p.example { width: 273p..