CSS 3

HTML5 + CSS3 (12) CSS3 선택자, (13) 애니메이션

12. CSS3 선택자 * 연결 선택자: 선택자와 선택자를 연결해 적용 대상을 한정하는 선택자 - 하위 선택자: 부모 요소에 포함된 모든 하위 요소에 스타일이 적용 (예시) section 요소 안에 있는 모든 p 요소의 글자 색을 파란색으로 지정 section p { color: blue; } - 자식 선택자: 자식 요소에 스타일을 적용하는 선택자, '>'부등호를 표시해 부모와 자식 요소를 구분 (예시) section 요소 안에 포함된 p 요소 중 자식 p 요소에만 파란색으로 지정 section > p { color: blue; } - 인접 형태 선택자: 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용 (예시) h1 요소 다음에 오는 p 요소들 중 첫 번째 p 요소에만 밑줄 적용 h1..

프로그래밍 2021.10.12

HTML5 + CSS3 (7) 배경 스타일, (8) 레이아웃 스타일, (9) CSS 포지셔닝

7. 배경 스타일 * 색상 표현법 - 16진수 표기법 #ffffff 형식(000000(검은색) ~ ffffff(흰색))으로 6자리의 16진수 표기 앞 2자리 = 빨강, 중간 2자리 = 초록, 끝 2자리 = 파랑 2자리씩 중복될 경우 중복해서 사용할 수 있음(ffaacc -> fac) - hsl/hsla 표기법 color: hsl(240, 100% 50%) 표기 240(색상, hue), 100%(채도, saturation), 50%(밝기, light) 투명도를 조절할 때 마지막에 알파값 추가(알파값은 불투명도를 나타내는 값, 0 ~ 1) - rgb/rbga 표기법 color: rgb(255, 0, 0) 표기 빨강, 초록, 파랑 0은 하나도 섞이지 않음, 255 가득 섞임 투명도를 조절할 때 마지막에 알파값..

프로그래밍 2021.10.11

HTML5 + CSS3 (5) CSS 기초, (6) 텍스트 관련 스타일

5. CSS기초 * 스타일, 스타일 시트 - 스타일: HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등을 결정짓는 요소 - 스타일 시트: 스타일을 관리하기 쉽게 집합시켜놓은 것 - 스타일 형식 p { text-align: center; } p: 선택자, { } 와 사이에 정의한 스타일 규칙이 적용될 대상 text-align: 스타일 속성 center: 속성 값, 속성과 속성값이 여럿일 경우 세미콜론으로 구분 - 스타일 주석: /* */ 사이에 주석 내용 입력 - 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것 모든 스타일 정보는 태그 안에서 정의 태그 사이에 작성 - 외부 스타일 시트 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할..

프로그래밍 2021.10.11