CSS16 CSS 테두리 효과 애니메이션(css border animation) 안녕하세요! 오늘 만들어 볼 css 애니메이션은 테두리가 시계방향으로 생성 되며 채워지는 border animation입니다. 결과 화면 부터 확인 해 볼까요? 위와 같이 시계방향으로 테두리가 생성되며 나타나고 반대로 지워질 때는 반시계 방향으로 테두리를 지우는 효과를 직접 만들어 보겠습니다. 우선 효과를 적용할 html 태그부터 만들어 보겠습니다. 1. 효과를 적용할 요소 생성 & 스타일 적용 [html] Border Effect 위 코드와 같이 a 태그 영역 안에 텍스트를 입력하고 테두리 효과를 적용할 span 태그를 상하좌우 각각 하나씩 총 4개를 만들어 줍니다. span 태그의 경우 absolute 속성을 주어 위치를 지정해 줄 예정 이어서 a 태그의 position 솏성은 relative로 설정.. 2022. 12. 19. Select Box 스타일 변경 (html, css, jquery를 이용하여 나만의 select menu style 만들기) 안녕하세요! 오늘은 html 태그 중, select box의 스타일을 바꾸는 방법에 대해서 포스팅해보려고 합니다. 태그 생성부터 차근차근 진행해 볼 테니 포스팅을 보며 따라 해 보셔도 좋을것 같아요~ 우선 html에 select 태그를 하나 생성해서 결과를 확인해 보겠습니다. [html] 선택 옵션1 선택 옵션2 위와 같이 익숙하게 봐왔던 select box 하나를 만들어 보았습니다. 그런데 이렇게 만든 select box의 크기나 세부 옵션의 길이, 색상 또는 화살표 이미지를 내가 원하는 모양으로 변경하고 싶을 때가 있는데 직접 태그의 스타일을 바꾸기에는 많은 제한이 있습니다. 그래서 ul과 li 태그를 이용하여 select box를 자유롭게 수정할 수 있는 형식으로 만들고 select box의 옵션을.. 2022. 12. 17. CSS 초기화 (Reset CSS) 안녕하세요! 오늘은 CSS 초기화에 대한 내용을 정리해 보려 합니다. 웹페이지를 만들며 자주 사용하는 태그가 있으신가요? 기본적으로 사용하는 태그들을 나열하여 페이지를 하나 만들어 보겠습니다! 링크예제 입니다. li 첫번째 example li 두번째 example li 세번째 example li 네번째 example div 영역 strong 태그 address 태그 h1 태그 예제 h2 태그 예제 h3 태그 예제 대표적으로 사용하는 생각나는 태그들을 사용하여 html 파일을 작성 하였습니다. 결과 화면도 확인해 볼까요? 우리가 예상하는 일반적인 결과 화면 입니다. 하지만 위 내용을 개발자 도구창을 열고 조금 자세히 살펴 보겠습니다. 자세히 보시면 margin, padding, color, font와 같은.. 2022. 12. 14. CSS float 해제 방법 정리 레이아웃의 구성을 설계하는 과정에서 많이 사용하는 속성 float float 속성은 적용한 요소 뿐만 아니라 주변 요소에도 영항을 준다는 사실을 알고 계신가요? float 속성 사용 후 주변 요소의 배치에 영향을 주지 않기를 원하신다면 이를 해제해 주셔야 합니다! 언제 float 해제가 필요한가요? 아래 코드에서 두개의 div를 만들고 float 속성을 부여하였습니다. 결과를 확인해 볼까요? [html] element1 element2 [css] .container { width: 600px; } .wrapper { position: relative; border: 1px dashed red; padding: 10px; } .element1 { float: left; width: 80px; height:.. 2022. 12. 13. 이전 1 2 3 4 다음