반응형 개발 공부/publishing5 즐겨찾기 / 퍼블리싱 작업에 폰트 적용 폰트어썸 사이트로 종결! (무료폰트, 자세한 라이센스 범위까지 한번에 확인) 매번 폰트 찾아서 임베딩 시키기 바빴는데여기로 해결하면 될 것 같다웹 폰트 사용하기에서 CSS 설정하기, Link 방식, Import 방식, Font-face 방식총 4가지 모두 사용가능합니다.원하는 폰트를 바로 다운로드 가능하며,라이센스 사용 범위까지 한눈에 확인하실 수 있습니다. 폰트 어썸웹 폰트 사이트입니다.wess.tistory.com 2024. 6. 26. 무료 아이콘 / 아이콘 저장소 서비스 폰트어썸 사용해보기 ( 설치없이 벡터 아이콘 사용 가능 ) 오픈 소스 프로젝트 사이트를 통해서 코딩 시 벡터 아이콘을 무료로 사용해 보기 클론 코딩 할때 좋습니다.아이콘 원본 없이 사용하기 이름은 폰트어썸인데.. 아이콘을 사용하기 위한 오픈 프로그램입니다.폰트어썸font awesome Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com 1. 폰트어썸 사이트 가입하기폰트어썸 사이트 접속 -> 무료 사용 클릭 -> 이메일주소 입력 -> 메일확인 -> 비밀번호 입력 -> 개인정보입력 -> 끝 -> 메인에서 start for f.. 2024. 6. 20. SCSS / SCSS Architecture, 초기 셋팅 폴더 구조 정리 웹 앱을 만들기 위해서 html 공부하다 알게 된 SCSS수정이 너무 용이해서 신세계를 경험했습니다. 브라우저가 scss파일을 직접 읽지 못하기 때문에 css로 컴파일 과정을 거쳐야 합니다.1. SCSS 프로그램 설치비주얼 스튜디오.. 2024. 5. 6. CSS 네이밍 / CSS 클래스 네임 방법론 BEM 알아보기 1. BEM이란?Block, Element, Modifier를 뜻합니다 보통 클래스 네임을 정할때 사용하는 방법론 중에 하나로BEM은 기본적으로 ID를 사용하지 않고, class명만을 사용합니다.즉, 어떤 목적인가에 포커스가 맞춰져 있습니다.개발, 디버깅, 유지보수를 위해 가능한 한 명확하게 네이밍 하는 것이 목표입니다.모든 것이 클래스이고 중첩된 것은 없어야 합니다. 2. BEM 네이밍 장점- 목적과 기능을 명확히 전달한다- css만으로 구조를 알 수 있다. (sass, scss와 사용하기 편하다)- css 명시도를 항상 낮은 수준으로 유지하기 때문에 구체성으로 인한 코드의 길어짐을 방지할 수 있다.- 높은 재사용성과 대규모 css를 효율적으로 관리할 수 있다 3. BEM 사용법BEM의 class명은.. 2024. 5. 2. CSS 네이밍 / CSS 표기법 kebab-case, snake_case, camelCase, PascalCase 알아보기 1. 표기법의 필요성 프로그램밍 언어 가이드라인으로 공통된 표기법이 있습니다개발자들이 개발하는데 있어서 코딩컨벤션이 존재하여 일관된 코딩스타일을 위해 필요하며생산성을 높힐 뿐 아니라 코드 분석에 대한 이점을 가질 수 있습니다. 2. 표기법의 종류kebab-case케밥 케이스단어 사이를 대시(-)로 구분하며모든 단어가 소문자로 구성꼬챙이 꽂은 것과 비슷해서 케밥으로 사용snake_case스네이크 케이스언더바(_)가 들어 있는 표현방식뱀처럼 생겼다고 하여 붙여지며 모든단어의 문자가 소문자 or 대문자로 사용프로그래밍 언어 중Python, Ruby, Rust, Go 등이 변수와 함수 이름을 snake_case로 권장하고 있음camelCase카멜 케이스첫 글자는 소문자이며 중간글자들은 대문자로 진행 이 모습이 .. 2024. 4. 30. 이전 1 다음 반응형
