신예리의 개발자취

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..

행(Row)과 열(Column) 축 개념을 이해하려면 row와 column부터 알아야 한다. row≒가로≒inline, column≒세로≒block이다. Block-level elements와 Inline elements 블록-레벨 요소(Block-level elements) 기본적으로 세로 방향으로 정렬, 요소 단위로 강제 개행, 모든 너비를 차지함(옆에 다른 요소 두기 X) 인라인 요소(Inline elements) 기본적으로 가로 방향으로 정렬, shinye0213.tistory.com 축(Axis) flexbox 개념을 이해하려면 축부터 알아야 한다. 주축(Main Axis) 교차축(Cross Axis) 이름 그대로 주축과 '교차'한다. 따라서 주축이 가로면 교차축은 세로, 주축이 세로면 교차축은..

display: block; display: inline; display: inline-block; display: flex; (번외) float: left; 아래 글에서 float에 대해 상세하게 설명해 놓았다. 영어 전문을 읽을 필요 없이 그림만 봐도 어느 정도 이해가 된다. All About Floats | CSS-Tricks Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is comm..

블록-레벨 요소(Block-level Elements) 기본적으로 세로 방향으로 정렬, 요소 단위로 강제 개행, 모든 너비를 차지함(옆에 다른 요소 두기 X) 인라인 요소(Inline Elements) 기본적으로 가로 방향으로 정렬, 공간이 충분하면 개행하지 않음, 필요한 너비만 차지함(옆에 다른 요소 두기 O) 참고 블록 레벨 요소 - HTML: Hypertext Markup Language | MDN HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 developer.mozilla.org 인라인 요소 - HTML: Hyperte..

도메인 이름(Domain Name) 컴퓨터는 인터넷에서 IP 주소로 서로를 식별할 수 있지만, 사람은 숫자의 나열인 IP 주소를 기억하기 어렵다. 이 문제를 해결하기 위해 일정한 규칙에 따라 단어를 조합해 만든 것이 바로 도메인 이름이다. 도메인 이름은 각 부분마다 담당하는 DNS 서버가 있고, 특정 도메인의 IP 주소를 알려면 역순(Root → Top-level → Second-level → Sub)으로 긴 여정을 떠나야 한다. 도메인 등록 웹사이트에 원하는 도메인 이름을 등록하고 돈을 지불하면 해당 도메인 이름을 쓸 수 있다. 도메인 이름 시스템(DNS, Domain Name System)의 작동 원리 참고 [생활코딩] DNS(Domain Name System) 회사에서 강의 듣고 정리한 내용 1. ..

HTTP(HyperText Transfer Protocol) 서버와 클라이언트 간의 요청과 응답을 전송하는 프로토콜. 웹에서만 사용하며, TCP/IP 기반으로 작동한다. 상태를 가지고 있지 않은(Stateless) 프로토콜이다. 미니사전 클라이언트 [client] 웹페이지 손님. 정보를 요청(request)하는 컴퓨터. 서버 [server] 웹페이지 주인. 요청에 응답(response)하는 컴퓨터. 프로토콜 [protocol] 컴퓨터의 데이터 교환 방식을 정의하는 규칙(통신규약). 인터넷 프로토콜 슈트 [Internet Protocol Suite] 프로토콜 모음. 이 중 TCP와 IP가 가장 많이 쓰임. 전송 제어 프로토콜 [TCP, Transmission Control Protocol] 전송 조절 프로..