본문 바로가기

분류 전체보기155

[CSS] text-overflow로 넘치는 텍스트 표시하기 See the Pen by seyoungjoy (@seyoungjoy) on CodePen. 2021. 9. 26.
[CSS] 텍스트 스타일(text-transform/text-shadow) text-transform 속성 영문자를 표기할 때 텍스트의 대,소문자를 원하는 대로 바꿀 수 있다. 이중 capitalize 속성은 몰랐는데... 시작하는 첫번째 글자를 대문자로 변환한다. capitalize - 시작하는 첫 번째 글자를 대문자로 변환한다. text-shadow 속성 text-shadow : none | See the Pen by seyoungjoy (@seyoungjoy) on CodePen. letter-spacing 자간은 가능하면 em 단위로 지정하는 것이 좋다. 그래야 바뀌는 글꼴에 맞추어 자간이 유지되기 때문이다. 2021. 9. 26.
[HTML] button, output, progress, meter 태그 태그 - 버튼 넣기 태그로 submit이나 reset의 버튼을 만들 수 있다. 속성 속성 값 설명 submit 폼을 서버로 전송한다. reset 폼에 입력한 내용을 초기화시킨다. button 버튼 형태만 만들 뿐 자체 기능은 없다. 태그와 태그의 차이점 태그는 태그 이름에서 알 수 있듯이 화면 낭독기에 그 역할을 정확하게 전할 수 있다. 즉 웹접근성에 더 좋다는 것이다. 또한 태그를 사용한 버튼에는 콘텐츠를 포함할 수 있기 때문에 아이콘을 추가할 수 있고 CSS를 이용해 원하는 형태로 꾸밀 수 있다. form에서 버튼을 만들 때는 웹접근성을 위해 태그로 만드는 것이 좋을 것 같다. 태그 - 계산 결과 입력하는 값이 계산 결과라는 것을 브라우저에 알려준다. output 태그를 사용하면 output으로 묶인.. 2021. 9. 26.
[HTML] 드롭다운 목록(select, option, datalist optgroup, textarea) , , 태그 - 드롭다운 목록 만들기 사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다. 태그 드롭다운 목록의 시작과 끝을 표시한다. 한 가지 옵션이 표시되고, 화살표를 클릭해 그 옵션들을 살펴볼 수 있고 필요한 한 가지 항목을 선택할 수 있다. 즉, 사용자가 선택할 수 있는 선택 항목을 제공하고, 그 범위내에서 선택이 가능하다. 속성 size - 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다. multiple - 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다. 태그 드롭다운 목록에 표시되는 옵션들은 태그를 이용해 지정한다. 태그에서만 사용하는 속성은 다음과 같다... 2021. 9. 26.
[HTML] form 이용해서 상품 주문서 작성해보기 See the Pen by seyoungjoy (@seyoungjoy) on CodePen. 각각 스타일을 주기위해 어떤 부분은 label안에 input을 포함할지 말지의 여부를 다르게 한다. 필수로 들어가야하는 부분은 required를 꼭 붙여주고 주문 정보 같은 부분은 한 list 안에 두개의 label태그가 들어가 상품 checkbox와 number 두개의 input을 만들어야한다. 2021. 9. 25.
[HTML]<input> 태그 속성 autofocus 속성 - 입력 커서 표시하기 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다. placeholder 속성 - 힌트 표시하기 사용자가 텍스트를 입력할 때 도움이 되도록 입력란에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다. readonly 속성 - 읽기 전용 필드 만들기 입력란에 사용자가 입력하지 못하고 읽게만 만든다. required 속성 - 필수 필드 지정하기 내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해준다. min, max, step 속성 - 최솟값, 최댓값, 간격 태그의 유형이 date, datetime, datetim.. 2021. 9. 25.
반응형

티스토리툴바