전체 글 (104) 썸네일형 리스트형 <CSS> Flexbox 레이아웃 (2) + Flexbox Froggy 풀이 2. 자식 요소 flex item 자식 요소인 flex item를 정렬할 수 있는 속성에는 여러가지가 있는데, 다음과 같다. *유의점 : CSS 기존 속성 중 float, clear, vertical-align 속성은 flex item에 영향을 주지 않는다. 1) order flex container에 추가된 순서를 기준으로 각 flex item에 번호를 부여하여 순서를 바꿀 수 있다. ex. order:정수값; 2) flex-grow 각 flex item들에 대해 설정한 값으로 너비를 준다. 화면이 늘어나면 같이 늘어난다. *기본값은 0 ex. flex-grow:양의 정수값; 3) flex-shrink 각 flex item들에 대해 설정한 값으로 축소된다. 화면이 줄어들면 설정한 값만큼 축소된다(숫자가.. <CSS> Flexbox 레이아웃 (1) - Flexbox란? CSS3의 새로운 레이아웃 방식으로, 비교적 최신 브라우저에서 사용이 가능하다. Flexbox 레이아웃을 이용하면 부모 태그 내 자식 태그들의 위치나 정렬 등의 레이아웃 설정을 보다 편리하게 할 수 있다는 장점이 있다. - Flexbox 레이아웃 구성 크게 flex container라는 부모 요소가 있고, 이 내부에 flex item이라 불리는 자식 요소들이 위치한 형태로 구성된다. 이러한 관계를 갖고 있기 때문에, Flexbox를 사용하려면 부모 요소에 display 속성의 값을 flex로 먼저 설정한 후 사용할 수 있다. 혹은 부모 요소가 inline이면 inline-flex로 display 속성의 값을 설정해주면 된다. 구성은 flex container과 flex item들이 .. <자바스크립트 Javascript> mouseover, mouseout 이벤트 - 자바스크립트 mouseover, mouseout 이벤트 자바스크립트에서 마우스와 관련된 이벤트들을 활용하여 재미있는 효과를 만들었다. 사용한 이벤트는 mouseover와 mouseout인데, 선택한 영역에 마우스가 진입하는 이벤트가 나타나면 효과가 나타나고, 마우스가 영역 밖으로 벗어나는 이벤트가 나타나면 효과가 사라진다. 다음은 개인 프로젝트의 예시 사진이다. 프로그래밍을 위한 추천 도서를 소개하는 페이지에 나열된 목록 중 하나다. 도서의 사진 위로 마우스가 이동하면, mouseover 이벤트가 발생하면서 이미지는 흐려지고 '더 알아보기' 문구가 나타난다. 클릭하면 도서 소개 페이지로 이동도 한다! 그리고 마우스가 다시 사진 영역을 벗어나면, mouseout 이벤트가 발생한 것으로 인식하고 원본 도.. <자바스크립트 Javascript> 선택지 만들기(심리테스트 알고리즘 이용) (4) 결과 페이지를 위한 코드 구현 시, 방법이 없다고 판단하여 일일이 나열하는 것으로 마무리했었다. 그런데 다시 생각해보니 반복문으로 코드 길이를 줄이면서 더 효율적으로 코드 구현이 가능한 전제 조건은 이미 마련되어 있었다. 그것은 바로 반복분에서 사용하는 '인덱스'를 활용하는 것이었다. 따라서 차례로 다음과 같이 코드를 변경하였다. //변경 전 코드 function result() { const r1 = JSON.parse(localStorage.getItem('a1')); const r2= JSON.parse(localStorage.getItem('a2')); const r3= JSON.parse(localStorage.getItem('a3')); const result = [r1.a1, r2.a2, r.. <자바 Java> 쿠키(Cookie)와 세션(Session) - 세션 트래킹(Session Tracking) HTTP 프로토콜로 통신하는 웹 페이지들끼리는 그 특성상(stateless 방식) 서로의 상태나 정보에 대해 알 수 없다. 따라서 서버 단에서는 이를 포워딩이나 바인딩을 통해 처리해주는 것인데, 클라이언트 관점에서는 이를 '세션 트래킹(Session Tracking)' 기능으로 개발자가 구현하고, 웹 페이지들간에 서로의 상태를 알고 정보 공유를 할 수 있도록 만들어준다. 보통 이러한 정보 공유는 DB를 통해 이루어지지만, 동시 사용자 수가 많아지는 경우 속도가 느려질 수 있어 보다 빠른 속도로 이용하기 위해 세션 트래킹 방법을 사용한다. *데이터 연동 : DB 저장 세션 트래킹 - 클라이언트 PC, 서버 메모리 등 저장 가장 큰 예로 한 웹 서비스에 회원가.. 이전 1 ··· 9 10 11 12 13 14 15 ··· 21 다음
