분류 전체보기
-
CSS 선택자 (기본, 복합)CSS/CSS 2021. 4. 20. 09:20
기본 선택자 * { 속성: 값; } 전체 선택자(Universal Selector) - 모든 요소를 선택한다 태그명 { 속성: 값; } li { color: blue; } 태그 선택자(Type Selector) - 태그 이름이 태그명인 요소를 선택한다 .클래스명 { 속성: 값; } 클래스 선택자(Class Selector) - HTML class 속성의 값이 클래스명인 요소를 선택한다 #아이디명 { 속성: 값; } 아이디 선택자(ID Selector) - HTML id 속성의 값이 ID명인 요소를 선택한다 ※ class속성과 id속성은 HTML의 전역 속성 복합 선택자 복합 선택자란 기본 선택자 4가지(전체, 태그, 클래스, 아이디)를 조합해서 사용하는 선택자 /* CSS */ 선택자1+선택자2 { 속성..
-
CSS 선언 방식CSS/CSS 2021. 4. 20. 03:14
내장 방식 HTML 요소 내부 요소의 내용(Contents)으로 스타일을 작성하는 방식 장점 - 별도의 CSS 파일이 필요하지 않다 단점 - CSS의 내용이 많은 경우 HTML 문서 내에서 처리하기가 쉽지가 않다 인라인 방식 HTML 요소의 style 속성(전역 속성을 의미)에 직접 스타일을 작성하는 방식 (선택자가 없음) 장점 - 별도의 CSS 파일이 필요하지 않다 단점 - 우선 순위가 높기 때문에 유지 보수가 어렵다 링크 방식 /* CSS 부분 */ div { color: blue; margin: 10px; } HTML 요소 내부 태그를 이용해로 외부 CSS 문서를 가져와서 연결하는 방식 (권장됨) - 병렬로 연결하는 방식 @import 방식 /* first.css */ @import url("./s..
-
CSS 기본 문법CSS/CSS 2021. 4. 20. 03:10
CSS는 시작적인 디자인과 레이아웃을 표현을 담당 HTML 요소들에게 스타일을 입히는 역할 CSS 기본 문법 선택자 { 속성: 값; } 선택자 { 속성: 값; 속성: 값 } div { color: blue; } 선택자(Selector) - 스타일(CSS)을 적용할 대상 속성(Property) - 스타일(CSS)의 종류 값(Value) - 스타일(CSS)의 값 CSS 주석 /* 주석 내용 */ 주석 내용은 메모글이며, 해당 내용은 화면에 반영되지 않는다 단축키 - (Ctrl + /)
-
HTML 주석 그리고 전역 속성HTML 2021. 4. 20. 00:41
주석(Comment) 이란 실제 코드에는 반영되지 않는 코드, 내용을 메모하는 목적으로 사용 실제 화면에 내용이 표시되지 않는다 단축키 주석 지정, 해제(Ctrl + /) 전역 속성 전체의 영역에서 모두 사용할 수 있는 속성 기본적으로 태그에서 사용하는 다양한 태그들의 전체 영역에서 언제든지 사용할 수 있다 title 속성 - 요소의 정보나 설명을 지정 (일종의 툴팁처럼 해당 내용이 화면에 출력된다) style 속성 - 요소에 적용할 스타일(css)을 지정 class 속성 - 요소를 지칭하는 이름 (중복이 가능하다) - 해당 하는 요소를 CSS, JS에서 선택하여 제어하기 위해서 사용된다 id 속성 - 요소를 지칭하는 이름 (중복X , 고유해야 한다) - 해당 하는 요소를 CSS, JS에서 선택하여 제어..
-
HTML 글자(인라인)와 상자(블록)의 개념HTML 2021. 4. 18. 00:09
요소가 화면에 출력되는 특성(2가지) 인라인(Inline) 요소 - 글자를 만들기 위한 요소 - 가로 세로 너비 모두 포함한 콘텐츠(내용)의 크기만큼 자동으로 줄어듬 - 인라인 요소는 가로 세로 사이즈를 지정할 수 없다 - 자식 요소로 블록 요소를 사용할 수 없다 내용 내용1 내용2 블록(Block) 요소 - 상자(레이아웃)를 만들기 위한 요소 - 가로 너비는 부모 요소의 크기만큼 자동으로 늘어남 - 세로 너비는 포함한 콘텐츠의 크기만큼 자동으로 줄어듬 - 자식 요소로 인라인 요소와 블록 요소 모두 사용 가능하다 내용 내용1 내용2
-
HTML 요소와 관계HTML 2021. 4. 17. 04:35
HTML 기본 문법 내용 = 요소(Element) 내용 = 시작(열린) 태그(Tag) = 종료(닫힌) 태그 내용 = 요소의 내용(Contents) 속성(Attribute)="값(Value)" = 기능의 확장 HTML 부모와 자식 관계 -> 1 요소 -> 2 요소 내용 부모와 자식 관계는 상대적인 요소 - 1 요소는 2 요소의 부모 요소 - 2 요소는 1 요소의 자식 요소 -> 1 요소 -> 2 요소 내용-> 3 요소 3 요소를 기준으로 - 2 요소는 3 요소의 부모 요소 - 1 요소는 3 요소의 상위(조상) 요소 상위 요소란 나(기준이 되는 요소)를 기준으로 나를 깜싸고 있는 모든 요소들을 지칭한다 - 부모 요소 또한 포함된다 1 요소를 기준으로 - 2 요소는 1 요소의 자식 요소 - 3 요소는 1 요소..
-
Emmet기본 지식 2021. 4. 16. 01:20
에밋(Emmet)은 HTML 또는 CSS의 자동완성을 통해 효율적으로 문법을 작성 가능하다 기본적으로 Tab키를 통해 사용할 수 있다 Emmet 문법 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. Emmet doesn’t have a predef docs.emm..