HTML/CSS문법79 CSS Counter CSS 카운터는 CSS 규칙에 의해 값이 증가할 수 있는 CSS에 의해 유지되는 "변수"이다(몇 번 사용되었는지 추적하기 위해). 카운터를 사용하여 문서에서 내용의 배치를 기반으로 내용의 모양을 조정할 수 있다. Automatic numbering with counters CSS 카운터는 "변수"와 같다. 변수 값은 CSS 규칙(사용 횟수를 추적하는)에 의해 증가할 수 있다. CSS 카운터를 사용하기 위해 다음 속성을 사용한다: counter-reset - 카운터를 만들거나 재설정합니다 counter-increment - 카운터 값을 증분합니다 content - 생성된 내용 삽입 counter() 또는 counters() 함수 - 요소에 카운터 값을 추가합니다 CSS 카운터를 사용하려면 먼저 counte.. 2023. 9. 10. CSS Website Layout CSS Website Layout 웹 사이트는 종종 머리글, 메뉴, 내용 및 바닥글로 나뉜다: 선택할 수 있는 다양한 레이아웃 설계가 있다. 그러나 위의 구조는 가장 일반적인 구조 중 하나이며, 이 튜토리얼에서 자세히 살펴보겠다. Header 헤더는 일반적으로 웹 사이트의 상단(또는 상단 탐색 메뉴 바로 아래)에 있다. 여기에는 로고 또는 웹 사이트 이름이 포함되는 경우가 많다: Header header 스타일은 background-color #f1f1f1, padding 20px, text-align center 로 스타일을 지정하였고, 위의 코드를 실행한 결과는 아래 그림과 같다. CSS Navigation Bar 탐색 모음에는 웹 사이트를 탐색하는 방문자에게 도움이 되는 링크 목록이 포함되어 있습니.. 2023. 9. 9. CSS textarea, select menu, input button etc CSS Styling Textareas 팁: resize 속성을 사용하여 텍스트 영역의 크기가 조정되지 않도록 한다(오른쪽 하단 모서리의 "그래버" 사용 안 함): Styling textarea Tip: 크기 조정 속성을 사용하여 텍스트 영역의 크기 조정을 방지합니다(오른쪽 하단 모서리에서 "그래버" 사용 안 함): Some text... 위의 코드를 실행한 결과는 아래 그림과 같다. CSS Styling Select Menu Styling a select menu 서울 대구 제주 위의 코드를 실행한 결과는 아래 그림과 같다. CSS input button Styling form buttons 위의 코드를 실행한 결과는 아래 그림과 같다. CSS Responsive Form 브라우저 창 크기를 조정하여 .. 2023. 9. 8. CSS Form - input HTML 양식의 form은 CSS를 통해 크게 향상될 수 있다: input field 스타일링 width 속성을 사용하여 입력 필드의 너비를 결정한다: 전체 너비 입력 필드 이름 input 요소에 width 100%로 창 크기 100%로 설정하였고, 아래 그림과 같다. 위의 예는 모든 요소에 적용된다. 특정 입력 유형만 스타일을 지정하려면 속성 선택자를 사용할 수 있다: input[type=text] - 텍스트 필드만 선택한다 input[type=password] - 암호 필드만 선택한다 input [type=number] - 숫자 필드만 선택한다 등등.. CSS Padded Input padding 속성을 사용하여 텍스트 필드 내부에 공간을 추가한다. 팁: 여러 개의 입력이 있을 경우 여유를 추가하여 .. 2023. 9. 7. 이전 1 2 3 4 5 ··· 20 다음
