quantumcode

html 특수문자표 출력 html 문서에 마크업 작업 시 띄어쓰기를 사용할 때 스페이스바를 사용하는 경우가 있는데 아래 와 같이 한번 띄어쓰기의 경우 정상 작동하지만 두번 이상 띄어쓰기를 할 경우 나머지 공백은 삭제 됩니다. html 띄어쓰기 확인하기 출력 : html 띄어쓰기 확인하기 html 띄어쓰기 확인하기 출력 : html 띄어쓰기 확인하기 두번 이상 띄어쓰기를 할 경우 html 특수문자 사용해야합니다. html 띄어쓰기 확인하기 출력 : html 띄어쓰기 확인하기 이 외에 다양한 html 특수문자에 대하여 알아 봅시다. &(ampersand) & !(exclamation) ! #(number sign) # ⓒ(copyright sign) © 아래 주소에서 특수 문자 테스트를 테스..

브라우저 공급업체는 실험적이거나 비표준적인 CSS 속성 및 JavaScript API에 접두사를 추가하여 사용할 수 있습니다. 이를 벤더프리픽스( 접두어 )라고 하며 브라우저 공급업체에서 접두어가 필요없는 속성을 제공하기전까지는 접두어를 사용하여 속성을 정의할 수 있습니다. 최근에는 대부분의 브라우저 공급업체가 많이 향상되어서 기존에 접두어로 사용하였다 속성을 접두어 없이 사용할 수 있도록 제공하고 있기때문에 벤더 프리픽스는 기존 노후된 브라우저에 대응하기 위해 사용하는 경우가 많습니다. 아래 브라우저 별 제공하는 접두어 입니다. ● IE ○ Engine: ​Trident ○ CSS- prefix: ​-ms ● edge ○ Engine: ​EdgeHTML​ → ​Blink ​3 ○ CSS- prefix:..

다중 class 사용 사용 방법 : 태그의 class attribute에 다중 클래스 입력 시 공백으로 표기하여 입력 표기 )​ box 다중클래스 선택방법​ ​: css에서 다중클래스 사용 시 “ . “으로 연결하여 사용한다. 표기 )​ box ​주의 : ​#boxgroup .box{} 자식요선택 요소(element)선택 방법: 1. tag ​: 태그명을 사용하여 선택할 수 있다. 표기 ) css div{ /*속성기재*/ } ​html test 2. ID ​: id명을 사용하여 선택할 수 있다.​( “#“으로 표기 ) 표기 )​ css #box{ /*속성기재*/ } html test 3. class ​: class명을 사용하여 선택할 수 있다.​(“ .” 으로 표기 ) 표기 )​ css .box{ /*속..

javascript? 자바스크립트​(​영어​: ​JavaScript)는 ​객체 기반​의 ​스크립트 프로그래밍 언어​이다. 이 언어는 ​웹 브라우저​ 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 프로토타입 기반 프로그래밍​은 ​객체지향 프로그래밍​의 한 형태의 갈래로 클래스​가 없고, ​클래스 기반​ 언어에서 ​상속​을 사용하는 것과는 다르게, ​객체​를 원형(​프로토타입​)으로 하여 ​복제​의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있다. 프로토타입기반 프로그래밍은 ​클래스리스​(​class-less​), 프로토타입 지향​(prototype-oriented) 혹은 ​인스턴스 기반​(instance-based) 프로그래밍이라고도 한다. ECMA..

@media 규칙 @media 규칙은 다양한 장치에서 html 문서가 적절한 형태를 갖추게 만들어 주는 규칙입니다. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp all print screen speech 등과 같은 출력장치에 대응할 수 있습니다. 화면 가로형 @media screen and (orientation: landscape ) { /*source code*/ } 화면 세로형 @media screen and (orientation: portrait ) { /*source code*/ } html 문서에 적용 방식 link 방식 - ex) @import- ex) @import url(“print.css”) print; ex)

시멘틱 태그 ( samactic tag )는 태그 자체의 이름으로도 특정기능을 설명할 수 있는 태그로 코드를 입려하는 작성자가 직관적으로 태그의 기능을 알 수 있는 장점도 있지만 브라우저 엔진 및 검색엔진이 해당 태그를 인지하여 브라우저의 기능을 향상 시키는 역할도 한다. 대표적인 시멘틱 태그 종류 header - ​헤더를 의미 nav - ​내비게이션을 의미 aside - ​사이드에 위치하는 공간을 의미 section - ​여러 중심 내용을 감싸는 공간을 의미 article - ​글자가 많이 들어가는 부분을 의미 footer - ​푸터를 의미 아래 링크에서 더 많은 시멘틱 태그를 확인 하실 수 있습니다. https://www.w3schools.com/tags/default.asp HTML Referenc..

select box를 사용하다 보면 아래 와 같이 해당 설렉터의 카테고리를 지정하고 해당옵션을 선택할때는 카테고리 명을 사라지게 하는 기능을 사용해야하는 경우가 있습니다. 즉, input 의 text type에서 placeholder 처럼 입력 전 표시하고 포커스가 되면 해당 입력값은 사라지는 것 처럼 말이죠. tag에 직접 아래와 같이 작성 할 수 있습니다. selected : 초기 선택 hidden : 안보이게 disabled : 비활성화 family naver daum kakao

css 파일 구성방식은 아래와 같이 한줄형 또는 들여쓰기를 사용하여 속성마다 한줄씩 표기하는 방식등이 있습니다. 한줄형 : 공백이 적기 때문에 파일 용량이 들여쓰기 보다 비교적 작지만 가독성이 떨어진다. div { background: red; color: white; font-size: 16px; } 들여쓰기 속성 마다 명확한 값을 확인 할 수 있기때문에 가독성은 좋지만 빈공백이 많아서 파일 용량이 한줄형 보다 크다. div { background: red; color: white; font-size: 16px; } 작업 파일로 사용할 경우 들여쓰기를 추천하며, 일반적으로 프로젝트를 진행할 경우 공동 작업으로 파일을 공유하여 사용하기 때문에 코드를 명확히 알 수 있는 들여쓰기가 작업이 용이해 보입니다...

웹브라우저에서 user agent style 과 같은 기본 스타일이 적용되어 있습니다. 해당 스타일은 웹 제작 시 도움이 되는 경우도 있지만 잘 사용하지 않는 스타일도 있기 때문에 초기화가 필요한 경우가 있습니다. 직접 초기화 코드를 만들어서 사용하는 경우도 있지만 이미 만들어진 초기화 코드를 사용하는 경우도 있습니다. 오늘은 후자의 경우에 대해서 알아보겠습니다. normalize.css 1. 직접 다운로드 방식 적용 : https://necolas.github.io/normalize.css 해당 링크에 접속해서 파일 다운로드 css3 css 초기화 CDN 방식으로 적용 Google normalize 1. 직접 다운로드 방식 적용 : https://github.com/jonathantneal/normal..

border border-width​ : border의 width 값을 지정 border-style​ : border의 style 값을 지정 border-color​ : border의 color 값을 지정 inherit​ : 부모 요소로부터 값을 상속 받는다. border-top, border-right, border-bottom, border-left border-width​ : border의 width 값을 지정 border-style​ : border의 style 값을 지정 border-color​ : border의 color 값을 지정 inherit​ : 부모 요소로부터 값을 상속 받는다. border-top, border-right, border-bottom, border-left css 컬러 ..