언어/HTML&CSS

[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]HTML Emmet 사용법

Emmet이란??? 강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인 VSCode에 자동 내장 설치되어 있음 걍 VSCode에서 쓰면 됨! 개꿀임 Emmet Docs임 https://docs.emmet.io/abbreviations/syntax/ Abbreviations Syntax Abbreviations Syntax Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes. Elements You can use elements’ names like div or p to generate HTML tags. Emm..

[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..

[HTML&CSS]HTML

HTML 기본 문법 태그 제목 (h1 ~ 6까지 있음) 단락 줄 바꿈 이미지 리스트 리스트 태그의 부모 (Unordered list) 번호 리스트 (Ordered list), 리스트 태그의 부모 테이블(표), ( 의 부모) 테이블 한 행( 의 부모) 테이블 한 열, 행 진하게 강조 밑줄 (underline) 태그 웹 페이지 타이틀 UTF-8 형식으로 파일을 읽으라는 뜻 UTF-8 : 한글 읽기 쌉가능 태그 안에 head태그와 body태그가 들어가야 함 링크 태그 href → "hyper text" + "reference" 라는 뜻 클릭하면 새탭이 열리게 해줌 마우스를 올려두면 툴팁이 뜨게 해줌 태그 아무 의미 없이 갖다 써도 됨 css나 js 부여할 때 쓰면 됨 줄바꿈이 됨 태그 아무 의미 없이 갖다 써..