한결 코딩 블로그

CSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용한다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰인다. CSS 표준은 미리 정의된 효과를 내는 몇 가지 함수를 포함하고 있습니다. SVG 필터 요소 (en-US)를 가리키는 URL 참조를 사용하여 SVG 필터를 적용할 수도 있다. 그외 참고 : https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_filter 구문: /* SVG 필터를 가리키는 URL */ filter: url("filters.svg#filter-id"); /* 값 */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200..

#1 outline & outline 간략형 CSS outline 단축 속성은 모든 외곽선 속성을 한꺼번에 지정한다. 다음은 독자적으로 outline 요소를 설정할 수 있는 속성값. outline-width outline-style (요구필요) outline-color inherit : 부모 요소로부터 값을 상속 받는다.** 예시: 구문 [참고]: /* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* 전역 값 */ outline: inherit; outline..

CSS user-select 속성은 사용자가 텍스트를 선택할 수 있는지 지정한다. /* 키워드 값 */ user-select: none; user-select: auto; user-select: text; user-select: contain; user-select: all; /* 전역 값 */ user-select: inherit; user-select: initial; user-select: unset; 구문 none 이 요소와 아래 요소의 텍스트를 선택하지 못하도록 막는다. 단 Selection 객체는 none인 요소(와 그 아래)를 포함할 수 있다. auto auto의 사용값은 아래와 같이 결정된다. ::before와 ::after 의사 요소의 사용값은 none입니다. 편집 가능한 요소의 사용값은..

#1 태그 HTML 태그(tag)는 HTML 요소(element)라고도 부르며, HTML 문서를 구성하는 기본 단위이다. ** HTML5에서 새롭게 추가된 태그 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. 다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의함. 축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의함. 머리글자로만 된 단어(acronym)를 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 요소를 사용함. 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시함. 문서에 포함되는 애플릿(웹 페이지에 포함되어 작은 기능을 수행하는 프로그램)을 정의함. HTML5에서는 더 이상 지원하지 않으며, 대신 요..

#1 HTML 데이터 속성 HTML5부터는 데이터 속성이라는 개념이 추가되었는데, HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다. 데이터 속성은 'data-'시작해야 하며, 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. data-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성할 수 있다. 속성명은 data-value이지만 HTMl 표준 속성인 value 속성과는 상관이 없다. 임의로 만들어진 속성인 사용자 지정 데이터이기 때문이다. #2 데이터 속성의 장점과 특..

# 1 태그는 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의할 때 사용한다. 요소는 사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 요소 내부에서 사용된다. 이러한 입력 필드는 요소의 type 속성값을 달리함으로써 여러 가지 모양으로 나타낼 수 있다. 요소는 빈 태그(empty tag)이며, 속성만을 포함하고 있다. 요소를 사용하면 요소의 라벨(label)을 정의할 수도 있다. 예제: 이름 : 학번 : 학과 : # 2 HTML5에서 변경된 사항 : HTML5에서는 태그의 align 속성을 더 이상 지원하지 않는다. 또한, 일부 새로운 속성이 추가되었으며, type 속성에도 일부 새로운 속성값이 추가되었습다. # 3 사용할 수 있는 속성 속성명 속성값 설명 acce..

태그는 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의할 때 사용한다. 요소 내부의 요소는 드롭다운 리스트(drop-down list)에서 사용되는 각각의 옵션을 정의한다. 이러한 요소는 사용자로부터 입력을 받기 위한 폼(form)에 사용될 수 있다. 예제: 아메리카노 카페라테 카페오레 에스프레소 구현결과: HTML5에서 변경된 사항 -> HTML5에서는 태그에 autofocus 속성과 form 속성, required 속성이 새롭게 추가되었습니다.. 사용할 수 있는 속성: 속성명 속성값 설명 autofocus autofocus 페이지가 로드될 때 자동으로 포커스(focus)가 드롭다운 리스트로 이동됨을 명시함. disabled disabled 해당 드롭다운 리스트가 비활성화됨을 ..

#1 HTML 태그는 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰인다. 태그와의 차이점은 display속성이 block이 아닌, inline이라는 점이다. 이 둘의 차이를 쉽게 설명하자면, 는 줄 바꿈이 되지만, 은 줄 바꿈이 되지 않다는 점이다. 사용법: 내용 예제: span1 span2 span3 출력결과: span1 span2 span3 #2 CSS - inline span 태그, b 태그, i 태그, a 태그 등이 이에 해당된다. block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오..

#1 태그의 disabled 속성은 해당 옵션이 비활성화됨을 명시한다. disabled 속성이 명시된 옵션은 사용할 수 없으며, 사용자가 클릭할 수도 없다. 따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 해당 옵션을 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 해당 옵션을 다시 사용할 수 있도록 조절할 수 있다. disabled 속성은 불리언(boolean) 속성이다. 불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다. 문법: 예제: 아메리카노 카페라테 카페오레 에스프레소 HTML과 XHTML에서의 차이점: #2 태그의 label 속성은..

#1 npm i -D (- 1.) webpack (- 2.) webpack-cli (- 3.) webpack-dev-server -D = dev dependancy pakage를 설치 한다는 뜻 여기서 -D를 빼게 되면 그냥 depandancy 만 설치하게 된다. depandancy 란 프로덕션 환경에서 필요한 패키지 를 뜻한다. -- 패키지들 연구?! (위에 1-3번 포함) ( 4.) npm i -D terser-webpack-plugin *대괄호(어레이 라고 부름) 와 중괄호의 차이 (그냥 안에 속해 있는 차인가?? 소괄호도 포함 (- 5.) npm i -D html-webpack-plugin (- 6.) npm i - D (1) mini-css-extract-plugin (2) css-loader ..