CSS5 체크박스 커스텀하기 목차1.필요한 요소2. label태그로 체크박스 모양 만들기3. label 체크박스를 원형으로 만들기 4. 원형 체크박스 안에 v표시할 가상요소를 추가5. 가상요소 각도 기울기 바꾸기 6. V자 위치 조정하기7. Input의 체크박스 우리는 웹사이트를 이용하다보면 checkbox가 ihtml을 배우다가 알게된input태그의 checkbox와 모양이 다른 경우를 볼 수 있다.아래의 경우를 보면 왼쪽은 input의 체크박스, 오른쪽은 카카오톡의 체크박스이다.똑같이 만들려면 단순히 모서리를 둥글게 깎는다면 원하는 모양이 나올까?원형 체크박스를 만들기 위해 모서리를 둥글게 해주는 속성인 border-radius속성을 사용해보았다 결과는 변하지 않았다. 왜 그럴까?웹 브라우저가 checkbox 요소.. 2024. 5. 4. font 목차 1. font 스타일은? 2. font-size 3. font-weight 4. font-style 5. font-family 1. font 스타일은? 텍스트의 모양을 변경하는 스타일 중 하나로 글씨의 크기를 키우거나 강조할 수 있다. 2. font-size 선택자나 요소 안의 글자 크기를 지정하는 스타일 속성으로 기본 사이즈는 16px이다. HTML 삽입 미리보기할 수 없는 소스 기본 사이즈의 글자와 변경된 사이즈를 비교하여 달라진 것을 확인하였다. 예제에서는 20px로 지정하였지만 px, %, rem 등으로 수정할 수 있다. 3. font-weight 선택자나 요소 안의 글자 굵기를 지정하는 속성으로 기본값은 400이다. 주로 특정 텍스트를 강조하기 위해 사용된다. 텍스트 HTML 삽입 미리보기.. 2024. 4. 13. display 목차 1. 문법사용 2. 속성값 display 속성은 브라우저에 요소가 어떻게 보여지는지를 결정하는 스타일 요소다. 각각의 요소의 display 속성을 갖고 있으나 필요에 따라 변경할 수 있다. 어떻게 바꿀수 있는지 알아보도록 하자. 1. 사용문법 1 ) 스타일 태그에서 선택자로 스타일 지정 2 ) 요소에 직접 스타일 지정 두 방법 다 스타일은 지정되지만 두번째 방법은 여러 요소가 있을 때 코드가 지저분해보이고 관리가 어려울 수 있어 첫번째 방법을 추천한다. 2-1. 속성값 : block 블록형 태그로 변환하는 속성 기존 inline형 요소를 영역의 크기를 지정하기 위해 사용한다. 인라인1 인라인2 span이라는 인라인 속성을 가진 요소가 display스타일 속성을 block으로 설정해보았다. 인라인 속.. 2024. 4. 12. position 1. static - position의 기본 속성으로 모든 요소가 기본적으로 static형태다. 2. relative relative는 해당 스타일이 적용된 요소가 본인 위치에서 움직이는 속성이다. 위에서 빨간 박스를 움직이기 위해 position의 relative속성을 지정하고 위에서 100px, 왼쪽에서 100px만큼의 거리를 두겠다고 지정하였다. 그 결과 기존위치에서 다른 곳에 빨간 박스가 위치하게 되었다. 3.absolute absolute는 상위 노드(부모노드) 중 postition이 relative가 있는 노드를 찾아 기준으로 삼아 그 안에서 움직인다. 빨간 박스를 파란색 박스안에서 움직이기 위해 파란 박스에 position을 relative로 설정하여 기준으로 삼고 빨간 박스에 absolut.. 2024. 4. 7. 이전 1 2 다음