Posis

웹 요소를 제어 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음 웹 사이트 UI 부분에 많이 활용 ex) 마우스 포인터를 올렸을 때 펼쳐지는 메뉴, 한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠 다양한 라이브러리를 사용할 수 있음 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남 -> 라이브러리와 프레임워크가 계속 등장 ex) 시각화를 위한 d3.js, 머신러닝을 위한 tensorflow.js, DOM 조작을 위한 jQuery 등 ex) 웹 애플리케이션 개발을 위한 React, Vue, Angular 등 웹 애플리케이션을 만듬 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작 ex) 온라인 지도의 길찾기 서비스, 데이..

class 선택자 요소의 특정 부분에만 스타일 적용 마침표(.) 다음에 클래스 이름 지정 문서 안에서 여러 번 반복해서 사용할 수 있음, 중복 가능 id 선택자 요소의 특정 부분에만 스타일 적용 파운드(#) 다음에 id 이름 지정 문서 안에서 한번만 사용할 수 있음, 중복 불가 스타일 충동을 막는(Cascading)의 원칙 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용 스타일 상속: 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달 Style 우선순위(높은 순서부터 작성) !important: 어떤 스타일보다 우선 적용되는 스타일 인라인 스타일: 해당 태그에만 적용되는 스타일 id 스타일: 문서..

a 태그 하이퍼 링크를 걸어주는 태그입니다. href속성으로 걸어준 링크로 이동합니다. a 태그 속성 href: 클릭시 이동 할 링크 target: 링크를 여는 방법 _self: 현재 페이지 (기본값) _blank: 새 탭 _parent: 부모 페이지로, iframe 등이 사용된 환경에서 쓰입니다. _top: 최상위 페이지로, iframe 등이 사용된 환경에서 쓰입니다. 프레임이름: 직접 프레임이름을 명시해서 사용할 수도 있습니다. 네이버

img 태그 웹 문서에 이미지를 삽입할 때 사용합니다. img 속성 종류 src: 이미지 파일 경로 ./ 현재 폴더 ../ 상위 폴더 alt: 이미지를 설명하는 대체 텍스트, 시각장애인들이 사용하는 화면 낭독기에서 이미지 대신 대체 텍스트를 읽어 줌(웹 접근성) 레드향 이미지 크기 지정하기 이미지 크기는 보통 CSS에서 설정하지만 HTML에서도 가능합니다. 원래 크기의 이미지 width="50%", height="50%"로 지정한 이미지 width="150"으로 지정한 이미지

표를 만들기 위한 태그 caption: 표 제목 table: 표 전체 tr: 행 td: 셀 th: 제목 셀 선물용과 가정용 상품 구성 용도 중량 갯수 가격 선물용 3kg 11 ~ 16과 35,000원 선물용 5kg 18 ~ 26과 52,000원 가정용 3kg 11 ~ 16과 30,000원 가정용 5kg 18 ~ 16과 47,000원 CSS를 추가하지 않으면 표의 선이 없음 표 구조 정의하기 표의 구조를 '제목'과 '본문', '요약' 부분으로 나눈다. , , 태그 사용 웹 브라우저 화면에서 보이지 않지만, 화면 낭독기나 자바스크립트 등에서 읽을 수 있다. -> 시각 장애인도 표의 구조를 쉽게 이해할 수 있다. 표의 본문이 길 경우 자바스크립트를 이용해 제목과 바닥 부분을 고정하고 본문만 스크롤되도록 할 수..

ol, li 순서가 존재하는 목록을 만들 때 사용합니다. 항목1 항목2 항목3 ul, li 순서가 없는 목록을 만들 때 사용합니다. 항목1 항목2 항목3 dl, dt, dd '이름(제목)'과 '값(설명)' 형태로 된 목록 태그: 이름(제목) 지정 태그: 값(설명) 지정 하나의 에 여러 개의 값을 가질 수 있다. 상품 구성 선물용 3kg 소과 13 ~ 16과 중과 10 ~ 12과 선물용 5kg 중과 15 ~ 19과