mynote6676 개발자 노트

가상 클래스란? 가상 클래스 선택자는 CSS에서 요소의 특정 상태나 위치를 기준으로 스타일을 적용하는 방법이에요. 일반 선택자( 태그,클래스, ID등 )가 "무엇"을 선택하느냐에 초점을 맞춘다면, 가상 클래스는 "어떤 상황"이나 "어떤 조건"에 있는 요소를 골라내는 데 사용됩니다. 이름에 "가상"이 붙은 이유는 실제 HTML에 클래스가 추가된 게 아니라. CSS가 요소의 상태나 위치를 "가상으로"판단해서 스타일을 입히기 때문이에요. 기호는 콜론(:) 으로 시작하며, 선택자 뒤에 붙습니다.(예: button:hover,li:first-child) 주요 가상 클래스:hover: 마우스가 요소 위에 있을 때 스타일 적용:focus: 요소가 키보드나 클릭으로 포커스를 받았을 때 적용(주로 입력창에 사용):fir..

결합 선택자란? 결합 선택자는 CSS에서 여러 선택자를 조합해서 HTML 요소 간의 관계를 기반으로 더 구체적으로 대상을 선택하는 방법이에요.기본 선택자(태그, 클래스, ID등) 만으로는 단순히 "무엇"을 선택할지 정할 뿐이지만, 결합 선택자는 "어떤 위치"나 "어떤 관계"에 있는 요소를 골라낼 수 있게 해줍니다.즉, 결합 선택자는 두 개 이상의 선택자를 "기호"로 연결해서 사용합니다. 이 기호가 요소 간의 관계를 정의해요,- 예 :div p는 안에 있는라는 뜻이고, div>p는 "의 직계 자식인 "라는 뜻이에요 정리하면 결합 선택자란 요소와 요소 사이의 계층 구조(부모 - 자식)나 순서 (형제 관계)를 활용해서 스타일을 적용하는 도구입니다. - 결합 선택자의 종류자손 선택자(): 부모 안의 모든 자손..

CSS 선택자란?CSS 선택자는 HTML 문서에서 스타일을 적용하고 싶은 특정 요소를 "선택"하는 도구입니다. 마치 가게에서 물건을 고를 때 " 이거 주세요!" 라고 손으로 가리키는 것처럼, 선택자는 "이 요소에 스타일을 입히고 싶어요!" 라고CSS에게 알려주는 역활을 합니다. 예를 들어,HTML에 태그가 여러 개 있을 때, "모든 문단을 파란색으로 만들자"거나 "특정 클래스가 붙은 문단만 굵게 하자" 같은 작업을 선택자가 가능하게 해줍니다. 태그를 선택해서 제목을 크게 만들기.warning 클래스를 가진 요소를 빨간색으로 강조하기#header라는 ID를 가진 부분에 배경색 추가하기. 선택자의 중요성-웹 페이지의 디자인과 레이아웃을 제어하는 첫 단계. 기본 문법-선택자 {속성: 값} 형태 기본 선택자..

참고 링크https://treasure01.tistory.com/34 픽셀(pixel), 해상도(Resolution)픽셀 (pixel) ‘Picutre(그림) Element(원소)’를 줄인 말로 ‘화소’라고 불리며, 색을 표시하는 하나의 점입니다. 디스플레이 장치 화면의 이미지를 구성하는 최소 단위입니다. PPI (Pixels per Inch) 해상treasure01.tistory.com 1. CSS 크기와 단위1. px (픽셀)정의:px는 픽셀 단위로, 해상도에 따라 상대적인 크기를 가지는 절대 단위입니다.1px는 일반적으로 화면에서 1개의 픽셀을 의미합니다.특징 :고정된 크기를 가지므로 해상도에 따라 크기가 달라질 수 있습니다.예 ; 16px는 대부분의 브라우저에서 기본 글자 크기로 사용됩니다.2. ..

1 .CSS란?더보기CSS(Cascading Style Sheets)-CSS는 웹 페이지의 스타일을 정의하는 언어입니다.-CSS3는 2005년 정의되었으면, 참고로 CSS2 sns 1998년,CSS1은 1996년에 제정되었습니다. CSS의 역활HTML로 구조화된 콘텐츠를 예쁘게 브라우저 상에 렌더링 처리합니다.-HTML 은 구조와 의미(Semantic Web)를 담당.-CSS는 이를 통해 화면에 보이는 부분의 스타일을 정의합니다.JavaScript는 사용자 인터페이스 등을 조정합니다.핵심 개념웹 페이지는 HTML, CSS, JavaScript로 표현됩니다.HTML ; 구조 CSS: 스타일JavaScript: 동적 기능 2. Selector(선택자) 더보기CSS Selector란?-HTML 문서의 특정..

