CSS (48) 썸네일형 리스트형 position:absolute인 요소를 수직 정중앙에 배치하기 .parent{ position:relative; } .parent .child{ position:absolute; top:50%; transform:translateY(-50%); } 기준점 삼고 싶은 부모 요소에 position:relative를 준다. 그 부모 요소의 수직축 기준으로 정중앙에 위치시키고 싶을 때, position:absolute;를 주고 top:50%;를 주면 부모의 height기준 정중앙인 지점부터 시작해서 자식 요소가 배치된다. 그러면 내가 원하는 위치보다 child 요소가 아래로 내려가있는 것을 확인할 수 있다. 이 문제를 해결하기 위해서 사용하는 속성이 transform이다. transform에는 rotate, scale, translate 같은 함수가 와서 원하는 요소를 회.. 부모 요소(element) 속 이미지 크기 맞추기 부모 요소(element)의 width를 설정해도 이미지는 자체 width와 height가 있기 때문에 이미지는 (거의 항상) 부모 박스를 삐져나온다. 이때 자주 쓰는 CSS 속성 조합은 .parent{ width:400px; } .parent img{ display:block; width:100%; height:auto; } 이렇게 부모 element에 원하는 너비를 준다. img는 inline요소이긴 하지만 원래 자체 너비와 높이가 있어서 높이, 너비 조정이 가능하지만 좀더 정확성을 기하기 위해서 display:block을 준다. 그 후에 width:100%를 주면 부모 요소의 너비의 100%를 차지하고 height:auto를 주면 원래 이미지가 가지고 있던 비율에 맞춰서 자동으로 높이가 조절된다. float 너란 녀석... (6) (feat. 드디어 마무리) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📝 메모 1. 가로배치를 원하는 요소(들)에 float:left를 준다. 2.그 요소(들)의 parent 요소에 가상 요소를 만들어 준다. .parent::after{ content:""; display:block; clear:lef.. float 너란 녀석... (5) (feat. parent::after) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📝 메모 그래서 망가진 layout을 구원하는 방법에는 어떤 것들이 있는가? 1. .parent{ overflow:hidden; } 부모 요소에 overflow:hidden;을 준다. 2. .parent::after{ content:.. 선택된 메뉴에 border-bottom, font-weight을 주고 싶을 때 li에? a에? .menu-item.selected{ font-weight:500; border-bottom:1px solid #2860e1; } 이 경우는 a에 주든 li에 주든 상관 없다 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; } 이전 1 2 3 4 5 6 다음
