Chillax in dev

[JavaScript] 자바스크립트 데이터 타입 - 자바스크립트 데이터 타입에 대해 정리해 봅니다. 변수의 타입과 타입의 확인, 자료구조, 변수의 스코프(유효 범위), 라이프타임(메모리에 남아있는지) 등 기초적인 내용을 예시를 통해 복습합니다. - 무의식적으로 자바스크립트에서 무조건 변수 선언시 var을 활용하는 당신이라면 이 글을 통해 let, const를 통해 변수를 설정하는 습관을 만들길 바랍니다. 자바스크립트는 기본적으로 자동으로타입을 결정해 주는 방식은 느슨한 타입(loosely typed)의 동적(dynamic)할당 언어입니다. 느슨한 타입(loosely typed) : 타입없이 변수를 선언하는 것입니다. 동적(dynamic) : 할당자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정됩..

[css3] reset.css 이해하기 안녕하세요 웹 프로그래밍을 공부할 때 다른 프로젝트를 다운받아 공부하다보면 reset.css 라는 파일을 많이 보실겁니다. 뭘 reset한다는것이며 어떤 역할을 하는 css 파일인지 궁금하셨다면 이글을 참고해 주세요 먼저 간단한 html 코드를 확인해 볼까요? 일반적인 html 예시 1 2 3 - 위 코드는 일반적인 html 문서를 작성하여 리스트 를하나주고 li 마다 다른 배경색으로 구분한 형태로 태그의 특성상 점도 있고 자세히 보면 문서 전체에 마진도 있는 것을 볼 수있는데요 이는 개발자가 원하는 형태가 아닌 html코드 작성시 자동으로 설정되어 브라우저에 나타나는 모습입니다. 이런 점이 불편해서 css 단계에 앞서 먼저 reset.css 를 이용하여 우리가 지..

[WEB]CSS : 페이지 꾸미는 팁 shadow - 음영 효과 주는 방법 - 특정 요소에 대하여 그림자를 통해 입체적인 느낌을 주고 싶면 css의 shadow 기능을 이용합니다. - 구현 화면 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 27_Shadow.html div {width: 600px;margin-bottom: 20px;padding: 10px 30px; background-color: yellow;} .a { box-shadow: 5px 5px; } .b { box-shadow: 5px 5px 5px; } .c { box-shadow: 5px 5px 5px 5px;} .d { box-shadow: 5px 5px 5px..

[WEB] CSS : 웹 페이지 꾸미기 gradient(그라데이션) 사용법 - CSS의 기능 중 그라데이션으로 이쁘게 색을 적용할 수 있는 기능이 있어 정리해 봅니다.. 그런데 왜 Gradient(그레디언트) 기능을 그러데이션이라 하며 사용하는지 잘 모으겠으나.. 이쁘게 잘 가져다 사용만 하면 장땡이니, 사용법을 살펴봅니다. - 그레디언트 1. 2가지 이상의 색상을 혼합한 색을 만들어 채색하는 기능. 2. 아래 url을 활용해서 간단하게 만들 수 있다. www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator from ColorZilla A powerful Photoshop-like CSS gradient editor www.colorzil..

[WEB] CSS *퍼센트 단위: % ->기본 설정된 크기에서 상대적으로 크기를 지정 ->참고로 100% 가 초기에 설정된 크기 ->반응형으로 모양 달라진다. *배수 단위:em -1배 =1em =100%, 1.5배 =1.5em= 150%, 2배= 2em=200% -상대적으로 크기를 지정 *픽셀 단위:px -절대적으로 크기를 지정. -p태그의 기본 font-size 속성:16px. -padding : 박스 내부의 구성 내용(이미지, 텍스트 등)과 border사이의 공간 -border: 외곽선 자체 -margin: 외곽선과 다른 개체 사이의 공간 - 특정 태그의 배경 이미지 또는 색상을 지정하는 스타일 속성. - 종류 1) background-image 속성 - 배경에 넣을 그림을 지정하는 스타일 속성. -..

[CSS] Hover 반응 선택자 사용방법 - 자바스크립트 말고 CSS로 Hover 를 적용할 수 있습니다. 흔히들 호버라고 많이 사용하지만 정확한 명칭은 에이치 오버가 맞습니다. - 마우스가 해당 태그위에 있을 때와 벗어났을 때의 변화를 css로 줄 수 있습니다. - 반응 선택자 : 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자. - 종류 1. : hover -> 특정 태그에 마우스를 올릴 경우에 반응. 2. : active -> 특정 태그에 마우스를 클릭할 경우에 반응. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 4..

[WEB] CSS3으로 웹 꾸미기: 선택자(Selector) 활용 하기 - HTML이 웹의 내용을 표연하는 마크업 언어라면 CSS(cascading style sheets)는 웹의 디자인을 담당합니다. - CSS 태그는 - 속성 선택자 : 이런 식도 가능하구나 정도로 넘어가자. css 속성을 선택해 css를 적용한다. type이 지정되지 않은 input 태그는 기본값으로 적용된 "text"로 적용이 되지만 스타일 시트 적용 및 선택자 적용은 되지 않습니다. - 후손 선택자 : 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자. 아래 예시들을 보며 확인합니다. 이름 주소 권성민 서울시 이순신 강원도 - 인접 선택자(+), 형제 선택자(~) Header - 1 Header - 2 Header - 2..

html- HTML 5 수업 내용 정리 - HTML5 수업 내용을 정리합니다. HTML(Hyper Text Markup Language)입니다. 여기서 주목할 점은 Hyper Text (웹 페이지에서 다른 페이지로 이동 가능) + Markup Language(마크업 언어로 프로그래밍 언어가 아니라는점)입니다. 따라서 웹 페이지에 내용(content)을 담기 위한 용도로 사용하는 언어입니다. 즉 적절한 태그(Tag)들의 사용법을 알고 원하는 내용을 담기 위해 구조적으로 이용하기 위해 사용합니다. h1태그 p태그 hr태그 a태그 CharFormTag Marquee 흐르는 문자열 image태그 li태그 article태그 table태그 input type="?" name="", value=""태그 lable 태..