본문 바로가기

분류 전체보기114

[HTML, CSS 실습] flex-grow 속성 이용해 상단바 만들기 [CSS] .nav-container { display: flex; height: 40px; padding: 10px; background: darkkhaki; /* 세로 - 가운데 정렬 */ align-items: center; } .nav-item { margin-right: 10px; } [HTML] ShooShop Products Services 2023. 11. 19.
[HTML, CSS] 레이아웃 만들기 - Flexbox float와 inline-block은 귀찮음 📌 display: flex 쓰면 박스 가로 배치가 쉬워진다. display: flex를 부모에 주면 된다. 자동으로 가로 배치 display: flex는 display: inline-block과 table요소를 합친 것 같다. 600px해도 실제로 600px이 아니라 최대한 600px이다. (테이블 폭과 비슷) ✅ justify-content: center 가운데 정렬 .flex-container { display: flex; /* 가운데 정렬 / 우측은 flex-end / 좌측은 flex-start...*/ justify-content: center; } ✅ flex이용 시 세로 배치 flex-direction column : 세로 / row : 가로 .f.. 2023. 11. 19.
[HTML, CSS] 웹 폰트(커스텀폰트) 넣는 방법 / anti-aliasing 📌 일반적인 폰트 넣는 법 font-family: ‘폰트이름’ 자동으로 inherit 되는 속성이므로 에 넣으면 다 적용됨. 여러개 지정 가능 처음 폰트가 에러가 나면 두번째 적용, 안되면 세번째 안정성을 높여준다. font-family는 pc에 설치되어있어야 사용 가능 📌 커스텀 폰트 넣는 방법 @font-face @font-face { font-family: '작명'; src: url(); } ttf파일 넣기 → 폰트 등록 완료 @font-face { font-family: 'amsterdam'; src: url(../font/amsterdam.ttf); } body에 넣기 @font-face { font-family: 'amsterdam'; src: url(../font/amsterdam.ttf);.. 2023. 11. 19.
[HTML, CSS] pseudo-class 로 클릭 시 스타일 바꾸기 📌 pseudo-class를 붙이는 요소들 - 사용자가 클릭할 수 있는 요소들 button a input 📌에 pseudo-class 적용하기 - 인터렉티브 버튼 만들기 cursor: pointer 하면 커서가 누를 수 있는 모양으로 바뀜. pointer모양 말고도 cell 등 모양 많다. .button { color: white; background-color: rgb(0, 80, 91); border-radius: 10px; font-size: 10px; padding: 10px; /* 커서 모양 바꾸기 */ cursor: pointer; } ✅ 마우스 올렸을 때 스타일 :hover ✅ 커서 찍혀 있을 스타일 (클릭 후 유지할 스타일) - 다른 곳을 누르면 다시 focus를 잃는다. :focus ✅ .. 2023. 11. 19.
[HTML, CSS 실습] Table 레이아웃을 이용해 쇼핑 카트 화면 만들기 [css] /* td, th { border: 1px solid black; } */ .table-background td, th{ padding: 15px; border-bottom: 1px solid #c2d3de; color: gray; text-align: center; font-size: 10px; } .background-blue { width: 100%; height: 370px; background: skyblue; padding: 30px; } .table-background { width: 100%; max-width: 600px; background: white; border-radius: 10px; position: relative; } .table-background th:nth-.. 2023. 11. 19.
[HTML, CSS 실습] Contact Form 만들기 [css] div, input, textarea { box-sizing: border-box; } body { margin: 0; } .form-background{ padding: 30px; background-color: black; } .form-white { padding: 30px; background-color: white; /* 크기 제한 */ width: 80%; max-width: 600px; /* 가운데 정렬 */ margin: auto; } .form-input { width: 100%; padding: 5px; font-size: 10px; border: 1px solid gray; border-radius: 5px; } .w-50 { width: 50%; float: left; p.. 2023. 11. 17.

티스토리툴바