전체 글33 [기초]CSS 선택자(가상 클래스, 가상 요소, 복합) 가상 클래스 선택자 1. 동적 가상 클래스: 사용자의 행동에 따라 스타일을 변경할 때 사용합니다.":hover": 마우스 커서를 요소 위에 올렸을 때 적용됩니다.a:hover { color: red;}링크에 마우스를 올렸을 때 텍스트 색이 빨간색으로 변합니다. ":focus": 요소가 포커스를 받을 때 적용됩니다. 주로 폼 요소에서 사용됩니다.input:focus { outline: 2px solid blue;}입력 필드가 포커스를 받을 때 파란색 테두리가 나타납니다. ":active": 요소가 활성화된 상태, 즉 클릭된 상태일 때 적용됩니다.button:active { background-color: green;}버튼이 클릭되었을 때 배경색이 초록색으로 변합니다. ":visited": .. 2024. 8. 12. [기초]CSS 선택자(기본, 결합, 속성) CSS 선택자는 HTML 요소를 선택하고 스타일을 적용하는 데 사용됩니다. 다양한 종류의 선택자가 있으며, 각각의 선택자는 특정 조건을 기준으로 요소를 선택합니다. 기본 선택자, 결합 선택자, 속성 선택자, 가상 클래스 선택자, 가상 요소 선택자, 복합 선택자 등이 있다.이번 포스팅에서는 기본 선택자, 결합 선택자, 속성 선택자에 대해 알아볼 것이다. 기본 선택자1. 전체 선택자 ('*')모든 HTML 요소를 선택합니다.(모든 요소의 기본 마진과 패딩 제거)* { margin: 0; padding: 0;} 2. 태그 선택자특정 태그를 가진 모든 요소를 선택합니다.(모든 태그에 파란색 텍스트 적용)p { color: blue;} 3. 클래스 선택자특정 클래스 이름을 가진 모든 요소를 선택합니다... 2024. 8. 12. [기초]CSS란 무엇인가? CSS(Cascading Style Sheets)는 웹페이지의 스타일과 레이아웃을 정의하는 데 사용되는 언어입니다. HTML이 웹페이지의 구조와 콘텐츠를 정의하는 데 사용된다면, CSS는 그 구조에 스타일을 적용해 웹페이지가 어떻게 보일지를 결정하는 역할을 합니다. CSS는 웹 개발의 핵심 요소 중 하나로, 웹페이지의 디자인과 사용자 경험을 개선하는 데 필수적입니다. CSS의 기본 개념선언 블록 (Declaration Block)CSS는 여러 개의 선언(declaration)으로 구성된 선언 블록을 통해 스타일을 정의합니다.각 선언은 속성(property)과 그 속성에 할당된 값(value)으로 이루어집니다.예: color: blue;는 텍스트 색상을 파란색으로 지정하는 선언입니다.h1 { colo.. 2024. 8. 11. [기초]HTML 의미론적 태그(sematic) HTML에서 의미론적(sematic) 태그는 콘텐츠의 의미를 명확하게 전달하는 태그를 말합니다. 이러한 태그는 웹 문서의 구조를 더 이해하기 쉽게 만들고, 검색 엔진과 보조 기술(예: 스크린 리더)이 콘텐츠를 더 잘 해석할 수 있도록 도와줍니다. 의미론적 태그를 사용하면 코드의 가독성이 향상되고, 웹 접근성이 증대됩니다. 의미론적 태그의 중요성가독성: 코드가 더 읽기 쉽고, 유지보수가 용이합니다.SEO: 검색 엔진이 페이지의 구조와 콘텐츠를 더 잘 이해할 수 있습니다.웹 접근성: 보조 기술(스크린 리더 등)이 콘텐츠를 더 잘 해석하여 사용자가 더 쉽게 접근할 수 있습니다. 주요 의미론적 태그와 그 용도1. 웹사이트 제목 Home About .. 2024. 8. 10. [기초]HTML form, input 태그 태그용도: 태그는 사용자 입력을 받을 수 있는 폼을 정의합니다. 폼 안에 다양한 입력 요소(input elements)들을 포함할 수 있습니다.특성:폼의 데이터를 서버로 전송할 때 사용됩니다.action 속성: 폼 데이터를 전송할 URL을 지정합니다.method 속성: 데이터를 전송하는 방법을 지정합니다. 일반적으로 GET과 POST가 사용됩니다.예시: 이름: 이메일: 태그용도: 태그는 다양한 타입의 사용자 입력 필드를 정의합니다. type 속성의 값에 따라 다양한 입력 필드를 생성할 수 있습니다.주요 속성:type: 입력 필드의 타입을 지정합니다. (예: text, password, submit, radio, checkbox, email, number, date 등)name: .. 2024. 8. 9. [기초]HTML 그룹화(div, span)와 속성(class, id) 태그용도: 태그는 블록(block) 레벨의 요소를 만들 때 사용됩니다. 주로 문서의 섹션을 그룹화하거나 레이아웃을 구성하는 데 사용됩니다.특성:블록 레벨 요소: 한 줄 전체를 차지하며, 다음 요소는 새 줄에서 시작됩니다.주로 컨테이너로 사용되어 내부에 다른 HTML 요소들을 포함할 수 있습니다.예시: 제 블로그에 오신걸 환영합니다. 여기는 Naerrow의 블로그로 다양한 정보를 쌓아가는 곳입니다! 태그용도: 태그는 인라인(inline) 레벨의 요소를 만들 때 사용됩니다. 주로 텍스트의 특정 부분을 스타일링하거나 특정한 행동을 부여하는 데 사용됩니다.특성:인라인 요소: 콘텐츠의 일부분만 차지하며, 다른 요소와 같은 줄에 위치합니다.주로 텍스트나 다른 인라인 요소들을 포함할 수 있습니다.예시:여기서.. 2024. 8. 8. 이전 1 2 3 4 5 6 다음
