Programming/CSS
-
CSS속성-positionProgramming/CSS 2019. 7. 7. 20:56
position 속성은 HTML 요소를 배치할 때 기준이 되는 위치, 즉 요소의 위치 설정 방식을 지정할때 사용한다. 이 속성이 설정되어야만 기준 위치로부터 요소의 위치를 지정하는 top, bottom, left, right 속성이 제대로 동작한다. (1) static: 페이지의 정상적인 흐름에 따라 현재의 위치를 요소의 위치로 결정하므로, 별도로 위치의 지정/변경이 불가(top/bottom/left/right 속성값은 무시) (2) absoltue: 웹브라우저(또는 컨테이너) 왼쪽 상단의 모서리를 기준으로 지정한 위치만큼 이동하여 요소를 배치하는 방식 (3) relative: 해당 요소의 현재 위치를 (0, 0)으로 정하고, 이를 기준으로 지정한 위치만큼 이동하여 요소를 배치 (4) fi..
-
CSS 선택자Programming/CSS 2019. 7. 7. 20:55
1. 전체 선택자 : 모든 요소에 스타일 적용 * { color: green } 2. 타입 선택자 : 지정한 요소에만 스타일 적용 p { color: green } 3. 클래스 선택자 : 해당 클래스명을 가지 요소 또는 요소들에 스타일 적용 (1) 같은 요소에 서로 다른 스타일 지정 p.class1 { color: green } p.class2 { color: yellow } (2) 다른 요소에 같은 스타일 지정 .class1 { color: green } .class2 { font-size: 20 pt } → 이때 HTML 문서는 다음과 같이 사용도 가능함 h3 요소에 class1과 class2 스타일 동시적용 가능 동일 스타일 적용(초록색) 동일 스타일 적용(초록색) 4. 아이디 선..