본문 바로가기

Frontend136

[CSS] background-attachment background-attachment 속성 scroll - 화면 스크롤과 함께 배경 이미지도 스크롤된다. fixed - 화면이 스크롤되더라도 배경 이미지는 고정된다. 2021. 9. 26.
[CSS] background-origin 속성 : 배경 이미지 배치할 기준 조절하기 background-position 속성으로 이미지를 배치할 때 origin 속성을 이용하면 유용할거같아 정리한다. 속성 값 설명 border-box 박스 모델의 가장 외곽인 테두리(border)가 기준이 된다. padding-box 박스 모덜에서 테두리를 뺀 패딩(padding)이 기준이 된다. content-box 박스 모델에서 내용 부분이 기준이 된다. 2021. 9. 26.
[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.
반응형

티스토리툴바