Front66 [CSS3] CSS cursor 속성의 종류 살펴보기 [CSS3] CSS cursor 속성의 종류 살펴보기 cursor 속성은 지정한 요소 위에 마우스 커서가 올라갔을 때 표출할 모양을 지정한다. 속성 값에 마우스 커서를 올리면 각 값에 따라 커서 모양이 표출될 것이다. 구분 속성 값 설명 기본 cursor: auto 요소 타입에 맞게 표시할 커서를 자동으로 결정 cursor: default 기본 커서 값 cursor: none 커서 숨김 링크/상태 cursor: help 도움말 사용 가능 cursor: pointer 링크를 나타내는 포인터 cursor: progress 프로그램이 백그라운드에서 작업 중이며, 사용자가 인터페이스와 상호작용 가능(wait과 반대) cursor: wait 프로그램이 작업 중이며, 사용자가 인터페이스와 상호작용 불가능(progr.. Front/CSS 2020. 8. 31. [CSS] 형제 선택자, 속성 선택자, 가상클래스와 가상요소 알아보기 [CSS] 형제 선택자, 속성 선택자, 가상클래스와 가상요소 알아보기 1. 형제 선택자 태그의 형제 레벨에 해당하는 요소를 선택한다. 자주 쓰이는 속성 선택자의 종류 label + input - label 태그 바로 뒤에오는 input 선택자 label ~ input - label 태그 뒤에 오는 모든 input 선택자 예제 - HTML 라벨 - CSS .control-form .control-label { color: red; } /* control-label 클래스 바로 뒤에 있는 control-input 클래스에만 스타일 적용 */ .control-form .control-label + .control-input { border: 1px solid red; } /* control-label 클래스 .. Front/CSS 2020. 8. 29. [CSS3] Block Level 과 Inline Level, Inline-block Level 차이 및 요소 살펴보기 [CSS3] Block Level 과 Inline Level, Inline-block Level 차이 및 요소 살펴보기 요소가 차지하는 영역의 크기에 대해 살펴보자. block-level 과 inline-level을 쉽게 구분할 수 있는 방법은 컨텐츠가 한 라인에 복수로 올 수 있는지의 여부이다. block-level 요소는 한 라인에 하나만 위치할 수 있다. 즉, 영역의 width 값이 무조건 100%를 차지한다. 반면, inline-level 요소는 한 라인에 2개 이상이 올 수 있다. 이는 컨텐츠의 영역만큼 width 사이즈를 차지한다. 대표적으로 block-level 요소의 태그와 inline-level 요소인 태그를 통해 예제를 살펴보자. 예제 살펴보기 요소의 영역을 눈으로 확인하기 위해 다음과.. Front/CSS 2020. 8. 22. [CSS3] CSS 정의와 선택자 및 스타일 적용방법 [CSS3] CSS 정의와 선택자 및 스타일 적용방법 CSS 란? 종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 마크업 언어(ex. HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다. - 출처[위키백과] CSS 선택자 (Selector) 다음 예제를 바탕으로 자주쓰이는 CSS 선택자를 살펴보자. 1.전체 선택자 *.. Front/CSS 2020. 8. 22. [HTML5] input 요소의 타입 완전 정복 [HTML5] input 요소의 타입 완전 정복 HTML에서 자주 사용되는 input 요소의 대표적인 타입 목록 text password checkbox radio button submit HTML5에서 추가된 input 요소의 타입 목록 number (숫자입력) range (입력 범위 지정) email (이메일 입력) tel (전화번호 입력) url (URL 주소 입력) search (검색어 입력) color (색상 입력) date (날짜 입력) month (연도와 월 입력) week (연도와 주 입력) time (시간 입력) datetime (날짜와 시간 입력) datetime-local (날짜와 시간 입력) 예제를 볼 때는 Chrome 브라우저로 보는 것을 권장합니다. 텍스트 입력(text inpu.. Front/HTML 2020. 8. 19. [HTML5] 글자태그 2 : <strong>, <b>, <i>, <small>, <sub>, <sup>, <ins>, <del> [HTML5] 글자태그 2 : , , , , , , , - strong Tag 글자 강조 strong 태그 사용 - b Tag 굵은글씨 체 b 태그 사용 - i Tag 기울어진 글씨 체 i 태그 사용 - small Tag 글씨를 작게 small 태그 사용 - sub Tag 아래창자처럼 입력 (진수표기법) 글자 입력 sub 태그 사용 - sup Tag 윗창자처럼 입력 (제곱표기법) 글자 입력 sup 태그 사용 - ins Tag 밑줄을 넣어줌 ins 태그 사용 - del Tag 글씨 가운데 줄을 넣어줌 del 태그 사용 ▶ 다른 글자 태그 알아보기 Front/HTML 2020. 8. 18. [HTML5] 목록을 정의하는 태그 : <ul>, <ol>, <dl> [HTML5] 목록을 정의하는 태그 : , , 태그는 list의 약자로, 목록을 만드는 태그이다. 이 태그는 단독으로 쓰이지 않으며 혹은 태그 내부에 들어간다. - ol Tag ordered list, 순서가 정의되어있는 리스트 나혼자산다 놀면뭐하니? 런닝맨 - ul Tag unordered list, 순서가 정의되어있지 않는 리스트 나혼자산다 놀면뭐하니? 런닝맨 - dl Tag definition list, 단순히 어떤 내용 혹은 용어를 설명하기 위한 리스트 는 difinition term (정의 용어)의 약자로, 정의되는 용어의 제목을 넣을 때 사용한다. 은 definition description (정의 설명)의 약자로, 용어롤 설명하는 데 사용한다. 영화 범죄도시 드라마 스카이캐슬 Front/HTML 2020. 8. 18. [HTML5] <head> 태그 : <title>, <meta>, <link>, <style> [HTML5] ... 태그는 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그로 닫는 태그가 없는 태그이다. 페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 제공할 수 있다. ... 문자 인코딩에 관련된 내용이다. Internet Explorer(IE) 10 이하 버전은 문서를 읽을 때 IE7 모드를 사용해서 웹페이지를 표시한다. 태그를 이용하여 최신 엔진으로 페이지를 렌더링하도록 설정할 수 있다. width 속성은 뷰포트의 크기를 조정하며 CSS 픽셀들로 계산된 화면의 폭을 의미한다. initial-scale 속성은 페이지가 처음 로드될 때 줌 레벨을 조정한다. meta 태그에 대해서는 다음 링크에서 자세히 설명해주고 있다. 메타(meta)태그 정리 meta 태그 메타태.. Front/HTML 2020. 8. 18. [HTML5] HTML 기초 [HTML5] HTML 기초 간단한 HTML 기초 내용을 파악해보자. 개요 HTML 이란? 웹 사이트에서 화면에 표시되는 정보를 약속 한 것으로 HyperText Markup Language의 약자이다. HyperText 는 단순 텍스트 이상의, 링크 개념이 포함 된 텍스트 Markup 은 꺽쇠()로 이루어진 태그를 사용하는 규격 으로 태그들을 이용하여 텍스트 요소를 정의하는 언어라고 할 수 있다. HTML 예시 Hello, World! HTML에서 각 태그에 따라 각자의 역할을 갖고 있다. 예를 들어 태그는 웹 브라우저의 추가정보를 입력할 때, 태그는 문서의 본문 내용이 들어간다. 일반적인 마크업 언어와의 차이점은 일반 마크업 언어에서는 태그 이름을 사용자가 지정하지만, HTML은 태그의 이름이 정해져.. Front/HTML 2020. 8. 18. [HTML5] 글자 태그 1 : <h#>, <p>, <br/>, <a> [HTML5] 글자 태그 1 : , , , - Heading Tag 제목, 주제를 표현할 때 쓰는 태그로 - 요소는 6단계의 구획 제목을 나타낸다. 티스토리 부제목 h3태그 h4태그 h5태그 h6태그 는 회사의 로고 혹은 가장 중요도가 높은 제목에 사용하며 보통 문서에서 딱 한번 사용한다. 는 영역마다의 이름을 넣어주는 역할로도 사용한다. 특별히 글자의 크기나 굵기에 대한 스타일을 주지 않았지만 다음과 같이 각 태그의 표출되는 스타일이 다른 것을 볼 수 있다. 단순히 글자 크기만 크게 보일 뿐 아니라, 검색엔진이 문서를 파악하기 위해 쓰이므로 상황에 맞게 를 잘 써주는 것이 중요하다. - Paragraph Tag 문서의 단락이나 본문내용을 표기할 때 혹은 본문 안의 단락을 여러 개 나눌 때도 사용된다. .. Front/HTML 2020. 8. 18. [JavaScript] 자바스크립트 변수(var/let/const) 선언 방식의 차이 [JavaScript] 자바스크립트 변수(var/let/const) 선언 방식의 차이 구분 var let const 공통점 변수를 선언하는 방식, 어떤 변수타입이든 선언 가능 차이점 재할당 가능 재할당 가능 재할당 불가능 재선언 가능 재선언 불가능 재선언 불가능 function-level-scoped block-level-scoped block-level-scoped 이들의 차이점을 이해하기 위해 예제로 살펴보자. 1. 선언과 할당 ▶ var - 자바스크립트 가장 많이 사용하는 변수 선언 방식 중 하나인 var는 변수 선언 시 할당되는 값이 유동적으로 변경될 수 있다. var color = "RED"; console.log(color);// output : RED var color = "BLUE"; co.. Front/JavaScript 2020. 8. 12. [JavaScript] 자바스크립트 빈 객체 확인하는 방법 [JavaScript] 자바스크립트 빈 객체 확인하는 방법 자바스크립트에서 빈 객체를 확인할 때, 다음과 같은 조건문을 사용해왔다면 이 글을 꼭 참고하라구요! // typeof obj === 'Object' if(obj == null){ console.log('빈 객체!') } if(obj == {}){ console.log('빈 객체!') } if(obj == ''){ console.log('빈 객체!') } 이렇게하면 빈 객체라 하더라도 절대 원하는 조건문의 코드를 완성할 수 없다. Array(배열) 같은 경우는 length라는 속성이 있기 때문에 length 값으로 확인할 수 있지만, Object(객체)는 어떻게 확인할까? 바로 Object.keys 속성을 활용하면 된다. var obj = { 'a.. Front/JavaScript 2020. 6. 20. 이전 1 2 3 4 5 6 다음 추천 글 728x90 반응형