신예리의 개발자취

% %는 부모의 영향을 받는다. 정확히 말하면 부모의 높이/너비 대비 자식의 높이/너비를 지정해주는 단위다. vh, vw vh와 vw는 사용자의 눈에 보이는 스크린 범위에 영향을 받는다. 100vh 1vh는 1/100 viewport-height, 즉 뷰포트(스크린) 기준 100분의 1이다. 따라서 100vh는 뷰포트 전체 높이가 된다. 100vw 1vw 역시 1/100 view-width, 즉 뷰포트 기준 100분의 1이다. 100vw는 뷰포트 전체 너비와 같다. 참고 [CSS] vh란? / vw란? / what is vh? ❓ / %와의 차이 vh = viewport height vw = viewport width 즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다. 100vh..

position: fixed; position: sticky; 결론 메인 내비게이션 바는 fixed를, 특정 영역 안에서만 움직이는 헤더는 sticky를 적용하는 게 좋다. 근데 어차피 sticky는 IE에서 못 쓰니까 웬만하면 fixed를 쓰자. 참고 position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다. developer.mozilla.org

display: none; 해당 콘텐츠를 아예 치워버리기 때문에 콘텐츠가 차지하던 공간도 함께 없어진다. visibility: hidden; 해당 콘텐츠가 눈에 보이지 않을 뿐, 콘텐츠가 차지하던 공간은 그대로 남겨둔다. opacity: 0; visibility: hidden;처럼 눈에 보이지 않되 공간을 차지한다. 그리고 display: none;이나 visibility: hidden;과는 달리 이벤트가 정상적으로 작동한다. 요약 001.html normal 보이는가? O 이벤트 작동 O 공간 차지 O display: none; 보이는가? X 이벤트 작동 X 공간 차지 X visibility: hidden; 보이는가? X 이벤트 작동 X 공간 차지 O opacity: 0; 보이는가? X 이벤트 작동 O..

CSS 표준화 우선 reset.css를 알아야 normalize.css를 이해할 수 있다. reset.css는 CSS 설정을 초기화(reset) 하는 것이다. 하나부터 열까지 초기화 하기 때문에, 아주 사소한 속성까지 재설정해야 한다. 때로는 default CSS에서 시작하는 것보다 시간이 더 걸린다. '아 이런 것까지 없애버렸다고? 저런 것도 다 설정해줘야 한다고?'라는 생각이 들 수도 있다. reset.css CSS 초기화 브라우저마다 CSS의 설정값이 존재하는데 이를 0, 1, none 따위의 기본값으로 설정해 모두 초기화 하는 것을 뜻한다. CSS를 초기화하면 브라우저가 달라도 최대한 똑같은 화면이 보이게 shinye0213.tistory.com normalize.css는 CSS 설정을 표준화(n..

CSS 초기화 브라우저마다 CSS의 설정값이 존재하는데 이를 0, 1, none 따위의 기본값으로 설정해 모두 초기화 하는 것을 뜻한다. CSS를 초기화하면 브라우저가 달라도 최대한 똑같은 화면이 보이게 해준다. reset.css CSS를 초기화할 때는 주로 reset.css에 초기화 할 내용을 담아 style.css에 import하는 방법을 많이 쓴다. 아래 코드가 가장 보편적인 reset.css 코드다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, ..

grid: auto-placement 005.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 005.html .grid { background-color: black; color: white; display: grid; gap: 5px; height: 100vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .item:nth-child(odd) { background-color: springgre..

Grid Item 정렬하기 justify-self align-self place-self -content, -items, -self 비교하기 참고 justify-self - CSS: Cascading Style Sheets | MDN The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis. developer.mozilla.org align-self - CSS: Cascading Style Sheets | MDN The align-self CSS property overrides a grid or flex item's align-items value..

Grid Container 정렬하기 004.html header content nav footer 004.css .grid { background-color: black; color: white; display: grid; gap: 5px; height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { background-color: springgreen; } .content { background-color: deepskyblue; } .nav { background-color: mediumpurple; } .footer { background-color: orange; } ju..

Grid Items 정렬하기 004.html header content nav footer 004.css .grid { display: grid; gap: 10px; height: 50vh; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); } .header { background-color: springgreen; } .content { background-color: deepskyblue; } .nav { background-color: mediumpurple; } .footer { background-color: orange; } justify-items align-items place-items Block 요소와 ..

Grid Template fr(fraction) 004.html 004.css .grid { display: grid; gap: 5px; height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { background-color: springgreen; } .content { background-color: deepskyblue; } .nav { background-color: mediumpurple; } .footer { background-color: orange; } 004.css .grid { display: grid; gap: 10px; height: 50vh; grid..

Child Elements (Items) grid container에 포함된 grid items. 축약형(grid-column, grid-row) Grid Layout Module Grid Layout Grid Columns Grid Rows Grid Gaps grid-column-gap 각 column의 간격(가로 여백) grid-row-gap 각 row의 간격(세로 여백) grid-gap Grid Lines grid-column-start 특정 영역의 시작점이 되는.. shinye0213.tistory.com 004.html grid-column grid-row 004.css .grid { display: grid; grid-template-columns: repeat(4, 100px); grid-t..

Grid Container display: grid;와 display: inline-grid; grid-template-columns column의 너비와 개수를 정한다. grid-template-rows row의 높이와 개수를 정한다. 추가 속성 반복(repeat) minmax auto-fill auto-fit max-content와 min-content 참고 repeat() - CSS: Cascading Style Sheets | MDN The repeat() CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring patte..

Grid Layout Grid Columns Grid Rows Grid Gaps grid-column-gap 각 column의 간격(가로 여백) grid-row-gap 각 row의 간격(세로 여백) grid-gap Grid Lines grid-column-start 특정 영역의 시작점이 되는 column의 번호 grid-column-end 특정 영역의 끝점이 되는 column의 번호 grid-row-start 특정 영역의 시작점이 되는 row의 번호 grid-row-end 특정 영역의 끝점이 되는 row의 번호 참고 CSS Grid Layout W3Schools offers free online tutorials, references and exercises in all the major language..

Flex Item flexbox 정렬에 영향을 미치는 속성. flex container와 달리 부모(container)가 아니라 자식(item, box)에 직접 설정해야 한다. flex container에 대한 설명은 아래 링크에서 읽어보면 된다. Flex Container Flex Container 부모(container)가 display:flex일 때, 부모에게 설정하면 그 자식(box)의 정렬에 영향을 미치는 속성. flex-direction flex-wrap flex-flow flex-direction과 flex-wrap을 함께 사용할 때, fle.. shinye0213.tistory.com align-self align-items, align-content와 비슷하므로 자세한 설명은 생략. 말 ..

Flex Container 부모(container)가 display:flex일 때, 부모에게 설정하면 그 자식(item, 즉 box)의 정렬에 영향을 미치는 속성. flex-direction flex-wrap flex-flow flex-direction과 flex-wrap을 함께 사용할 때, flex-flow로 대체하면 코드가 짧아진다. justify-content align-items 이 속성은 cross axis 방향의 box 위치와 여백 설정에 관여하며, 개행하지 않는다. align-content 마찬가지로 cross axis 방향의 box 위치와 여백 설정에 관여해 align-items와 유사한 성질을 가진다. 부모의 width가 부족하면 flex-wrap처럼 개행하며, box 덩어리들을 inli..