320x100
반응형
320x100
반응형
해당 서비스는 프로토타입으로, 언제든 기능과 화면 구성이 추가되거나 변경될 수 있습니다. 개요 개발 배경 회사 내에서는 '네이트온'이라는 메신저를 사용하여 업무 내용 및 일정을 공유하고 있습니다. 그리고 휴식 시간에도 메신저를 이용하여 직장 동료들과 서로 이런 저런 잡담을 나누는 경우도 많습니다. 어느날, 친한 동료들과 점심 식사 중에 '업무용 메신저'라는 주제로 이야기를 나누다 보니, 우리 사이에는 휴식 시간에도 업무용 메신저를 통해 대화를 하면 어쩌면 조금은 업무적인 대화라는 느낌을 지울 수가 없다는 공감대가 형성되었습니다. 실제로 대화를 하다보면 자연스럽게 업무와 관련된 이야기로 넘어가기 쉽고, 이로 인해 휴식 시간에도 마음이 조금 긴장되고 있지 않나 생각해봤습니다. 그러다 문득 이런 생각이 들었습..
text-indent 블록에서 텍스트 줄 앞에 놓이는 빈 공간(들여쓰기)의 길이를 설정하는 속성 속성 값이 양수일 경우, 들여쓰기 들여쓰기 : 문장을 쓸 때 문자열을 오른쪽으로 당겨 주변의 문장과 구분하는 것 속성 값이 음수일 경우, 내어쓰기처럼 보이지만 화면을 벗어날 수 있으므로 주의해서 사용하여야 함 내어쓰기 : 들여쓰기의 반대 용어로 같은 문단에 있는 다른줄보다 왼쪽으로 더 내어 작성하는 것 구문 text-indent: 속성값 사용 예시 CSS에서 text-indent를 이용하여 들여쓰기를 적용한 문장입니다. 이 문장은 첫번째 줄이 들여쓰기가 되고 들여쓰기의 값은 30px의 여백을 가집니다. CSS에서 text-indent를 이용하여 내어쓰기를 적용한 문장입니다. 이 문장은 첫번째 줄을 제외한 나머..
HTML 기본 양식 자동 세팅하기 HTML 파일 만들기 EXPLORER에서 마우스 우클릭 - New File html 파일 생성 기본 양식 자동 세팅하기 생성한 html 파일 열기 느낌표 + 탭(Tab) 키 입력 자동으로 양식이 세팅된 화면 HTML 설정 언어를 한국어로 변경하기 html lang="en" 기본 세팅된 HTML은 언어가 영어로 되어 있으며 매번 "ko"로 변경해주기 번거로움 Visual Studio Code 설정 변경하기 메뉴의 File - Preferences - Settings 필터에 'emmet: variables' 입력 - Add Item Value의 값을 'ko'로 변경 - OK lang ko 설정 확인 html 파일의 내용을 지우고 느낌표(!) + 탭(Tab) 키 입력 정상적으..
주석 태그 설명 : 부가 설명 HTML 구조 태그 표시 형태 : block 설명 : 문서 형태 표시 형태 : none 설명 : 문서 자체 표시 형태 : none 설명 : 문서 머리 표시 형태 : none 설명 : 문서 제목 표시 형태 : none 설명 : 문서 추가 정보 표시 형태 : block 설명 : 문서 본문 파일 태그 표시 형태 : none 설명 : 외부 파일 추가 표시 형태 : none 설명 : 스타일시트 표시 형태 : none 설명 : 스크립트 공간 태그 표시 형태 : block 설명 : block 형식의 공간 표시 형태 : inline 설명 : inline 형식의 공간 시멘틱 구조 태그 표시 형태 : block 설명 : 본문 표시 형태 : block 설명 : 수직 목록 표시 형태 : bloc..
DOM 이란? 문서 객체 모델(Document Object Model)의 약자 HTML, XML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제하도록 돕는 인터페이스 문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법 제공 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단 브라우저 사이에 DOM 구현 호환성을 위해 W3C에서 DOM 표준 규격 작성 즉, W3C의 표준화한 API들의 기반 표준 규약 외 기능들은 각기 다른 DOM이 적용된 브라우저에서 호환 여부가 다를 수 있음을 인지 W3C 이란? World Wide Web Consortium의 약자 월드 와이드 웹을 위한 표준을 개발하고 장려하는 중립적인 국제 조직 전 세계 곳곳에 위치한 다양한 분야의 기관들이 웹 표준화를 위해..
드래그를 방지하는 방법은 크게 두가지로 분류할 수 있습니다. 첫 째, HTML의 태그에 속성을 추가하여 드래그를 방지하는 방법(Draggable) 둘 째, CSS의 요소에 속성을 추가하여 드래그를 방지하는 방법(user-drag) HTML 태그의 속성을 추가하여 드래그 방지하기 Draggable 요소의 드래그 가능 여부를 나타내는 열거형 특성 열거형 특성 : 텍스트 값의 제한된 사전 정의된 집합을 가진 속성 예시) true, false, inherit 등.. 네이티브 브라우저 동작 방식과 HTML 드래그 앤 드롭 API 모두 통제 값 설정 true : 요소 드래그 기능 활성화 false : 요소 드래그 기능 비활성화 주의 : true/false의 값을 가지나 Boolean이 아닌 Enumerated 특성..