개발 공부

상속(Inheritance) - 부모 요소에서 설정된 일부 CSS 속성 값이 자식 요소에게 상속되며, 일부는 그렇지 않다. - 상속되는 CSS 속성들 -> 글자/문자 관련 속성들 ( 모든 글자/문자 속성은 아님 ) font-style : 글자 기울기 font-weight : 글자 두께 font-size : 글자 크기 line-height : 줄 높이 font-family : 폰트(서체) color : 글자 색상 text-align : 정렬 ... 예) 스타일 상속 1 .parent1{ color: red; } 조부모 부모1 자식1 자식2 자식3 부모2 => 결과

- CSS 선택자 1. 기본 선택자 2. 복합 선택자 3. 가상 클래스 4. 가상 요소 선택자 5. 속성 - 적용 파일 index.html 리스트 1 리스트 2 리스트 3 div 태그 p 태그 span 태그 1. 기본 선택자 1-1. 전체 선택자(Universal Selector) - *(Asterisk) 를 지정 - 모든 요소를 선택한다. * { color: red; } 1-2. 태그 선택자(Type Selector) - 태그를 지정 - 지정한 요소를 선택 li{ color:red; } 1-3. class 선택자(Class Selector) - 클래스를 선택 .c1{ color:red; } 1-4. id 선택자(Id Selector) - id를 선택 #i1{ color:red; } 2. 복합선택자 2-..

- CSS 선언 방식은 네 가지가 있다. 1. 내장 방식 2. 링크 방식 3. 인라인 방식 4. @import 방식 1. 내장 방식 - html 문서 안의 의 내용으로 스타일을 작성하는 방식 - CSS 내용이 많아지면 HTML 문서 안에서 한번에 처리하기 어렵다. 예) p { font-size: 20px; } 2. 링크 방식 - 로 외부 CSS 문서를 가져와서 연결하는 방식 예) 3. 인라인 방식 - 요소의 style 속성에 직접 스타일을 작성하는 방식. - 선택자 지정 없음. 예) p 태그 4. @import 방식 - CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식 예) - main.css @import url("./p.css"); - p.css p{ f..

- CSS 는 다음과 같이 작성한다. 선택자{ 속성: 값; } -> 선택자 : 스타일(CSS)을 적요할 대상(Selector). 요소, id, class 등. 속성 : 스타일(CSS)의 종류(Property) 값 : 스타일(CSS)의 값 예) span { color:red; } - 주석은 다음과 같이 작성한다. /* 주석 내용 */ 예) span { color:red; /* span 태그 안의 문자 색을 빨간색으로 지정 */ }

- HTML 문서를 작성하다 보면 초기에 CSS가 설정되어 있는 것을 알 수 있다. - 이를 초기화 하기 위해 CSS를 초기화하는 파일이나 링크를 이용할 수 있다. - 구글에 "reset-css cdn" 을 입력하면 CSS 초기화 파일 혹은 링크를 공유하는 웹 사이트를 찾을 수 있다. https://www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion re..

- data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해준다. - 어느 요소에나 data- 로 시작하는 속성은 무엇이든 사용할 수 있다. - 화면에 안 보이게 글이나 추가 정보를 요소에 담아 놓을 수 있다. 참고 : https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes