CSS/learned_it_today (34) 썸네일형 리스트형 padding을 li에 줄 것인가 a에 줄 것인가 (feat. a는 inline 요소라네) HOME ABOUT FAQ CONTACT 이런 메뉴를 만드는데 (아마) 당연히 위/아래, 좌/우 패딩을 줄 텐데 이때 패딩을 li에 줄 것인가 a에 줄 것인가 고민을 할텐데, a에 주는 것이 더 좋다. (a에 주어야만 한다.는 절대 아니지만..) 왜냐하면 a tag 주변 padding 전체가 target 영역이 되기 때문이다. 그러면 굳이 작고 작은(;) link text에 마우스를 갖다대거나 클릭하지 않고 padding 영역에만 마우스 커서가 들어오거나 클릭이 되면 hover 스타일이나 원하는 페이지로 이동하는 등의 효과가 일어날 수 있기 때문! 주변의 공간에 마우스를 갖다 대거나 클릭했을 때도 원하는 효과가 일어나기 때문. 근데!!!!!! a 태그는 inline element이다!!! 즉, width.. 가로배치(inline, inline-block, flex, grid, float) 요소 가로배치 하고 싶을 때 1. display:inline 단점: width, height, padding-top, padding-bottom, margin-top, margin-bottom 등을 줄 수 없다. 2. display:inline-block 3. display:flex; 4. display:grid; 5. float: left | right 문제점. 만약 ul의 자식인 li들에게 float:left를 주면 ul의 height이 0이 되어버릴 것... 이 문제를 해결하기 위해 첫 번째 방법은 ul{ overflow:hidden; } 아니면 ul::after{ content:''; display:block; clear:left; } 이렇게 ul의 가상 element 자식을 만들어준다. 그러면 .. ul {list-style-type:none, padding:0;} ul 만들면 생기는 몬생긴 점들이랑 왼쪽 옆의 불필요한 padding 40px 없애기 ul{ list-style-type:none; padding-left:0; } input 눌렀을 때 아름답지 않은 파란 선 없애기 {outline:none, box-shadow:none} & active, focus 됐을 때 border input 눌렀을 때 생기는 기본 파란선 없애고 싶을 때, input{ outline:none; box-shadow:none; } input창을 클릭하는 그 찰나에 색 바꾸고 싶을 때 input:active{ border-color: ; } focus 됐을 때 border 색 바꾸고 싶을 때 input:focus{ bordr-color:#fff; } CSS Grid 수업 필기(5) Media Queries & The Grid Heading Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam animi soluta aspernatur corrupti ratione. Heading Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam animi soluta aspernatur corrupti ratione. Heading Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam animi soluta aspernatur corrupti ratione. Heading Lorem ipsum, dolor sit amet co.. CSS Grid 수업필기 (4) - Grid Template Areas My Website Welcome To My Site Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo suscipit reprehenderit aperiam repudiandae voluptatibus, expedita ex temporibus eos et mollitia velit vel molestias sint dolore at doloremque neque minima optio ad tempore quisquam perferendis esse non. Aliquam illum doloremque architecto! Rem voluptas at sunt sed enim eius laborum dolores quaerat? Contac.. CSS Grid 수업 필기(2) Spanning Columns and Rows Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 .grid { display: grid; grid-template-columns: repeat(4, 1fr); } 우선 4개의 columns에 1fr씩. .item:first-child { grid-column-start: 1; grid-column-end: 4; } item1을 span하고 싶을 때. item1의 왼쪽 border을 1번이라고 생각해서, 1번 줄에서 시작해서 4번째 줄까지 아이템을 늘여줌. (칸으로 따지면 3칸) (아래 그림이 적용된 모습) .item:first-child { grid-col.. CSS Grid 수업 필기(1) grid-template-columns, grid-template-rows grid-template-columns 기본 셋팅 .item { padding: 3rem; background: #f4f4f4; border: #ccc 1px solid; text-align: center; font-weight: bold; font-size: 1.4rem; } Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 .grid{ display:grid; grid-template-columns: 300px 300px 300px; } 우선 컨테이너에 display:grid; 선언 (display:flex와 다르게 아무 변화 없음) grid-template-columns에 만들고 싶은 column의 갯수와 너비를 설정. 저렇게 하면 한 줄에 3개의 아이템이 배치되고 각각 .. 이전 1 2 3 4 5 다음
