어느 망한 하루의 시작

그분이 찾아오셨다. 5시에 스터디카페에 와버렸다. 진짜 .. 나란놈 정신차렷!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 정신차리자.. 내일은 빨리오자.

프로그래머스 자바스크립트 스터디 2주차

lang="ko"의 의미 타입을 주석으로 다는 방법 JsDoc https://poiemaweb.com/jsdoc-type-hint JSDoc을 사용하여 자바스크립트에 타입 힌트 제공하기 | PoiemaWeb JSDoc을 사용하여 자바스크립트에 타입 힌트 제공하기 poiemaweb.com CSS :root https://developer.mozilla.org/en-US/docs/Web/CSS/:root :root - CSS: Cascading Style Sheets | MDN The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the element and..

CSS 가상 셀렉터(Pseudo Selector) :active, :hover, :focus

https://hogni.tistory.com/110 CSS 가상 셀렉터(Pseudo Selector) :active, :hover, :focus 가상 선택자(셀렉터)를 이용하면 HTML 요소의 상태에 따라서 해당 요소의 스타일을 다르게 적용할 수 있습니다. 대표적인 것이 hover, active, focus입니다. 아래의 예제처럼 사용할 수 있습니다. :hover hogni.tistory.com focus https://mong-blog.tistory.com/entry/focus-%EA%B4%80%EB%A0%A8-%EC%84%A0%ED%83%9D%EC%9E%90%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90focus-focus-within-focus-visible f..

CSS 초기화 하는 방법

http://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com

[CSS Grid] 영역 이름 사용하기 grid-template-areas

grid-template-areas 각 영역에(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법입니다. 위 레이아웃을 grid-teplate-areas로 표현하면 다음과 같습니다. .container { grid-template-areas: "header header header" " a main b " " . . . " "footer footer footer"; } 점은 빈칸을 의미합니다. 사용방법 우선 다음과 같은 html 파일이 있습니다. Header Sidebar A Sidebar B Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem voluptatibus quam rerum facilis sit fug..

[CSS Grid] grid-column, grid-row

다음과 같은 레이아웃이 있다. 위 레이아웃에 다음과 같은 코드를 적용하면 어떻게 될까? 다음과 같다. column은 파란색 , row는 초록색이다. 위 처럼 가변적으로 item 이 크기를 조절할 수 있는 것이다. 근데 저렇게 column과 row 의 line 이 있으려면 다음처럼 행, 열중 하나는 고정되어 있어야 되는 것 같다. 다음 코드에서는 columns 이 grid-template-columns 로 세개만 배치되도록 고정되어있다. grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); 다음 코드를 적용하면 어떻게 될까? 주석도 한번 보자. 더보기 C item 의 시작이 row 3번째 행으로 바뀌는 것을 알 수 있다. 이..

[CSS] Grid grid-auto-rows

grid-auto-rows 에 대해 배워보았다. 아! 물론 grid-auto-column 도 있다. 하지만 주로 사용되는 것은 grid-auto-rows 라고 한다. 대체 어떤 용도로 사용되는 것일까? 다음 레이아웃을 보자. 위 처럼 레이아웃이 잡힌다. 그런데 조금 이상하다. 아이템 F , I 가 있는 행에는 minimum height 가 적용이 되지않은 모습이다. 그 이유는 grid-tempate-rows : repeat(3, minmax(100px,auto)) 3으로 하드코딩이 되어있기 때문이다. 만약 동적으로 데이터가 계속 추가되는 상황이면 어떻게 해야할까? repeat(5, minmax(100px,auto)) 이렇게 repeat 내부의 숫자를 계속 바꾸어 줄 수 없는 노릇이다. 그럴 때 사용되는 ..

[CSS] Grid - gap

https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com GAP gap 을 20px 을 준 레이아웃은 다음과 같다. 이전에는 grid-gap 이라는 이름으로 사용했다고 한다. row-gap column-gap

[CSS] Grid auto-fill , auto-fit

https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com 일분코딩님의 글을 일부 발췌하고 저의 생각을 조금 붙여봤습니다. 자세한 내용은 위 글을 참고해주세요. auto-fill과 auto-fit auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채웁니다. auto-fill 먼저 살펴 봅시다. .container { grid-template-columns: repeat(auto-fil..

[CSS] Grid - minmax

다음과 같은 코드가 있다. 레이아웃은 어떻게 될까? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, qui. B C Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum commodi, amet eligendi consectetur dolores quae, omnis nulla debitis reprehenderit voluptatum sapiente impedit culpa dolor voluptatem pariatur minima non. Modi cum perferendis enim a iure eos voluptate, maxime voluptatibus dolor volup..