본문 바로가기

HtmlCss/CSS20

CSS- 박스모델 box모델에 margin과 padding이 적용되는 순서 예) margin: 값1 값2 값3 값4; ==> 위, 오른쪽, 아래, 왼쪽 (시계방향) margin: 값1 값2 값3; ==> 위, 좌우, 아래 margin: 값1 값2; ==> 위아래, 좌우 margin: 값1; ==> 4군데 모두 전체 margin-top: 값; =>위 margin-bottom: 값; =>아래 margin-left: 값; =>왼쪽 margin-right: 값; =>오른쪽 padding도 동일하다. -margin ==> 서로 인접한 margin값들은 교집합 형태로 적용된다. -블록요소의 박스모델 자체를 가운데 정렬하려면 margin의 좌우값을 auto로 설정한다. 예1) margin:0px auto; 예2) margin-left.. 2019. 5. 25.
CSS - 자식필터 첫째 둘쨰 셋째 넷째 다섯째 test line 1 test line 2 test line3 test line4 test line 5 자식요소들 중에서 순번을 이용하여 선택하는 방법 (이 자식 요소들의 순번은 1번부터 시작한다.) 1) 셀렉터:nth-child(번호) ==> '셀렉터'의 부모의 자식들 중에서 '번호'번째에의 요소가 '셀렉터'와 같은 요소를 선택한다. 2) 셀렉터:nth-child(odd) ==> '셀렉터'의 부모의 자식들 중에서 '홀수'번째에의 요소가 '셀렉터'와 같은 요소를 선택한다. 2) 셀렉터:nth-child(eve) ==> '셀렉터'의 부모의 자식들 중에서 '짝수'번째에의 요소가 '셀렉터'와 같은 요소를 선택한다. 4) 셀렉터:nth-child(sn+'7] ==> x, y ==> .. 2019. 5. 25.
CSS - Overflow (영역) 요소안의 내용이 요소에 지정된 크기보다 많아서 요소의 지정된 영역을 벗어나면 이 벗어난 영역에 대한 처리를 하는 속성이 overflow이다. overflow의 속성값이 hidden이면 벗어난 값들이 보이지 않고 scroll이면 범위를 벗어난 값들을 보이기 위해 스크롤바가 생기고, auto이면 값의 양에 따라 자동으로 스크롤바가 생기거나 생기지 않는다. overflow hidden : 영역에서 벗어난 값들이 보이지 않는다. scroll : 영역에서 벗어난 값들을 보이기 위해 스크롤바가 생긴다. auto : 값의 양에 따라 스크롤바가 생기거나 생기지 않는다. 2019. 5. 25.
Css 속성 선택자 사용 CSS의 속성 선택자 사용법 셀렉터[속성명] ==> '셀렉터'에 해당되는 요소들 중에서 지정한 '속성명'이 있는 요소들을 선택한다. 셀렉터[속성명=값] ==> '셀렉터'에 해당되는 요소들 중에서 지정한 '속성명'의 속성값이 '값'과 같은 요소들을 선택한다. 셀렉터[속성명^=값] ==> '셀렉터'에 해당되는 요소들 중에서 지정한 '속성명'의 속성값이 '값'으로 시작하는 요소들을 선택한다. 셀렉터[속성명$=값] ==> '셀렉터'에 해당되는 요소들 중에서 지정한 '속성명'의 속성값이 '값'으로 끝나는 요소들을 선택한다. 셀렉터[속성명*=값] ==> '셀렉터'에 해당되는 요소들 중에서 지정한 '속성명'의 속성값에 '값'이 포함되는 요소들을 선택한다. 셀렉터[속성명|=값] ==> '셀렉터'에 해동되는 요소들 중에.. 2019. 5. 25.