분류 전체보기237 모던 웹사이트 디자인의 정석 Question Q) 왜 clear:both를 했는데 레이아웃 깨짐현상이 잡히는걸까? A) 우선 li 태그들을 가로로 배치했다는 점에 주목한다. 이 때 li 태그의 display 속성은 list-item 이다. 이는 다음과 같다. List 계열 태그에서는 특이하게도 list-item라는 display 속성을 사용합니다. 기본적으로는 Block-level의 요소들처럼 작동하지만, 추가적으로 list-style 계열의 CSS 속성을 이용할 수 있다는 특징이 있습니다. 출처 : http://dev.epiloum.net/834 그러므로, div 태그에 사용했던 것처럼 float 속성을 사용하여 가로로 배치할 수 있게 된다. 그런데, 컬럼 탈락 현상을 사용하기 위하여 li 태그의 길이를 50%로 하였다. 이렇게 했을 때 floa.. 2020. 1. 22. vertical-align 속성으로 이미지 공백 지우기 개요 모던 웹사이트 디자인의 정석 책을 공부하면서 새로 알게된 부분을 정리하기 위해 작성하였습니다. 다른 분들께도 도움이 됬으면 합니다. vertical-align vertical-align은 기본적으로 인라인 요소들에 대해서 수직적으로 정렬하기 위해서 사용합니다. 기본 개념은 이러한데, 더 깊은 내용이 담겨있습니다. vertical-align 속성은 기본적으로 다음과 같이 있습니다. baseline - 기본값, 부모 요소의 기준선에 맞춤, 기본 옵션 top - 요소의 상단과 자식 요소를 전체 줄의 상단에 맞춤 middle - 요소의 중간과 자식 요소를 전체 줄의 중간에 맞춤 bottom - 요소의 하단과 자식 요소를 전체 줄의 하단에 맞춤 vertical-align 의 속성에 대한 더 자세한 내용은 다.. 2020. 1. 21. Leetcode 5번 문제 풀이 개요 Leetcode 에서 알고리즘 문제를 풀고 배운 내용을 정리하기 위해 작성하였습니다. 문제 : 5. Longest Palindromic Substring 주어진 문자열 내에서 팰린드롬인 문자열을 찾아 반환해야 함. 풀이1 : Brute force 설명 Brute force(무차별 대입) 방식으로 풀 경우, 문자열 내 모든 문자마다 접근해서 팰린드롬인지 확인하여야 한다. 이 경우 시간 복잡도는 O(N^3) 이 나온다 ** 시간 복잡도가 O(N^3) 인 것은 루프로 각 문자마다 접근을 하고, 팰린드롬인지 검사를 위해 이중 루프를 돌기 때문이다. (이중 루프를 어떤 방식으로 도는지에 대해선 정확히 모르고, 좀 더 자료조사가 필요) 그러므로 무차별 대입보다 좀 더 나은 방법이 필요하다. 다른 방법으로 DP.. 2020. 1. 12. Leetcode 3번 문제 풀이 개요 Leetcode 에서 알고리즘 문제를 풀고 배운 내용을 정리하기 위해 작성하였습니다. 문제 : 3. Longest Substring Without Repeating Characters 문자열내에서 중복이 없는 가장 긴 문자열의 길이를 반환해야 함. 풀이1 : Brute force 설명 Brute force(무차별 대입) 방식으로 풀 경우, 주어진 문자열 내 모든 문자들을 검사하여 풀 수 있다. 각각의 문자별로 루프를 돌아서 가장 긴 substring의 길이를 반환한다. 구체적으로는 다음과 같다. 전체 문자열 길이만큼 루프를 돌면서 조건에 따라 임시 문자열에 각 문자를 대입한다 조건 1 : 만약 임시 문자열이 비어 있으면 최초 문자를 대입한다 조건 2 : 만약 특정 문자와 임시 문자열을 중복 체크하여.. 2020. 1. 9. 리액트 기본 과정 정리 - 10 [앞으로의 공부 방향] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 리액트는 따지고보면 정말 간단한 라이브러리 입니다. 지금까지 공부해본 것들을 요약해보면 재사용 가능한 컴포넌트를 만듭니다. props 는 부모에게서 전달받는 값입니다. state 는 자기 자신이 지니고 있는 데이터입니다 props 나 state 가 바뀌면 컴포넌트는 리렌더링 합니다. LifeCycle API 를 통해 컴포넌트 Mount, Update, UnMount 전후로 처리 할 로직을 설정하거나 리렌더링을 막을 수 있습니다. 스타일링 리액트 컴포넌트를 스타일링 하는 방법은 여러가지 입니다. 일단, 가장 기본적인 방법으로는 일반 .css 파일을 만들.. 2019. 12. 13. 리액트 기본 과정 정리 - 9 [불변성을 지키는 이유와 업데이트 최적화] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글에서는 불변성을 왜 유지하는지, 그리고 컴포넌트 업데이트 성능 최적화는 어떻게 이뤄지는지에 대해서 알아보겠습니다. 데이터 필터링 구현하기 우선 불변성의 중요성을 알아보는 과정에서 이름으로 전화번호를 찾는 데이터 필터링 기능을 구현해보겠습니다. 일단 App 컴포넌트에서 state에 기본값을 등록해놓겠습니다. 컴포넌트 업데이트 최적화 작업을 할 것인데 매번 값을 등록하는 것보다 사전에 값이 준비되어 있는 것이 작업할 때 편하.. 2019. 12. 13. 리액트 기본 과정 정리 - 8 [배열 다루기 (2) 제거와 수정] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글에서는 강의에서 중요하다고 생각되는 부분만 담았으니 참고 부탁드립니다. 데이터 제거 지난 섹션에서 배열에 데이터를 추가하는 방법과 배열 내부의 내용들을 화면에 보여주는 기능을 구현하였습니다. 이번에는 배열 내부의 데이터를 제거하는 방법과 수정하는 방법을 알아보겠습니다. 이 작업이 어려운 것은 아니지만 불변성을 유지하면서 작업을 처리해줘야 하기 때문에 기존에 하던 것과는 조금 다를 수 있습니다. 기존의 배열 데이터를 건들지.. 2019. 12. 12. 리액트 기본 과정 정리 - 7 [배열 다루기 (1) 생성과 렌더링] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글은 개인적으로 강의에서 중요하다고 생각되는 부분만 담았으므로 참고 부탁드립니다. 데이터 추가 우리 애플리케이션의 상태 데이터는 App 컴포넌트에서 관리하겠습니다. 나중에 가면 상태를 컴포넌트에서 분리하여 따로 관리하는 방법도 있습니다. 앞서 자식 컴포넌트인 PhoneForm 에서 받은 데이터를 App 의 상태에 추가하겠습니다. 이를 위해 우선 App 컴포넌트의 state에 information 배열을 만듭니다. 이 배열에.. 2019. 12. 11. 리액트 기본 과정 정리 - 6 [input 상태 관리하기] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글은 개인적으로 강의에서 중요하다고 생각되는 부분만 담았으므로 참고 부탁드립니다. input 상태 관리하기 지금까지 배운 것들을 정리해보면 리액트 기본 개념 JSX 문법 props와 state LifeCycle API 입니다. 이것만으로도 많은 것을 만들 수 있습니다. 리액트는 자바스크립트와 매우 가깝습니다. 그래서 자바스크립트를 잘 알고 있으면 리액트를 배울 때도 큰 어려움이 없습니다. 앞으로 전화번호부 프로젝트를 만들면.. 2019. 12. 11. 이전 1 ··· 16 17 18 19 20 21 22 ··· 27 다음
