본문 바로가기
반응형

Web/CSS16

CSS 선택자 - id, class 선택자 선택자란? 요소들에게 스타일을 주기 위해서 해당 요소를 DOM에서 찾기 위한 수단이다 ◆ 선택자의 종류 1. 기본선택자 - 기본선택자는 선택자를 하나를 사용하는 것 - 전체선택자(*), 태그선택자(h1, p, div), id선택자(#X), class선택자(.X), 가상요소, 가상클래스 2. 조합선택자 - 조합선택자는 선택자를 여러개를 사용하는 것 - 하위(자손)선택자, 자식선택자, 동위(인접형제)선택자 0. 전체선택자 - 모든 요소를 선탤 할 때 사용 - 선택자 : * - 브라우저에 적용되어있는 magin, padding값을 초기화시켜주기 위해서 많이 사용된다 - 하지만!! 브라우저의 성능을 떨어뜨리는 주범으로 사용하는 것을 권장하지 않음 1. 태그 선택자(요소 선택자) - 태그명이 선택자와 같은.. 2020. 12. 17.
DOM이란? DOM이란? 문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 인터페이스이다. 즉, 우리가 작성해놓은 HTML문서를 브라우저가 해석해서 만들어 놓은 것 1. 뷰포트에 무엇을 렌더링 할것인지 결정 2. 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용 ▶ 항상 유효한 HTML 형식입니다. ▶ 자바스트립트에 수정될 수 있는 동적모델 ▶ 가상요소를 포함하지 않는다 ▶ 보이지 않는 요소를 포함하지 않는다. DOM은 어떻게 생성되고 보이는 걸까? - DOM의 개체 구조는 "노드 트리"로 표현된다. - 하나의 부모(줄기)가 여래개의 자식(가지)을 가지고 있고, 자식(가지)은 후손(잎)을 가질 수 있는 나무 구조 -.. 2020. 12. 16.
CSS 삽입방법 CSS 첫번째 문서에서 한번 언급을 했지만 정리하고 가면 좋을거 같아서 따로 정리한번더 하겠습니다//^.^ 인라인 스타일(inline style) Hello World 실행결과 - HTML태그에 CSS 명령을 직접 입력하는 방식 - HTML 문서에 가장 간단하게 CSS를 삽입할 수 있는 인라인 스타일 - CSS를 HTML 태그과 같은 행에 사용하여 HTML 태그가 복잡 실전에서는 거의 사용하지 않는다!! 하지만 티스토리에서 글을 작성하면서 기본모드가 아닌 HTML모드를 보게되면 인라인 스타일로 작성이 되는것을 볼수 있다. 티스토리를 하기 위해서 HTML, CSS를 배우는 중이라면 인라인스타일로도 충분히 스타일을 줄수 있다!! 내부 스타일 시트(internal style sheet) Hello World .. 2020. 10. 14.
CSS란? CSS(Cascading Style Sheets) CSS란 웹 페이지에서 HTML 태그를 보조하여 페이지를 꾸미는 역할을 한다. 웹 개발자는 CSS를 이용하여 웹 사이트의 디자인을 더욱 풍부하게 하고 사이트의 유지 · 보수도 간편하게 가능 CSS 기본 구조 실전에서는 CSS파일을 따로 작성을 하여서 불러와서 적용을 시키지만 저는 공부할때는 복잡한 소스가 아닌이상 애국가 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세 실행결과 ▼ 소스코드 살펴보기 - 7~10행에서 CSS입력되었음며, CSS는 6행과 11행 태그 안에 들어간다. - 7행의 p에 의해 16행의 태그 영역의 글자색상과 크기가 변경된다. - 8행과 9행의 ;(세미콜론)은 .. 2020. 10. 2.
반응형