시멘틱 웹 (Semantic Web)-시멘틱 웹은 월드 와이드 웹 컨소시엄(W3C)이 주도한 개념으로, 웹 데이터를 단순히 표시하는 것을 넘어 데이터가 의미를가지도록 만드는 기술과 철학을 의미합니다. - 기존 웹은 사람이 읽고 이해하기 쉽게 설계되었지만. 기계(컴퓨터,검색 엔진 등)는 데이터의 의미를 이해하기 어려웠습니다.시멘틱 웹은 데이터를 구조화하고 메타데이터를 추가해 기계가 데이터를 이해하고 처리할 수 있게 합니다. 시멘틱 태그 (Semantic Tag)- HTML5에 도입된 태그로, 콘텐츠의 의미와 구조를 명확히 정의하는 태그.- 기존태그는 단순히 레이아웃을 나누는 용도였지만, 시멘틱 태그는 콘텐츠의 역할과 의미를 부여해코드의 가독성과 접근성을 높임 주요 특징의미 전달; 태그 이름 자체가 콘텐츠의..

개념적 정리 : 사용자에게 보이는 콘텐츠 영역.주요 태그~ : 제목. : 문단. : 링크 : 블록 나누기.,, 목록:버튼: 표 형식 데이터 표시. : 사용자 입력 수집. : 입력 필드 생성 | 실습예제 큰 제목 중간 제목 작은 제목 이것은 하나의 문단입니다. 텍스트를 묶어줍니다. 여기를 클릭하세요! 이 문단은 div 안에 있습니다. 레이아웃을 나눌 때 유용합니다. li : 순서가 없는 목록을 표시할 때 --> 항목 1 항목 2 항목 2 li: 순서가 있는 목록을 표시할 때 --> 첫 번째 단계 ..

개념 정리 - HTML 속성(Attribute): HTML 태그에 추가적인 정보를 제공하는 key-value 쌍(예 : 속성명="값")-역할 : 태그의 동작 ,스타일 데이터 등을 정의하거나 제어-작성 규칙:-속성은 시작 태그 안에 작성-속성명은 소문자 권장. 값은 따옴표로 감쌈("또는") 주요 속성 예시: -id :요소의 고유 식별자class : 스타일링이나 스크립트를 위한 그룹 식별자src: 이미지 ,비디오 등의 소스 경로alt : 대체 텍스트 (접근성 중요)href: 링크 URL----------------------------------------------------- HTML 속성 배우기 id 속성 확인(렌더되는 페이지에 같은 id 값을 할당 해서는 안된다.) ..

여기서 템플릿이란 말은 웹 페이지를 만들기 위한 기본적인 구조 또는 뼈대라고 생각하면 좋습니다.즉 , HTML 문서를 작성할 때 공통적으로 사용되는 필수 요소들을 미리 정의해 놓은 형태를 의미합니다. HTML 기본 개념 확인하기더보기1. HTML문서의 기본 구조HTML 문서는 크게, 코드 작성 1.DOCTYPE선언역활 : 브라우저에게 "이 문서는 HTML5로 작성됨"을 알려줍니다.중요 포인트 : HTML 문서의 첫 줄에 반드시 작성해야 하며, 대소문자 구분없이 사용 가능합니다. 2.html 태그와 언어 설정 역활 : HTML 문서의 시작과 끝을 나타내며, 모든 컨텐츠를 감쌉니다.속성 lang="ko":문서의 주 언어가 한국어(ko)임을 설정합니다.-주요값 -ko: 한국en: 영어jp:..

학습 목표1.간단 개념 정리 HTML이란 -복습 HTML, 즉 HyperText Markup Language는 웹페이지를 작성하기 위한 표준 마크업 언어입니다. "HyperText"는 페이지 간에 링크를 생성할 수 있음을 의미하고, "Markup Language"는 텍스트에 태그를 적용하여 그것이 어떤 역할을 하는지 정의할 수 있음을 의미합니다. CSS란?Cascading Styke Sheets Language종속형 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로, HTML과 XHTML에주로 쓰이며, W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명은 style.css이다. 종속형 - HTML과 함께 쓰이는 언어이다. 스타일 지정하는 3가..