HTML36 css 속성 셀렉터에 대하여 알아보기 css 속성 셀렉터에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 속성 셀렉터에 대하여 알아보도록 하겠습니다. 속성도 html 파일을 작성할 때 정말 많이 쓰는 요소입니다. 전체적인 뼈대에 들어가는 부속품의 역할을 속성이 하기 때문입니다. 그래서 이번 시간에는 속성을 이용하여 css를 적용시키는 방법을 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 속성 셀렉터 속성 셀렉터는 말 그래도 html 태그 내에 쓰이는 속성을 이용해서 적용시키는 셀렉터 입니다. 사용 방법은 아래와 같습니다. input[type=text] {color : red;} 이런 식으로 속성을 대괄호로 묶어서 속성을 표현하며, 이 속성이 들어가 있는 자리들이 전부 저 css가 적용되어 바뀝니다. 그럼 바로 예제 코.. 2023. 3. 13. html fieldset, legend 태그 이용하여 폼 요소 그룹핑 하기 html fieldset, legend 태그 이용하여 폼 요소 그룹핑 하기 네 안녕하세요, 이번 포스팅에서는 폼 요소를 그룹핑하는 방법에 대하여 알아보도록 하겠습니다. 폼 요소를 그룹핑 한다는 것은 여러 가지의 폼 요소들을 하나의 설문지와 같은 형태의 양식으로 큰 묶음으로 정리하여 나타내는 것을 말합니다. 이러한 것은 특히 회원 가입 페이지 등을 만들 때 필요한데, 이를 어떤 식으로 만드는 지 한 번 알아보도록 하겠습니다. 1. 폼 요소 그룹핑 하기 : fieldset, legend 태그 이용 그리고 이런 정보 입력 칸을 좀 더 깔끔하게 만드는 방법이 있습니다. 바로 그것들을 그룹핑을 하는 것입니다. 그렇게 되면 좀 더 깔끔한 화면이 만들어지고, 시인성이 좋아지겠죠? 그래서 그럴 때 사용하는 태그는 fi.. 2023. 3. 10. html type 속성과 placeholder 속성을 이용하여 정보의 힌트 및 양식 보여주기와 형식을 가진 텍스트 입력하기 html type 속성과 placeholder 속성을 이용하여 정보의 힌트 및 양식 보여주기와 형식을 가진 텍스트 입력하기 네 안녕하세요, 이번 포스팅에서는 html을 이용해서 폼 요소에 입력하는 정보의 양식을 제공 받게 하고, 형식을 가진 텍스트를 입력하는 것을 한 번 해보겠습니다. 우리가 보통 폼을 이용해서 만드는 것들은 로그인 화면 같이 무언가를 입력을 하는 창입니다. 그런데 그러한 정보 입력 칸들이 중구난방하면 시인성이 떨어지기 때문에 사용자들이 불편함을 느낄 수가 있습니다. 그래서 그러한 경우가 발생하지 않도록 폼 요소들을 묶어주는 겁니다. 그래서 이번 시간에는 어떤 식으로 폼 요소들에 대한 양식을 제공하며, 그리고 폼 요소에 부가적으로 추가하면 좋은 기능들이 어떤 것들이 있는지 한 번 알아보도.. 2023. 3. 10. html number, range 속성을 이용하여 스핀 버튼과 슬라이드 바 사용하기 html number, range 속성을 이용하여 스핀 버튼과 슬라이드 바 사용하기 네 안녕하세요, 이번 포스팅에서는 스핀 버튼과 슬라이드 바를 사용하는 방법에 대해서 알아보도록 하겠습니다. 스핀 버튼과 슬라이드 바는 웹을 꾸미기에 아주 적합한 요소인데, 정말 어지간한 사이트들에는 다 들어가 있는 기능이 스핀 버튼과 슬라이드 바입니다. 그만큼 썼을 때 이목을 집중시키기가 쉽고, 매우 직관적으로 요소나 수치 등을 표현할 수 있어서 정말 많이 씁니다. 그럼 지금부터 이들을 어떻게 사용을 할 수 있는지 알아보도록 하겠습니다. 1. 스핀 버튼과 슬라이드 바로 편리한 숫자 입력하기 : number, range 속성 이용 이번에는 스핀 버튼과 슬라이드 바로 좀 더 시각적인 요소들을 넣어보겠습니다. html에서는 정.. 2023. 3. 7. 이전 1 2 3 4 ··· 9 다음