728x90 반응형 콜로소7 [2-4] 웹 명함 구축하기 (2) - 웹폰트, 변수 지정, sass 기능 웹 폰트 불러오기- 로컬 폴더woff, woff2로 돼있는 파일 확장자 2개를폴더로 옮겨주기- font 라는 폴더 따로 생성해서 관리해주면 수월// 2-4) 폰트 연결해주기 - @font-face 사용@font-face { // 불러올 폰트파일의 이름 지정 font-family: "KoddiUD OnGothic"; // 폰트 파일의 위치 지정. 폰트 파일에 넣었던 폰트들 넣어주면 된다. // 폰트 확장자가 여러개 있는 경우, // 브라우저마다 호환되는 폰트파일이 다를 수 있음. // 반점(,)을 쓰고 아래에 다른 포맷도 불러와줌. src: url("/font/KoddiUDOnGothic-Regular.woff2") format(woff2), url("/font/KoddiUDOnGot.. 2024. 4. 28. [2-4] 웹 명함 구축하기 (1) - 기본 설명 정리 (css, sass, js) CSS, Sass 변수 사용CSS와 SCSS에서는 변수를 지정하여 속성 값을 컨트롤할 수 있다.:root 요소 안에--name 을 지정하여 속성 값 저장 가능$name 을 통해 속성 값 저장 가능.- CSS로 컴파일 되기 때문에컴파일 된 후에는 변수처럼 사용할 수 없다.- 여러 파일을 사용하여 변수를 한 번에 관리하기 용이- CSS의 변수는 이후에 JS를 이용해서요소의 속성 값을 변형할 수 있음.= 다크모드 / 라이트모드 사용할 때 자주 사용. SCSS$primary: #FF008A;$sub_primary: #31E6FF;$1h: 1.55em;CSS:root{ --primary: #FF008A;}p{ color: var(--primary);}:root { --primary: #f1c6d6; --tex.. 2024. 4. 27. [2-2] 반응형 웹 사이트 구축하기 (4) - 모바일 사이즈 // 2-2) 반응형 웹사이트 만들기@media screen and (max-width: 1024px) { .contents p { font-size: 1.4rem; }}@media screen and (max-width: 768px) { .door-line { display: none; } .static-door-line { // 태블릿 사이즈에서는 이게 보이게 하기. (새로 만든 door-line ) display: block; } .background { padding: 0; // 녹색 막대기 개수 조정 span { // span태그 너비조정 width: 25%; margin: 0; .. 2024. 4. 24. [2-2] 반응형 웹 사이트 구축하기 - 코드 보호되어 있는 글 입니다. 2024. 4. 24. [2-2] 반응형 웹 사이트 구축하기 - 테이블, anchor태그 table 태그 하나 작성하면 tbody 라는 것 안에 자동으로 들어가게 됨.td 들은 자동으로 display : table-cell 적용돼있는 것 확인 가능border-top과 bottom: 3가지의 속성이 들어감1) border-bottom-width2) border-bottom-style3) border-bottom-color 2024. 4. 24. [2-1] 반응형 웹 사이트 구축하기 - 코드 보호되어 있는 글 입니다. 2024. 4. 17. [1-2] 디자인 툴 및 플러그인 설치 & 개발 visual studio code - live sass compiler 설치 scss - scss 안에 있는 내용들을 css 포맷으로 변환 2024. 4. 14. 이전 1 다음 728x90 반응형
