profile
(~˘▾˘)~♫•*¨*•.¸¸♪ ❝ 쉽게만 살아가면 재미없어 빙고 .ᐟ ❞
post-thumbnail

TIL 38 | 아이디 검색 기능 구현 - Array.filter(), z-index

인스타그램의 search input을 구현하는 작업이었다. 값을 입력할때마다 그 값을 포함하는 배열을 새로 만들어 리스트로 보여주는 형식이다.

2020년 8월 28일
·
0개의 댓글
post-thumbnail

인스타그램 클론 코딩 리뷰 (2)

메인페이지에서는 댓글의 input 창에서 enter키를 치거나 "게시" 버튼을 누르면 댓글이 추가되도록 만드는 과제가 주어졌다. createElement로 요소를 생성하여 input에 입력한 값이 추가되는 함수를 구현하는 조건이다.

2020년 8월 24일
·
0개의 댓글
post-thumbnail

인스타그램 클론 코딩 리뷰 (1)

인스타그램의 HTML, CSS를 클론하고, 간단한 이벤트함수를 자바스크립트로 구현했다. 초반에는 Flexbox 개념이 생소하여 다소 어려움을 느꼈지만, 디자인 작업을 하듯 재미있게 한 코딩작업이었다.

2020년 8월 24일
·
0개의 댓글
post-thumbnail

TIL 35 | CSS Flexible Box

Flexbox 연습하는 사이트 : https://flexboxfroggy.com/#ko

2020년 8월 24일
·
0개의 댓글
post-thumbnail

Semantic Web & Semantic Tag

본 포스팅은 [HTML 바로 알기] Semantic Web을 위한 Semantic Elements ( https://blueshw.github.io/2020/05/09/know-html-semantic-elements/ ) 를 바탕으로 작성되었습니다! Semantic

2020년 8월 19일
·
0개의 댓글
post-thumbnail

CSS Layout

HTML에서는 static 포지션이 기본값이다. 이는 HTML이 작성된 순서대로 나열이 되어있는 형태를 의미한다. 원하는 위치에 요소들을 배치하기 위해서는 relative, absolute, fixed와 같은 position 속성을 부여해주어야 한다.relative는

2020년 8월 19일
·
0개의 댓글
post-thumbnail

TIL 21 | HTML/CSS +α

wecode에서 새롭게 알게된 HTML/CSS 내용을 보충하여 작성한다.<span>에는 오른쪽 정렬이 되도록 클래스를 부여해도 오른쪽 정렬이 되지 않는다. 이는 <span>이 inline-element이기 때문에, <span>이 차지하는 영역은 "&lt

2020년 8월 18일
·
0개의 댓글
post-thumbnail

TIL 16 | To-do List 만들기 리뷰

jQuery 로 만들어봤던 To-do List를 순수 Javascript로 다시 만들어본다.To-do List 페이지To-do List 깃허브자바스크립트에 비해 코드가 훨씬 간단해진다.

2020년 7월 25일
·
1개의 댓글
post-thumbnail

TIL 09 | Bootstrap 4! 타이포그래피와 레이아웃

rem 을 사용하면 비율에 따라 크기를 설정할 수 있다.1 rem = 16px2 rem = 32px.display-1 = 6remdisplay 클래스를 사용하여 더 큰 제목용 타이포그래피를 사용할 수 있다.<blockquote class="blockquote">로

2020년 7월 19일
·
0개의 댓글
post-thumbnail

TIL 08 | 자기소개 페이지 그룹 리뷰

7월 18일, 위코드 사전스터디 첫 모임에서 피드백 받은 내용, 새로 알게 된 내용을 정리한다.페이지의 링크를 보냈을 때, 미리보기로 나타나는 제목과 사진, 설명을 설정할 수 있는 기능이다.페이지 탭에 작게 뜨는 이미지를 설정할 수 있다.스크롤을 할 때 배경의 사진을

2020년 7월 19일
·
2개의 댓글
post-thumbnail

TIL 07 | 자기소개 페이지 만들기 리뷰

위코드 사전스터디의 첫번째 과제 'HTML/CSS'로 자기소개 페이지 만들기! 코드를 짜보면서 구글링을 통해 새로 배운 것들, 오류들, 여전히 해결하지 못한 부분을 정리해보자 > 자기소개 페이지 링크 자기소개 소스 깃허브 링크 새로 알게된 것들 창의 크기에 따라 d

2020년 7월 17일
·
0개의 댓글
post-thumbnail

TIL 05 | CSS Layout Basics

CSS에서 가장 헷갈리는 레이아웃을 다시 정리해본다. 본 TIL은 https://ko.learnlayout.com 의 'CSS 레이아웃을 배웁시다'를 바탕으로 작성되었다. (작성하다보니 거의 복붙이 되어버렸다...)display 는 CSS에서 레이아웃을 제어하

2020년 7월 15일
·
0개의 댓글
post-thumbnail

TIL 04 | font of CSS

구글폰트(https://fonts.google.com)에서 원하는 폰트, weight를 선택후, 링크를 카피해서 HTML <head> 안에 붙여넣으면 CSS에서 사용이 가능하다.

2020년 7월 13일
·
4개의 댓글
post-thumbnail

TIL 03 | CSS Basics

Css 에서의 주석처리는 아래와 같이 작성한다.헤더에 link로 css 파일을 연결한다.3 channels: Red, Green and Blue.Each ranges from 0 - 255rgb(0,0,0)alpha(투명도 transparency) channel. Ra

2020년 7월 13일
·
0개의 댓글