CSS - z-index의 이해, 사용 방법

z-index란? 자식 또는 하위의 아이템의 Z축 순서를 지정하는 것 값을 가진 요소가 클수록 작은 요소를 덮음 즉, 겹쳐진 여러개의 요소들의 보여질 순서를 정함 구문 z-index 설정 값 설명 auto : 부모의 요소와 같은 값 숫자 : 숫자가 높을수록 우선 순위 높음 숫자와 auto 모두 같은 값일 경우, 더 마지막에 정의한 요소가 우선순위가 높음 (가장 위에 보인다는 뜻) inherit : 상위 요소의 값 상속 initial : 기본 값 사용 unset : 상속 값이 있으면 상속 값 적용, 아니면 기본 값 사용 (inherit or initial) /* 키워드 값 */ z-index: auto; /* 값 */ z-index: 0; z-index: 3; z-index: 289; z-index: -1..

• format_list_bulleted Web/html & css & xml
• · 2022. 12. 23.
• textsms

HTML - div / span 개념과 사용 방법, 차이점

div 플로우 컨텐츠를 위한 순수 컨테이너, CSS로 설정을 해주기 전까지는 어떠한 영향을 주지 않음 다른 요소를 여럿 묶어 속성을 꾸미기 쉽도록 도움 단락과 강조와 같은, 콘텐츠의 의미를 정확하게 나타내는 경우 유용 고유한 분류가 필요 할 때 식별 할 수 있도록 문서의 일부를 정의하는데 사용되는 요소 태그를 추가로 사용하여 접근성이 향상되고 유지관리 용이 div 사용 방법 로 선언하여 로 종료 ... 는 한 블록으로 선언을 종료하기 전까지 설정한 속성이 적용 css에서 설정한 속성을 div와 묶어서 사용 사용 예시 css style 설정 css의 설정 없이는 아무런 영향을 주지 않음 div 자체만으로는 아무 영향을 끼치지 않는다. class 요소와 함께 사용하여 클래스에서 지정한 속성 적용 class ..

• format_list_bulleted Web/html & css & xml
• · 2022. 12. 23.
• textsms

CSS - !important 속성 값 고정하기, 속성 변경 못하게 하기

!important란? 적용한 속성을 추후에 다른 속성으로 변경하지 못하게 하는 것 !important 사용 방법 설정한 속성 뒤에 !important 명시 예시 Hello! 사용 예시 CSS style p 색상 적용 글자색에 분홍색 적용 /* hello.html */ Hello! CSS style p 색상 중복 적용 글자색에 분홍색을 적용하였으나, 빨간색으로 중복 적용 /* hello.html */ Hello! CSS style p 색상 속성 값 고정 (!important 적용) /* hello.html */ Hello! 설명 속성 중복 적용시 가장 마지막에 적용한 속성으로 변경 개발자가 코드 작성시 원치 않은 다른 속성 적용을 방지 !important를 사용하면 사용한 속성의 대한 값으로 고정 응용 ..

• format_list_bulleted Web/html & css & xml
• · 2022. 12. 23.
• textsms

JS - 클래스(Class)의 선언과 사용 방법

이 포스팅은 기본적인 프로그래밍 지식이 있다는 전제하에 작성하였습니다. 기본적인 내용은 생략된 것이 많으며, 필요한 문법과 사용 방법을 위주로 설명하였습니다. 보충 설명이 필요하신 분은 같은 객체 지향 언어인 자바를 기준으로 설명한 포스팅을 링크하도록하겠습니다. (어차피 개념은 같습니다.) 클래스 선언 class className { method1() { ... } method2() { ... } } class 키워드로 클래스 정의 클래스 안에 다양한 메소드를 정의하여 사용 가능 클래스에 대한 보충 설명 (자바) https://luvris2.tistory.com/227 클래스 - 객체, 인스턴스 변수(=멤버 변수), 메소드 클래스 (Class) 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 ..

• format_list_bulleted Web/Javascript
• · 2022. 12. 19.
• textsms

JS - 함수(Function)의 선언과 사용 방법

이 포스팅은 기본적인 프로그래밍 지식이 있다는 전제하에 작성하였습니다. 기본적인 내용은 생략된 것이 많으며, 필요한 문법과 사용 방법을 위주로 설명하였습니다. 함수 선언의 기본 요소 함수의 이름 괄호 안에서 쉼표로 분리된 매개변수(parameter) 목록 중괄호 { } 안에서 함수를 정의하는 자바 스크립트 코드\ 반환 값 필요시 return 키워드 사용 함수 표현식 function functionName(parameter1, parameter2... ) { // 코드 작성 } functionName : 함수의 이름을 정의 parameter : 매개 변수. 즉, 입력된 값을 함수에 전달해주는 변수 함수 호출 정의한 함수의 이름 입력 매개 변수 존재시 매개 변수의 값 입력 function fTest() { ..

• format_list_bulleted Web/Javascript
• · 2022. 12. 19.
• textsms

JS - Prompt(사용자 입력 받기), Confirm(대화 상자) 사용 방법

Prompt Prompt란? 사용자가 텍스트를 입력 할 수 있도록 안내하는 대화 상자 출력 구문 prompt(message, default); message : 사용자에게 보여줄 메시지 내용 default : 텍스트 입력 필드에 넣을 초기 값 프롬프트 사용 예시 숫자를 입력받아 입력 받은 숫자 안내하기 let nNumber = prompt("숫자를 입력해주세요."); alert("입력하신 숫자는 " + nNumber + "입니다."); 확인 prompt 창 출력, 사용자에게 입력 받기 esc를 누를 경우, null 값 반환 alert 창 출력, 입력 받은 숫자 안내하기 Confirm confirm이란? '확인'과 '취소' 두 버튼을 가지며 메시지를 지정 할 수 있는 대화 상자 출력 반환 값은 Boolea..

• format_list_bulleted Web/Javascript
• · 2022. 12. 19.
• textsms