Web design/HTML & CSS21 웹사이트에 웹폰트와 이모지 적용하기 웹사이트에서 타이포그래피(폰트)는 웹사이트의 분위기를 잘 표현해주는 요소 중 하나이다. 웹사이트를 보면 종종 기본 폰트로는 그 분위기를 표현하기 어려워 마크업 언어가 아닌 이미지로 노출하는 경우가 많은데, 이미지로 텍스트를 표현할 경우에는 여러 문제가 발생한다. - 번역기 및 텍스트 리더기의 사용이 불가하다. - 화면 비율이나 반응형에 맞게 유연하게 표현할 수 없다. - 다양한 디바이스에 맞춰 고해상도의 이미지를 준비해야 한다. - 텍스트 수정이 번거롭고, 수정용 파일을 별도로 챙겨야 한다. 이러한 문제로 이미지로 텍스트를 표현하기보다는 웹폰트의 사용이 필요하다. (여러모로 웹표준에 맞춰 웹페이지를 구현하는 것이 바람직하다.) 물론 웹폰트 사용 시에도 용량 문제가(경량화가 잘 된 한글 폰트도 영문에 비해.. 2020. 7. 4. <input>의 유형 input 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. input 요소는 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 있어, HTML에서 제일 강력하고 복잡한 요소 중 하나다. input의 유형 간략한 예제 간략한 예제에 대한 모습이지만, 다양한 페이지에 유용하고 다양하게 활용할 수 있다. Form에 대한 설명과 튜토리얼은 다음을 참고하자. https://developer.mozilla.org/ko/docs/Learn/HTML/Forms/Your_first_HTML_form 나의 첫 HTML 폼 이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서.. 2020. 6. 10. 자간, 행간, 어간 조절 자간 (글자 사이의 간격) 조절 : letter-spacing 다음과 같이 자간을 조절할 수 있다. letter-spacing: normal; letter-spacing: .2rem; letter-spacing: 1px; letter-spacing: -1px; 행간 (텍스트 줄의 간격) 조절 : line-height 다음과 같이 행간을 조절할 수 있다. line-height: normal; line-height: 3.5; line-height: 2em; line-height: 140%; line-height: 30px; 어간 (단어 사이의 간격) 조절 : word-spacing 다음과 같이 어간을 조절할 수 있다. word-spacing: normal; word-spacing: 1rem; word-spa.. 2020. 5. 25. mix-blend-mode : 요소를 겹치는 효과 이미지 등의 요소가 겹치는 경우 중첩된 상태를 표시하는 방법에 대해 알아보고자 한다. 포토샵에서 사용하는 블렌드 모드와 유사한데, 이 효과를 css에서도 사용할 수 있다. 서로 다른 요소(ex.레이어)를 겹쳐서 색상에 대한 효과를 주고 싶을 때 믹스 블렌드 모드를 사용하면 좋겠다. /* Keyword values */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode.. 2020. 5. 23. [크롬] 캐시 비활성화 설정 방법 & 캐시 비우는 방법 개발자가 계속해서 개발하는 과정 중인 상황에서 캐시는 의미가 없을 수 있다. 구글 크롬 웹 브라우저에서 캐시를 비활성화하도록 설정하는 방법을 알아보자. 1. F12를 눌러 개발자 도구에 들어간다. 2. 우측 (점 세개) 버튼을 클릭하면 설정(Settings)이 보인다. Settings 클릭! 3. Network에 있는 Disable cache (while DevTools is open)을 클릭하면 완료! 크롬 캐시 비활성화 설정 : F12 → Settings → Network → Disable cache (while DevTools is open) 체크! 혹시 초기에 이 방법으로 설정해두었다가 캐시를 사용해야 할 상황이 생기면 난감해질 수 있는데, 그럴 땐 다른 방법이 있다. 바로 애초에 캐시 방지하도록.. 2020. 5. 6. CSS 선택자 규칙과 유형, 우선순위 CSS(Cascading Style Sheets)는 규칙 기반 언어로서, 웹 페이지의 특정 요소 또는 요소 그룹에 적용 할 스타일 그룹을 지정하는 규칙을 정의한다. 예를 들어 "특정 페이지 내의 타이틀을 큰 빨간색 텍스트로 표시" 를 원할 때 아래 코드와 같이 CSS로 작성하고 정의한다. .h1 { color: red; font-size: 5em; } ● Cascading : 스타일의 우선순위 CSS 선택자(Selectors)는 HTML 요소의 우선순위에 따라 스타일을 나타내므로 cascading은 매우 중요하다. 작성한 코드가 규칙에 맞지 않아 스타일이 작동하지 않을 수도 있으므로 CSS 메커니즘의 작동 방식을 이해하고, 우선순위에 따라 코드를 작성해야 한다. * 우선순위 : 태그 < 클래스 < #아이.. 2020. 5. 6. 이전 1 2 다음 반응형
