CSS

[JavaScript]DOM의 사용법

문서 객체 생성하는 방법 var header = document.createElement('h2'); // 태그 생성 var textNode = document.createTextNode('Hello'); // 'Hello'라는 문자열 생성 header.appendChild(textNode); // 태그에 textNode를 append document.body.appendChild(header); // 문서(document)의 에 문자열이 들어간 태그를 append 주석으로 달아놓은 것을 보면 알 수 있듯이 이렇게 동적으로 문서객체를 생성할 수 있음!!! 문서 객체 lookup하는 방법 id 속성 var takeElement = document.getElementById("id명"); id가 'id명'인..

[HTML&CSS]선택자 selector

선택자 selector 선택자 종류 전체 선택자 *{} 타입 선택자 h1, h2, h3{} 클래스 선택자(보통 디자인쪽) .className{} 아이디 선택자 (보통 개발쪽) #IdName{} 특성 선택자 주어진 특성을 가진 모든 요소를 선택함 [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] 결합자(선택자?) 이 밑에서 부터 E는 Element를 뜻함 하위(자손) 선택자 E1 E2 {} 자식 선택자 E1 > E2 {} 인접 형제 선택자 E1 + E2 {} 일반 형제 선택자 E1 ~ E2 {}

[HTML&CSS]HTML 태그 class와 id의 차이

class와 id의 차이 id - id는 유일 -> 그 파일에서 뭐 얘만 바꾸고 싶다? 유일하다? -> id - 그래서 id는 보통 개발쪽으로 많이 씀 - #은 id class - class는 중복 가능 -> 그 파일에서 공통적으로 뭔가 바꾸고 싶다? -> class - 그래서 class는 보통 디자인쪽으로 많이 씀 - .은 클래스 css를 임베디드나 링크 방식으로 선언할 때도 #태그이름 or .태그이름 이렇게 씀 Emmet 쓸 때도 #랑 . 이용하면 편하게 사용 가능하긴 함

[HTML&CSS]CSS 선언 방식들과 우선 순위

CSS 선언 방식들과 우선 순위 1. 인라인 스타일 시트 - 해당 HTML 태그 안에 style이라는 속성을 이용해서 선언 HELLO 2. 내부(임베디드, Embedded) 스타일 시트 - 태그 안에 태그를 사용하여 선언 - 해당 html 파일 안에서만 사용 가능 3. 외부(링크, Link) 스타일 시트 - 별도의 .css 파일을 외부에서 만들어서 그 파일을 html 파일의 태그 안에 태그를 이용하여 선언 - 작업하는 html 파일이 많거나, 공통적으로 사용하는 css에 관해서는 이 방식으로 많이 처리한다고 함 우선 순위 - 인라인, 내부, 외부 순으로 우선 순위가 낮아짐 -> 인라인 스타일 시트의 우선 순위가 제일 높음!

[HTML&CSS]VSCode에서 설치하면 좋은 개꿀 Extensions

Extensions 추가 설치 1. Korean Language 뭐시기뭐시기,, 한글판 메뉴 설치 후 restart 해야됨 2. Material Theme 테마 설정 가능 입맛에 맞게 밝게 어둡게 쌉가능 3. Live Server 로컬 서버 변경 자동 반영 vscode에서 수정하고 저장하면 바로 서버에 반영됨 개인적으로 개꿀인듯??? 4. Prettier - Code formatter 소스코드 형식에 맞게 자동 이것도 개꿀 5. Bracket Pair Colorizer 괄호에 칼라(가독성) 또 개꿀 6. Indent Rainbow 들여쓰기별 색상 지정(가독성) 이것도 없으면 섭섭함 7. Auto Rename Tag 시작 태그 변경시 종료태그 자동 변경 이것도 개꿀이네 8. CSS Peek html에서 c..

[HTML&CSS]CSS

CSS STYLE margin 여백 선택자(selector) class 선택자 태그 안에 태그 추가 후 그 안에 .(class 이름){변경 사항} 하면 다 바꿀 수 있음 JavaScript는 자바스크립트이다. JavaScript는 자바스크립트이다. JavaScript는 자바스크립트이다. JavaScript는 자바스크립트이다. JavaScript는 자바스크립트이다. JavaScript는 자바스크립트이다. id 선택자 태그 안에 태그 추가 후 그 안에 #(id 이름){변경 사항} 하면 다 바꿀 수 있음 JavaScript는 자바스크립트이다. JavaScript는 자바스크립트이다. JavaScript는 자바스크립트이다. JavaScript는 자바스크립트이다. JavaScript는 자바스크립트이다. JavaSc..