CSS 스타일 속성(2)

▶ background-repeat 속성

• background-repeat 속성의 기본 키워드 : repeat(그림이 패턴을 이루어 여러개 출력됨)
• no-repeat 키워드를 사용하면 반복 없이 배경 이미지가 적용됨

▶ background-attachment 속성

• scroll 키워드 : 화면 스크롤에 따라 배경 이미지가 함께 이동함(기본 키워드)
• fixed 키워드 : 스크롤을 내려도 배경 이미지가 고정됨

▶ background-position 속성

• background-position:키워드;
• background-position: X축크기;
• background-position: X축크기 Y축크기;

배경이미지가 아래에 붙음

속성 2개의 값 입력 : X축 위치와 Y축 위치를 적용 -> X축 위치 : 0픽셀, Y축 위치 : 50%로 적용

▶ overflow

• visible : 기본 값입니다. 넘칠 경우 컨텐츠가 상자 밖으로 보여짐
• hidden : 넘치는 부분은 잘려서 보여지지 않음
• scroll : 스크롤바가 추가되어 스크롤할 수 있음(가로, 세로 모두 추가 됨)
• auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정됨(필요에 따라 가로, 세로 별도로 추가될 수도 있음)

▶ float 속성

• 이미지를 글자 위에 띄우기 위해 만들어진 스타일 속성
• float 속성을 사용하면 태그를 수평으로 정렬 가능

▶ 자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용함!!(★★★)

• 문제점 발생 : #footer 태그가 #section 태그 아래에 붙어 있음 -> img태그에 float 속성을 사용해 이미지가 부유했던 것처럼 #footer 태그의 글자 위에 #wrap 태그 내부의 요소가 부유하는 것!!

결과화면

• 해결방법 : float 속성을 사용한 태그의 부모에 overflow 속성을 사용하고 hidden 키워드를 적용함!

이런 방법 : One True Layout 방식

결과화면

▶ clear: both

• float으로 일그러진 레이아웃을 쉽게 초기화할 수 있음
• float를 적용할 대상들 뒤에만 적어주면 됨(아래의 코드에서는 조금 더 일관성 있게 볼 수 있도록 가로로 자를 수 있는 부분에 모두 넣어줌)
• 레이아웃의 일그러짐을 초기화할 부분(<div class="clear"></div>)에 clear: both를 적용한다는 것이 포인트!

결과화면