Minji

선택자(Selector) HTML 요소를 식별하여 스타일 규칙을 적용하는 데 사용되는 패턴, 표현 셀렉터를 사용해서 특정 요소나 요소 그룹을 선태갛고, 해당 요소에 스타일을 적용할 수 있다. 1. 태그 이름(Tag Selector) : HTML 태그 이름을 셀렉터로 선택하여 사용한다. p { color:red; } 2. ID 선택자(ID Selector) : HTML에 지정된 "고유한 ID 속성 값"을 기반으로 선택하여 사용한다. ID 이름은 해시(#)으로 시작한다. ID는 고유한 속성이므로 기본키와 같이 하나만 존재하여야 한다. id를 사용해보는 예제입니다. sample { color:red; } 3. 클래스 선택자(Class Selector) : HTML에 지정된 "클래스 속성 값"을 기반으로 선택하..

상속 특정 속성 값이 부모로부터 자식에게 전달되는 것 [부모 : div, 자식 : p] 텍스트 ≫ p 텍스트는 빨간색으로 출력이 된다. 텍스트 ≫ p 텍스트는 파란색으로 출력이 된다. 모든 CSS 속성이 상속되는 것은 아니다. 텍스트 ≫ 부모 요소에서 전달받고 난 후 자신의 스타일을 적용한다. border-width, border-style, border-color inherit : 부모 요소로부터 값을 상속받는다. 텍스트 텍스트 텍스트 모든 CSS 속성이 상속되는 것은 아니다. ≫ border, padding, margin과 같은 박스 모델 속성은 상속되지 않는다. 스타일 합치기와 오버라이딩 태그에 적용되는 모든 스타일이 합쳐지고, 동일한 스타일은 순위가 높은 스타일이 우선 적용되는 규칙

CSS 스타일 시트 CSS 스타일 시트를 사용하면, 개별 HTML 요소에 직접 적용하는 대신 한 곳에서 스타일을 전부 관리할 수 있다. 1. 외부 스타일 시트(External Stylesheet) : 별도의 .css 파일에 CSS 코드를 작성하고, HTML 문서에서 태그를 통해 파일을 참조하여 사용하는 방식 이렇게 사용하게 되면, 여러 HTML에서 같은 CSS 파일을 적용 가능하다. 2. 내부 스타일 시트(Internal Stylesheet) : HTML 문서 내부에 태그를 사용하여 직접 CSS 코드를 작성한다. 이 방법은 해당 HTML 문서에서만 필요한 특정 스타일이 있을 때 주로 사용한다. 3. 인라인 스타일(Inline Style) : HTML 요소의 style 속성 내부에 직접 CSS 코드를 작성..

웹 페이지 스타일 정의 (색상, 레이아웃, 폰트 등) 1. 선택자(Selector) : CSS 셀렉터는 스타일을 적용할 HTML 요소를 식별하는 데 사용한다. (ID, CLASS) 2. 속성과 값(Proporties & Value) : 선택한 요소에 적용할 스타일은 (속성 : 값) 정의된다. color : red; 3. 선언 블록 : 한 개 이상의 CSS 코드를 중괄호{}로 감싼 것이다. 속성과 값으로 이루어진 값들이 들어있다. 4. Rule set : 셀렉터와 선언 블록을 합친 것이다. 특정 HTML 요소에 여러 CSS요소를 적용할 때 사용한다. 5. 상속(Inheritance) : 부모 요소와 자식 요소로 상속된다. 6. 우선순위(Specificity)와 캐스캐이딩(Cascading) : 여러 스타일..

Web Form 사용자로부터 정보를 입력, 전달받는 요소로 데이터를 수집하고 서버로 전송하여 처리한다. 웹 폼은 태그를 사용하여 정의한다. 1. : 폼 요소의 컨테이너 역할을 한다. action 속성으로 데이터 전송 경로 설정, method로 전송 방식을 설정한다. 2. : 다양한 종류의 입력 필드, 사용자에게 입력을 받을 수 있다. type : text, password, checkbox, radio ... 3. : 여러 줄의 텍스트를 입력할 수 있는 영역 4. : Submit button 폼 데이터를 서버로 전송하는 버튼 5. : 입력 필드와 관련된 텍스트 설명 6. : 데이터 목록을 가진 텍스트 선택창, 드롭다운으로 리스트 출력 option 에 없는 값도, 사용자의 입력을 받을 수 있다. 사용자가 ..

· 시맨틱 태그 시맨틱 태그(sementic tag)를 사용을 해서 웹 문서의 구조와 의미를 전달한다. 시맨틱 태그는 콘텐츠의 의미와 역할을 설명하고, 검색 엔진 최적화(SEO)와 웹 접근성을 향상시킨다. 1. : HTML 문서의 최상위 요소다. 모든 HTML 요소는 태그 내에 포함되어야 한다. 2. : 문서의 메타데이터, 스타일 시트, 스크립트 등의 정보를 포함하는 부분 (브라우저 표시 X) 3. : 실제로 화면에 나타나는 요소들이 들어가는 부분 4. : 웹 페이지 상단에 나타나는 사이트 로고, 제목, 네비게이션 등과 같은 소개 또는 전역 콘텐츠를 담는다. 5. : 네비게이션 링크 그룹을 정의한다. 6. : 문서의 주요 콘텐츠 영역 7. : 독립적인 컨텐츠를 나타내며, 자체적으로 완전한 성격을 가지고 ..

video 동영상 재생 -- controls autoplay 반복재생 audio 오디오 재생

인라인 프레임(Inline Frame) iframe HTML 요소를 다른 웹페이지나 현재 웹페이지에 삽입하는 데 사용된다. 현재 페이지 일부 영역에서 다른 문서를 표시하고 상호작용을 하며, 독립적인 컨테이너 역할을 한다. src = 문서 url width, height : 사이즈를 조절, px 또는 % 단위로 지정 1. 문서 삽입 : src 속성을 활용하여 다른 웹페이지, 문서, 이미지, 동영상 등 외부 리소스를 삽입할 수 있다. 2. 독립성 : 독립적인 컨테이너를 가진다. iframe 내부에 로드된 문서는 외부 문서와 격리되어 있다. (충돌 방지) 3. 크기 조절 4. 상호작용 : iframe과 다른 문서들이 상호작용이 가능하다. 5. 충돌 및 성능 고려사항 : iframe 너무 많이 사용하게 되면, ..

태그의 src 속성에 이미지 파일의 주소 지정 src : 이미지 파일의 URL. 필수 속성. alt : 이미지가 없거나 손상되는 이미지를 출력 할 수 없는 경우 출력되는 문자열. 필수속성 width : 이미지 출력되는 너비로, 생략되면 원본 이미지의 폭 height : 이미지를 출력되는 높이로, 생략되면 원본 이미지의 너비

· a href(anchor hyper reference) 하이퍼링크를 생성하는데 사용된다. 다른 웹페이지, 동일 페이지의 다른 부분, 파일, 이메일 주소 등을 연결할 수 있다. href 속성은 링크 대상을 지정한다. 텍스트 네이버로 이동하기 링크 텍스트 처음 색 → 밑줄과 함께 blue 방문 후 링크 색 → purple 마우스로 링크를 누르고 있는 동안 → red ex) 페이지이동 돌아가기 페이지이동 돌아가기 우리가 다른 파일을 불러올 때, 같은 폴더 내에 있을 경우 파일 경로를 붙여주지 않았다. 프로젝트 내부에서 파일을 정리한다고 했을 경우, 가독성이 좋도록, 차이가 나는 경로정도만 적어줄 수 있다. main test image main.html test02.html test.html cat01.jp..