Web design42 <input> 요소의 속성 지난 글에서 의 유형에 대해 알아봤는데, 이번 글에서는 을 컨트롤하는 속성에 대해 알아보고자 한다. 의 유형 input 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. input 요소는 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 있어, HTML에서 제일 강력하고 복잡한 요 hyoni-k.tistory.com 요소의 속성 input에는 다음과 같이 다양한 속성들이 있다. 다양한 속성 중에서도 조금 더 알아볼 속성은 autocomplete과 input:focus이다. 사용자가 텍스트를 입력하기 위해 입력 필드를 클릭하면 아래 이미지에서 보이는 것처럼 선이 생기거나, 자동완성을 허용한 상태로 입력 필드가 뜬다. 이러한 특성을 제어하고자 한다면 다음의 속성을 사용해보자... 2020. 7. 27. HTML Text Content Text content HTML 텍스트 콘텐츠를 사용하여 여는 와 닫는 태그 사이의 블록이나 컨텐츠 구획을 정리할 수 있다. 해당 콘텐츠의 목적이나 구조 판별하는데 사용하기 때문에 접근성과 SEO(검색 엔진 최적화)에 중요하다. 출처 MDN 텍스트 구조와 목록을 만드는 등의 방법을 알고 싶다면 아래를 참고 HTML text fundamentals That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more sem.. 2020. 7. 17. HTML 컨텐츠 요소와 <article> Content sectioning 컨텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있다. 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. (사용의 예로 게시판, 매거진, 뉴스 기사 등이 있다.) 하나의 문서가 여러 개의 을 가질 수 있다. 예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우, 각각의 글이 요소가 되며, 그 안에는 또 여러 개의 이 존재할 수 있다. 요소의 특성과 사용 : 전역 특성(Global attributes)이 있어 HTML에서 전역으로 사용할 수 있는 특성이 있다. 각각의 을 식별할 수단이 필요하며, 주로 제목(~) 요소를 의 자식으로 포함하는 방법을 사용한다. 요.. 2020. 7. 17. animation과 @keyframes CSS의 animation은 스타일과 애니메이션을 적용하고, 애니메이션의 중간 상태는 @keyframes을 이용해서 변화를 준다. animation MDN animation @keyframes @keyframes는 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있다. 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있다. MDN keyframes 다음은 animation과 @keyframes를 이용해 간단히 만들어본 애니메이션이다. 360도 무한 회전하는 애니메이션 예제 : 2020. 7. 15. background-size와 attachment : 페이지 스크롤 시 배경 이미지 고정 background-size 배경 이미지의 사이즈를 지정한다. background-size에 대한 자세한 내용은 여기를 참고 background-attachment 배경 이미지의 위치가 고정되어 있는지의 여부를 지정한다. scroll : 내용을 스크롤하면 배경 이미지는 고정된 상태로 스크롤 된다. fixed : 뷰포트(현재 문서가 전체 화면 모드로 표시되는 경우, 화면)를 기준으로 고정된다. 요소에 스크롤 메커니즘이 있어도 배경은 내용과 함께 움직이지 않는다. local : 요소의 내용을 기준으로 고정된다. 요소에 스크롤 메커니즘이있는 경우 배경은 내용과 함께 스크롤된다. 그리고 배경의 이미지 영역과 위치 지정 영역은 내용의 스크롤 가능 영역에 상대적이다. 즉, 아래 두가지 코드는 다르게 표현된다. ba.. 2020. 7. 14. background-position : 배경 이미지 위치 background-position은 이미지나 영상을 배경으로 둘 때, 위치를 지정하는 속성이다. background-position initial : 기본값으로 둘 때 inherit : 부모 요소의 속성값을 상속받고자 할 때 top, right, bottom, left, center, length(길이 단위), percentage(%) .. CSS 속성마다 배경 이미지의 수평 및 수직 위치를 정할 때 아래의 속성을 사용한다. position-x는 수평 위치를, position-y는 수직 위치를 설정하며, 설정한 레이어를 기준으로 위치하게 된다. background-position-x background-position-y 적용 예시 : 2020. 7. 14. 웹사이트에 웹폰트와 이모지 적용하기 웹사이트에서 타이포그래피(폰트)는 웹사이트의 분위기를 잘 표현해주는 요소 중 하나이다. 웹사이트를 보면 종종 기본 폰트로는 그 분위기를 표현하기 어려워 마크업 언어가 아닌 이미지로 노출하는 경우가 많은데, 이미지로 텍스트를 표현할 경우에는 여러 문제가 발생한다. - 번역기 및 텍스트 리더기의 사용이 불가하다. - 화면 비율이나 반응형에 맞게 유연하게 표현할 수 없다. - 다양한 디바이스에 맞춰 고해상도의 이미지를 준비해야 한다. - 텍스트 수정이 번거롭고, 수정용 파일을 별도로 챙겨야 한다. 이러한 문제로 이미지로 텍스트를 표현하기보다는 웹폰트의 사용이 필요하다. (여러모로 웹표준에 맞춰 웹페이지를 구현하는 것이 바람직하다.) 물론 웹폰트 사용 시에도 용량 문제가(경량화가 잘 된 한글 폰트도 영문에 비해.. 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 3 다음 반응형
