본문 바로가기

HTML & CSS27

[HTML 기초] HTML 구조 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 HTML 기초에 대해 알아볼게요! HTML은 HyperText Markup Language의 약자로 웹페이지의 구조를 정의하는 마크업 언어 입니다. HTML을 사용하기 위해서는 태그(tag)를 알아야되는데 태그가 무엇일까요? 1. 태그 태그는 HTML을 사용하기 위해 사용하는 하나의 명령어 라고 보시면 됩니다. 보여줄 내용을 감싸서 사용하며, 태그의 특정한 방식으로 동작 하도록 구성 되어있습니다. 태그가 적용될 내용 2. 태그의 규칙 태그는 꺽쇠괄호 로 구성 되어 있으며 시작태그와 종료 태그, 한 쌍으로 구성되어 있습니다. 단, 종료태그는 슬러시( / ) 기호를 앞에 붙여 태그 종료를 선언 합니다. 3. HTML 구조 HTML을 사용하기 위한 기본 구.. 2023. 10. 31.
[CSS animation] css 애니메이션 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS 애니메이션에 대해 알아볼게요! CSS 애니메이션은 다양한 속성이 있는데, 속성이 너무 많다 보니 어떻게 사용하지는지, 언제 어떻게 적용하는지 헷갈리는 경우가 있죠. 어떤 속성이 있는지 한번 정리해봅시다! 1. HTML 구조 간단하게 클래스 명이 box인 태그를 만들어 볼게요. 2. CSS 가로, 세로 300 x 300 크기의 배경 색상이 들어가게 만들었습니다. 브라우저 결과 화면 그럼 애니메이션을 적용하기 위해 어떤 속성이 있는지 확인해 봅시다 1. animation-name .box { width: 300px; height: 300px; background-color: salmon; animation-name: box_ani; } 애니메이션을.. 2023. 2. 26.
[Visual Studio code] 비주얼 스튜디오 코드 추천 익스텐션 안녕하세요 PNcoding 입니다 :) 비주얼 스튜디오 코드엔 여러 유용한 익스텐션이 있습니다. 비주얼 스튜디오 코드를 사용하면서 개인적으로 추천하는 익스텐션입니다. 먼저, 비주얼 스튜디오 코드를 설치 후 익스텐션 설치하는 방법에 대해서 알아보겠습니다. 비주얼 스튜디오 코드 설치 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux.. 2023. 2. 26.
반응형