전체 글17 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. HTML 메타태그 Viewport 안녕하세요! 오늘은 HTML 메타 태그중 하나인 Viewport 에 대해서 정리해 보려고 합니다. 메타태그는 HTML 문서의 맨 위쪽에 입력하는 태그로, head 태그 사이에 위치하는 태그 입니다. HTML 파일을 참고하다 보면 위와 같은 메타 태그를 보신적이 있으시죠? 위와 같은 메타 태그는 사이트 디자인에는 영향을 미치지 않지만 HTML 문서가 어떤 내용을 담고 있고, 주제가 무엇인지 작성자가 누구인지에 대한 문서 자체의 특성을 담고 있습니다. 이 meta 태그 중 하나인 Viewport에 대해서 정리해 보겠습니다! 반응형 웹(Responsive Web)에 필요한 Viewport 반응형 웹이란 하나의 웹페이지가 데스크탑 PC의 브라우저, 스마트폰, 태블릿 등 접속하는 디바이스의 종류에 관계없이 화면의.. 2022. 12. 16. 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. 이전 1 2 3 4 5 다음 more