728x90 반응형 웹개발/HTML || CSS13 HTML 무료폰트 적용하기 여기 구글폰트 사이트가 있다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 원하는 폰트를 찾은다음, 필요한 폰트를 선택한다. 그리고 우측상단에 있는 저 테트리스같은 아이콘을 클릭하면... 이렇게 코드가 나옴. 이 태그들을 복사해서 html파일 헤드에 넣어주면 된다. 그리고 css에는 이걸 붙여넣으면 된다. (나는 폰트 뭐 두개선택해서 저렇게 두개가 나왔다) 만약, 모든 body태그에 적용시키고싶다면.. body{ font-family: 'Gowun Batang', serif; } css파일에서 이런식으로 작성해주면 된다. 적.. 2023. 5. 26. grid 레이아웃 부모 태그에 display: grid속성을 주고, grid-template-columns, rows를 설정 해 준다. 가로가 네 칸이게 하고싶으면 columns: 1fr 1fr 1fr 1fr; 처럼 해 주면 된다. (fr은 비율로 나누는 것인데 그냥 px단위나 %로 써도 된다) 세로는 똑같이 row에 해 주면 된다. 여러 칸을 차지하고 싶을 때 방법 1 grid container 내부에 있는 박스를 하나 선택해서, 새로 클래스를 부여하고 grid-column 속성을 준다. 위 사진에서는 grid-column: 1/3; 으로 되어있는데, 가로줄 첫번째~세번째 줄까지 차지해달라는 말이 된다. 여러 칸을 차지하고 싶을 때 방법2 자식 태그에는 grid-area: 영역이름; 을 설정 해 주고, 부모 태그인 gr.. 2023. 1. 14. transform과 keyframes로 애니메이션 만들기 transform 대상을 변형시킬 수 있다 transform: skew(각도); =>비틀기 transform: rotate(각도); =>회전 이 외에도 scale() => 확대/축소 translate( , ) => 좌표이동 등이 있으니 자동완성으로 확인해 보고 쓰면 된다. @keyframes @keyframes 애니메이션이름{ ...} 으로 작성할 수 있다. 애니메이션이 몇% 진행되었을 때의 모습을 각각 지정 해 주면 된다. 이 애니메이션을 사용할 때는 animation-name: animation-duration: 지정해 주면 된다. 2023. 1. 14. SASS를 알아보자 변수 사용하기 파일명.scss 를 컴파일하면 .css파일이 생성된다. scss파일에서 $변수명: 값; 으로 변수를 사용할 수 있고, 이를 컴파일하면 해당 변수의 값으로 치환되어 css파일이 생성된다. nesting 문법 괄호 안에 또 괄호를 쳐서 내용을 적을 수 있는데, 이 예시는 mydivbox 안에 있는 h4태그는 font-size:16px로 설정, mydivbox 안에 있는 span태그는 color:red로 설정하라고 적은 것이다. css에서는 .mydivbox h4{ . . .} .mydivbox span{ . . .} 와 같이 따로 따로 작성하였는데, mydivbox 하나의 괄호 안에 묶을 수 있어 관리하기 용이하다는 장점이 있다. @extend 문법 @extend 부모클래스; 를 작성하면 부모.. 2023. 1. 13. [HTML] Shadow DOM - 숨겨진 요소들 변경하는 법 Shadow DOM을 살펴보자. HTML 삽입 미리보기할 수 없는 소스 이런 input태그들, 버튼을 꾸미고 싶을 때 어떻게 하면 좋을까? style="background: red;" 이런식으로 줄 수 있으면 좋겠지만 얘들은 적용이 되지 않는다. 크롬에서 검사하기 기능을 사용해서 코드를 보자. 파일 선택 버튼을 눌러보면 ... pseudo="-webkit-file-upload-button" 이라고 나와있는 것을 볼 수 있다. 여기 적힌대로 pseudo element를 설정해서 버튼을 꾸밀 수 있다. pseudo element로 작성해주니 잘 적용이 된 모습이다. 그런데 어떤 것은 위 방법대로 해도 제대로 적용이 되지 않을 수 있다. user agent stylesheet 가 적용되어 있는 경우에 그럴 수.. 2023. 1. 12. [HTML] Bootstrap 이용하는 방법, Bootstrap으로 반응형 페이지 만들기 https://getbootstrap.kr/docs/5.2/getting-started/introduction/ Bootstrap 시작하기 Bootstrap은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입부터 프로덕션까지 뭐든지 빠르게 빌드해보세요. getbootstrap.kr 부트스트랩 시작하기 페이지에 접속한다. Bootstrap의 CSS와 JS가 포함된 코드를 그대로 복사해서 시작 틀로 사용해도 되고, 또는 그 아래에있는 CSS, JS링크를 복사해서 CSS는 head태그 안에, JS코드는 body태그 가장 아래에 추가해 주면 된다. 화면 상단의 검색창에 원하는 레이아웃,컴포넌트 등 필요한 것을 검색한다 아래는 Cards를 검색한 결과임. 예시로 나오는 카드를 보고 마음에 들면.. 밑에있는.. 2023. 1. 9. [HTML] CSS 애니메이션 구현하기 - Transition 이런 이미지가 있을 때 이미지 위에 마우스 커서를 올리면 이렇게 변하도록 만들어 보자. 500억 기본적인 이미지 위에, 마우스를 올렸을 때 나타나게 할 박스를 만든다. 여기서는 박스다. 이 박스를 이미지와 같은 위치, 이미지 위에 놓아야 하는데 그렇게 하기 위해서 이미지가 있는 박스를 position: relative 로 묶는다. 그리고 overlay의 속성으로 position: absolute를 주면 된다. (position:absolute는 position : relative를 가지고 있는 부모를 기준으로 찰싹 달라붙게 된다.) .overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0.. 2023. 1. 8. [HTML] 아이콘 넣기 - font awesome 이런 아이콘들을 넣어보자. 아이콘들을 직접 포토샵으로 그려서 쓸 수도 있겠지만 간단하게 font-awesome 라이브러리를 이용해 보자. https://cdnjs.com/libraries/font-awesome/5.5.0 font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of a.. 2023. 1. 8. pseudo class로 인터랙티브 버튼 만들기 얼마전에 만들었던 장바구니 페이지. HTML 삽입 미리보기할 수 없는 소스 버튼 위에 커서를 올리면 손가락모양으로 바뀐다거나 하는 등의 동작을 하려면 어찌해야하오 .pay-button { width:200px; height: 50px; background-color: navy; color: white; font-size: 16px; border-radius: 5px; float: right; cursor: pointer; } 이건 내가 얼마전 만들었던 버튼이다. cursor: pointer; 은 버튼위에 커서 올라갔을때 손가락모양으로 바뀐다는 것 .pay-button:hover{ background-color: cornflowerblue; } .pay-button:focus{ background: gra.. 2022. 11. 13. 표 생성하기 1 2 3 4 5 6 7 8 9 table 태그 안에 thead, tbody가 있고 그 안에 tr, 그 안에 td. td개수가 늘어나면 가로수가 늘어난다. 숙제>> 더보기 Your shopping cart ITEM AMOUNT PRICE TOTAL 상품명1 1 1979.00 1979.00 상품명1 1 1979.00 1979.00 3940.00 Edit your shopping cart 2022. 11. 11. [HTML] input HTML 삽입 미리보기할 수 없는 소스 코딩애플로 배우고있는 HTML 이번 시간에는 input 박스를 만들었다 input type=[text,email,checkbox,button 등] 해오라는 대로 만든 레이아웃. 내가 짜본 코드의 문제점: 클래스가 제각각이다 => 재활용을 하지 못한다 가 가장 큰 문제. 더보기 contact us Your Email First name Last name Message subscribe 아직 미숙해서 클래스명도 뒤죽박죽 css도 여기저기 알아보기 힘들게 흩어져있다. 다음 강의를 듣고 수정한 부분들. 모든 입력창들은 class를 "form-input"으로 통일하여 클래스를 재사용하였다. Fist name, Last name은 class를 "w-50"으로 통일하였다. (w.. 2022. 11. 6. HTML 스타일링 YEOM 글자를 감쌀 의미없는 태그 굵게하기배우기 난 여기다가 본문을 적고싶은데? style=" width: 100px; display:block; margin-left:auto; margin-right:auto; text-align: center; font-size: 16px; font-family: "궁서체"; color: "red"; 뭐 요정도를 배웠다 2022. 9. 25. 1차시 제목은 여기다가 적으삼 여기다가 본문을 적으셔라. 이동하기 버튼임 링크임 항목1 항목2 제목 본문 링크 버튼 항목 항목 항목 항목 2022. 9. 25. 이전 1 다음 728x90 반응형
