grid란? 2차원 방식(가로와 세로 같이 사용)으로 효과적으로 레이아웃 배치할 수 있는 스타일 속성 grid 사용법 부모 요소 (grid-container) display: grid; 또는 display: inline-grid; 자식 요소(grid-item) grid-item 각각 위치 잡아주기 grid 부모요소 속성 그리드 정의 grid 설정 display: grid; inline-grid; grid 행/열 크기와 개수 설정 < 첫번째 방법 > grid-template-columns: 1열값 2열값 …; grid-template-rows: 1행값 2행값 …; 반복되는 경우 repeat 사용 ex) grid-template-columns: repeat(4, 250px) ex) grid-template-columns: repeat(4, 25%) ex) grid-template-columns: repeat(4, 1fr) < 두번째 방법 > grid-template-areas : 그...
![[css 14.] grid 사용하여 레이아웃 배치하기 (사용법, 부모-자식 속성 정리)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MjZfNjkg/MDAxNzE0MDYzMjA0MDI2.olZ4Vj0_h9Ei4O6gAoas_82gtn7m4ZbhE5KZ3HIhb4gg.wPw_Hgbb9nvUkbULomF1MtK7Pp3YOJ2pgCtyhxm0DgEg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-025.jpg?type=w2)
#
cssgrid
#
gridtemplate
#
griditem
#
gridcontainer
#
grid
#
girdarea
#
cssgrid적용
#
cssgrid속성정리
#
cssgrid사용법
#
grid레이아웃
![[공유] JQUERY 정리](https://mblogthumb-phinf.pstatic.net/MjAyNDAzMjRfOCAg/MDAxNzExMjE5NTY0MzUx.U_xTw2xroje3n5Te_JaXZ31AQxuB15h-lxXDXXoyYFMg.FGaq8TxSb86BTYd8Xbcx46_4UEhg5xgeSwRAX5dJzvEg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4_-004.jpg?type=w2)
![[공유] notion 으로 10분만에 포트폴리오 사이트 제작하기 (+단축키)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MTBfMTgz/MDAxNzEyNjc3NzM1MDE4.vA0_InQlDJeni-nGubGS7FANRfLvgyNFZyjwue6fILcg.Xc00TChWowWOBwMbn6S6HI0nd4bN19fBiUNGA2rFbU8g.JPEG/%C1%A6%B8%F1%C0%BB-%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-003.jpg?type=w2)
![[jQuery 5.] jquery 메서드 종류 (속성, 스타일, 클래스 추가 등)](https://mblogthumb-phinf.pstatic.net/MjAyNDA1MTVfNSAg/MDAxNzE1NzY2OTE3Mzkx.SMrL39xV9C62nrI6EjhGj2Fj9fHZpajIh8_2EW8jvgcg.Lb6UcrnZRnBS2JEqi1_cdwKuxKwgzqbL1DTI7wnSZyog.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB_%281%29-009.jpg?type=w2)
![[css 효과3.] scrollbar 스크롤바 색깔 변경, 커스텀](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MTNfMTA3/MDAxNzE4MjY4NTA3Njcx.KSJ7gPcPqpr-OwJinavhxKq476CDi0HQgVL_-a1ZnFcg.WLKqaFy3vVEi9RNqKPYbTqPZ6OYRsCd42P60DVHAiIYg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-029.jpg?type=w2)
![[javascript 7.] 자바스크립트 조건문](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MTRfMTM1/MDAxNzE4MzMyODA2OTk4.P3Lym16CaGDcFGtqxt0jGa0i0nokG7Xm8108masgiucg.Epg0aUHte2aaAaspGvjh_Hvs7jnUpbtuPX6r0wPc9DEg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB_%281%29-007.jpg?type=w2)