목록[CSS] (6)
Everything has an expiration date
CSS 20231129 [프로그램 소스(CSS 종료)] - Test018, Test019, Test020
WebApp02 Test018.html Test018.html 수직 정렬 실습 이번 실습을 통해 확인할 text 에는 수직 정렬과 관련된 내용이 포함되어 있다. Test019.html Test019.html CSS를 활용한 대소문자 지정 실습 Flowers make our rooms cheerful. → capitalize 의 경우 Flowers make our rooms cheerful. → none 의 경우 Flowers make our rooms cheerful. → uppercase 의 경우 Flowers make our rooms cheerful. → lowercase 의 경우 Test020.html colorStyle.css @charset "UTF-8"; p { color: lime; } h..
CSS 20231129 [프로그램 소스] - Test014, Test015, Test016, Test017
WebApp02 Test014.html Test014.html 가상 요소 적용 실습 문단 태그를 활용하여 내용을 작성하고 있다. 이 태그 내부에 기술된 내용은 엘리먼트 선택자의 영향을 받고 있는 상황이다. 하지만, 이 영역 안에서도 상황에 따른 스타일 적용이 가능하다. 첫 라인의 텍스트는 글자색이 (blue)이고, 글꼴 크기는 (25pt) 이다. 둘째 라인의 텍스트부터는 글자색이 (red) 이고, 글꼴 크기는 (9pt) 가 된다... Test015.html Test015.html 가상 요소 적용 실습 FIRST-LETTER 가 적용된 첫 번째 글자만 영향을 주게 되며, 나머지 글자에는 적용되지 않는다. Test016.html Test016.html CSS 기타 글자를 이렇게 만드는 속성이네... Busa..
CSS 20231129 [프로그램 소스] - Test009, Test010, Test011, Test012, Test013
WebApp02 externalStyle.css @charset "UTF-8"; h2 {color: blue;} /* 아래와 같이 괄호를 열어서 자바처럼 작성할 수도 있다. */ p { font-size: 20pt; font-weight: bold; color: red; } Test009.html Test009.html 스타일 적용의 우선순위 규칙 이와 같은 상황이라면... 나는 어떻게 표현되어야 할까... Test010.html Test010.html 스타일 시트의 상속성 스타일 시트는 상속성을 가지고 있다. Test011.html Test011.html 스타일 시트의 상속성 스타일 시트는 상속성을 가지고 있다. Test012.html Test012.html 동적 선택자(가상 선택자, 가상 클래스, 상..
CSS 20231129 [프로그램 소스] - Test005, Test006, Test007, Test008
WebApp02 externalStyle.css @charset "UTF-8"; h2 {color: blue;} /* 아래와 같이 괄호를 열어서 자바처럼 작성할 수도 있다. */ p { font-size: 20pt; font-weight: bold; color: red; } Test005.html Test005.html 문장 구조 선택자 활용 및 관찰 이 문장을 통해 이중 태그로 선택자를 사용하는 방법을 확인한다. 이 문장을 통해 이중 태그로 선택자를 사용하는 방법을 확인한다. 이 문장을 통해 이중 태그로 선택자를 사용하는 방법을 확인한다. 이 문장을 통해 이중 태그로 선택자를 사용하는 방법을 확인한다. 이 문장을 통해 이중 태그로 선택자를 사용하는 방법을 확인한다. 나도 i 거든~? ㅠㅠ Test006..
CSS 20231128 [프로그램 소스] - Test001, Test002, Test003, Test004
WebApp02 Test001.html(css) Test001.html(css) CSS 구성 및 관찰하기 기본적인 CSS 의 개념 선택자의 활용 기본적인 CSS 의 개념 선택자의 활용 Test002.html(css) Test002.html(css) html 태그(엘리먼트) 선택자 활용 스타일 시트는 html 문서에 비해 확장성과 기능성이 매우 뛰어나다. 스타일 시트는 html 문서에 비해 확장성과 기능성이 매우 뛰어나다. 스타일 시트는 html 문서에 비해 확장성과 기능성이 매우 뛰어나다. 스타일 시트는 html 문서에 비해 확장성과 기능성이 매우 뛰어나다. 스타일 시트는 html 문서에 비해 확장성과 기능성이 매우 뛰어나다. Test003.html(css) Test003.html(css) class 를..
■■■ CSS 선택자(Selector) 및 선언 방법 ■■■ ○ CSS 선택자(Selector) 구성 및 설정 - 『*』 공용 선택자, 전체 선택자 모든 엘리먼트를 선택한다. - 『E』 엘리먼트 선택자, 태그 선택자, 타입 선택자 E 엘리먼트를 선택한다. - 『.』 클래스 선택자 html 에서만 사용할 수 있으며, 예를 들어 『div.warning』은 warning 이라는 클래스를 가지고 있는 div 엘리먼트를 선택하게 된다. - 『#』 아이디 선택자 예를 들어, 『#myId』는 myID 를 아이디 속성의 값으로 사용하는 엘리먼트를 선택하게 된다. - 『E>F』 자식 선택자 E 엘리먼트의 자식 엘리먼트인 F 엘리먼트를 선택하게 된다. - 『E F』 자손 선택자, 후손 선택자, 하위 선택자 E 엘리먼트의 ..