위코드
replit 19. sliceCityFromAddress 함수 구현
replit 19. sliceCityFromAddress 함수 구현
2022.05.01Assignment 1. sliceCityFromAddress 함수는 address를 인자로 받는다. 2. address는 주소를 나타내는 string이다. 3. 주어진 주소가 어느 도시 인지를 찾아 해당 주소에서 도시 부분만 삭제한 새로운 주소를 return한다. 4. 도시는 무조건 "시"로 끝난다. ex) "서울시" 5. "도"와 "시"는 주소에 한 번만 포함되어 있다. My code function sliceCityFromAddress(address) { let findDo = address.indexOf("도"); let findCity = address.indexOf("시"); if(findDo !== -1 && findCity !== -1) { // 주소에 "도", "시"가 모두 있는 경우 r..
replit 17. divideArrayInHalf 함수 구현
replit 17. divideArrayInHalf 함수 구현
2022.05.01Assignment 1. divideArrayInHalf 함수는 array를 인자로 받는다. 이 array는 숫자 값으로만 구성되어 있으며 총 5개의 element로 구성되어 있다. 2. divideArrayInHalf 함수는 인자로 들어온 array로 부터 새롭게 구성된 배열 result을 return한다. 3. array 요소들 중 10과 같거나 작은 값의 요소들은 result의 맨 앞으로, 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 return한다. 4. 재구성이 되는 순서는 array의 맨 뒤 요소부터 맨 앞 요소까지 이다. 즉, 배열의 뒷 요소부터 재구성을 진행한다. 5. 예를 들어 인자로 들어오는 array가 다음과 같을때 [1, 20, 10, 5, 100], resul..
Wecolor Picker 컴포넌트 만들기
Wecolor Picker 컴포넌트 만들기
2022.04.30Assignment 1. 색상박스는 class 속성값이 'colorBox'인 div로 구현하기 2. #709fb0 컬러값이 적힌 작은 박스는 span태그로 하되, 마우스가 색상박스에 올려졌을 때만 보여질 수 있도록 해주기 위해 hover 선택자와 opacity CSS 속성 이용하기 3. heart 버튼과 업로드 날짜 텍스트는 하단에 div 태그를 만들어 flex 속성을 이용해 간격을 유지하기 4. heart 버튼은 태그를 이용하기 My Code #709fb0  451 3days * { box-sizing: border-box; } .bgBox { margin: auto; // 중앙정렬 width: 350px; height: 400px; border-radius: 5%; background-colo..
Weegle - 검색바 만들기
Weegle - 검색바 만들기
2022.04.30Assignment 1. 로고 이미지 주소 : https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png 2. CSS position 속성을 이용하여 아이콘 위치하기. 3. 회색박스에 같은 클래스 이름을 사용하여 CSS를 한 번에 이용해보기. 4. English는 a tag를 이용해 구현하기. 5. Font Awsome에서 아이콘 사용하기. My code Weegle 검색 I'm feeling Lucky Weegle 제공 서비스 : English * { box-sizing: border-box; } .container { position: relative; text-align: cen..
CSS display - block, inline-block, inline 이해하기
CSS display - block, inline-block, inline 이해하기
2022.04.27블록 레벨 요소와 인라인 레벨 요소 CSS에서 display 속성은 웹페이지에서 요소들이 어떻게 보여지고 다른 요소와 어떻게 상호 배치되는지를 결정한다. 이를 이해하기 위해서 우선 블록 레벨 요소가 무엇인지, 인라인 레벨 요소가 무엇인지 살펴본다. 블록 레벨(block-level) 요소 태그를 사용해 요소를 삽입했을 때 혼자서 한줄(width 100%)을 차지하는 요소이다. 해당 요소의 좌, 우측에는 다른 요소가 올 수 없으며 새로운 라인을 추가한다. 너비, 마진, 패딩 등을 이용하여 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. 블록 레벨의 대표적인 태그로는 , , , , , , , , , , 등이 있다. 인라인 레벨(inline-level) 요소 블록 레벨 요소와 달리 줄을 차지하지 않으며 화면..
CSS position - static, relative, absolute, fixed 이해하기
CSS position - static, relative, absolute, fixed 이해하기
2022.04.27CSS position CSS에서 position은 웹 문서 안 태그 요소들을 어떻게 배치할지를 정하는 속성이다. position 속성이 가질 수 있는 속성 값에는 다음과 같이 4가지가 있다. static 요소를 문서의 흐름에 맞추어 배치한다(default 값). relative 이전 요소에 자연스럽게 연결해 현재위치에 배치하여 offset을 지정할 수 있다. absolute 문서의 흐름과 상관없이 가장 가까운 부모 요소중 static이 아닌 요소의 위치를 기준으로 상대적인 offset을 지정할 수 있다. fixed 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 부모 요소가 아닌 브라우저 창이 기준이 된다. offset : top, right, bottom, left으로 해당 기준으로 얼마만큼 떨어져 ..
Semantic Web & Semantic Tags – 시멘틱 웹, 시멘틱 태그 이해하기
Semantic Web & Semantic Tags – 시멘틱 웹, 시멘틱 태그 이해하기
2022.04.26시멘틱이 등장한 이유 웹상에 축적된 정보가 방대해 짐에 따라 많은 문제에 봉착하게 되었다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드에 의한 정보 접근만을 허용하고 있어서 정보 검색할 때 무수히 많은 불필요한 정보가 돌출하여 정보 홍수를 가중하고 있다. 또한 컴퓨터가 필요한 정보를 추출, 해석, 가공할 방법이 없어 모든 정보를 사용자가 직접 개입해서 처리해야 하는 문제가 있다. 이러한 문제들의 근본 원인은 컴퓨터가 정보자원의 의미를 이해하지 못하는데 원인이 있다. 시멘틱(semantic) '의미론적인' 이라는 뜻이다. 웹이 발전하는 과정에서 정보로서의 가치가 중요해지면서 사람에게도 의미 있고, 검색엔진이나 스크린리더와 같은 기계가 활용하기 좋은(이해할 수 있는) 형태의 데이터로 웹을 발전시키기 위한..