AI 웹개발반/HTML & CSS11 [CSS] scroll bar 만들고 숨기기 유튜브스타일로 카테고리를 만들고, scroll 숨겨서 적용하기 html 과 css 로 적당한 색감과 크기의 버튼을 만들어준다 # 이 부분을 js에서 추가하도록 하거나, html에서 필요한 만큼 하드코딩한다 카테고리이름 아래와같이 스크롤을 적용하면 스크롤 바가 바로 생기는데 문제는 가로 세로 관계없이 내용물이 정해진 상자의 범위를 벗어나면 scroll이 적용된다 auto 로 되어있는 부분에서 좀 곤란할듯! overflow : scroll; 그럴땐 해당 div 등의 가로 세로 크기를 조절해주거나 x y 축을 적용해주어 한 쪽 방향으로만 스크롤이 생기도록한다. -x 는 가로, -y 는 세로로 스크롤바가 자동 생성된다 overflow-x: scroll; overflow-y: scroll; 이후 스크롤바 숨기기를.. 2023. 6. 15. [TIL] html & css 공부, display: grid; ㅁㅁㅁㅁ ㅁㅁㅁㅁ ㅁㅁㅁㅁ css 그리드 시스템 공부 .card-container { #parent div width : 1200; display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, auto)); grid-template-rows: 300px 300px 300px; row-gap: 30px; column-gap: 20px; } .card-box { #child 요소 width: 480px; height: 270px; ... } auto-fill 속성을 사용하여 자동으로 가로 크기에 맞게 채워지도록 함 minmax에 원하는 최소 최대 크기를 지정하여 카드가 서로 침범하지 않도록 했다 높이는 flex할 필요가 없어서 고정된 크기를 주.. 2023. 6. 14. [TIL] html & css 공부 기본적인 html의 구조와 css를 공부하며 프론트엔드를 작성 중 새로운 기능이나 기억해둘만한 요소를 적어두자 id는 # class는 . 그냥 태그는 아무것도 없는 상태로 css파일로 불러올 수 있다. p { } # class='box' .box { } # id='box' #box { } 다른 class내의 요소를 태그로 불러올 수도 있다 .box {#div에 속성 부여} .box p {#div내의 p태그에 속성부여} 두가지를 함께 사용하여 div 혹은 태그 내 문자열을 가로 / 세로 정렬할 수 있다 justify-content: center; text-align: center; 상위 div에 flex 설정이 되어있으면 하위 요소들을 flex하게 가로로 나열할 수 있다. .parent { display:.. 2023. 6. 13. 이전 1 2 3 다음
