: ) Web41 [HTML, CSS 실습] 반응형 레이아웃 만들기 - 쇼핑몰 레이아웃 [태블릿 사이즈 결과 화면] [모바일 사이즈 결과 화면] [CSS] div { /* width가 padding, border포함하게 하기 */ box-sizing: border-box; } body { margin: 0px; } .main-background { width: 100vw; height: 100vh; background-image: url(../versailles.jpg); background-size: cover; background-repeat: no-repeat; padding: 1px; } .main-title { color: white; font-size: 40px; font-family: 'Times New Roman'; margin-top: 40px; margin-right: 2.. 2023. 11. 19. [HTML, CSS] 반응형 레이아웃 만들기 (media query 문법) 📌 media query 문법을 이용해 반응형 레이아웃을 만든다. - break point를 설정한다. 1. ✅ 반응형 사이트 만들려면 head에 밑에 내용 복붙 필요 2. ✅ media query 문법 @media screen and (최대폭 설정하기) 현재 브라우저 폭이 설정한 최대폭 이하면 밑에 코드 적용하기 class 몇 개 적든 상관없음 - 여러개 사용 가능 ➡️ 스타일 중복이 생기면 밑에있는걸 우선적으로 적용함 보통 큰사이즈→작은사이즈 순으로 작성 breakpoint 기준 px값은 다른 사람 따라하는걸 권장. 1200px 992px 768px 576px breakpoint 너무 많이는 X @media screen and (max-width: 576px) { .main-title { font-s.. 2023. 11. 19. [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. 이전 1 2 3 4 5 6 7 다음
