2021.03.10) HTML/CSS - css속성 overflow, boxsizing 등

<div id="header">
                <div id="container">
                    <h1 id="logo">
                        <a href="#">
                            <img src="http://www.kiweb.or.kr/images/main_new/logo_new_2018.png">
                        </a>
                    </h1>
                    <div id="gnb">
                        <ul>
                            <li><a href="#">학교소개</a></li>
                            <li><a href="#">교육과정</a></li>
                            <li><a href="#">취업정보</a></li>
                            <li><a href="#">커뮤니티</a></li>
                            <li><a href="#">상담신청</a></li>
                        </ul>
                    </div>
                </div>
            </div>

#header > #container > #gnb > li > a 에서

a의 높이를 키우면 상위 div태그도 함께 height가 늘어날줄 알았지만 커지지 않았다

a태그의 높이는 106이지만

header와 container는 height가 각각 90으로그대로였다

css파일에서

#container {

    overflow: hidden;

}

overflow

• visible: 기본 값, 상자 밖으로 컨텐츠가 보여진다
• hidden: 영역을 초과하는 부분을 숨긴다 ( 겹쳐진 부분 없이 영역 분리 후 적용 되는듯)
• scroll: 초과하는 컨텐츠는 숨기고 스크롤이 생긴다 (가로/세로 모두)
• auto: 영역을 초과할 경우 스크롤 바가 생긴다 (넘치는 영역에만 생성)

-> 영역을 초과하는 컨텐츠를를 어떻게 보여줄지 지정하는 속성
-> overflow-x , overflow-y 로 가로 세로 각각 설정 가능

** width와 overfow-x: hidden; 을 함께 주었을 때 img를 사용자 화면 크기에 상관 없이 꽉 차게 보여줄 수 있음

box-sizing

• border-box: width와 height를 테두리, padding을 포함하여 계산한다

*** IE(Internet Exploer) 브라우저에서는 적용이 안될 수 있음

-> 박스의 크기를 표시하는 방식을 지정하는 속성
-> 설정하지 않으면 테두리 값은 따로 적용되어 원하는 크기 지정이 어렵다

** 최근에는 대부분의 영역에 box-sizing: border-box;로 설정한다

line-height

• normal: 웹 브라우저 기본 값 (보통 1.0 ~ 1.2)
• length: 길이로 줄 높이를 정한다 (ex 10px, 10em 등)
• number: 글자 크기의 배수로 줄 높이를 정한다 (10)
• percentage: 글자 크기의 비율로 줄 높이를 정한다 (10%)

-> 줄의 높이를 설정하는 속성

background

• url(): 이미지의 주소(위치)
• top, right, bottom, left (중앙을 기준으로 위쪽 끝, 오른쪽 끝, 아래쪽 끝, 왼쪽 끝 으로 보낸다)
• repeat: 이미지 반복 여부로 이미지를 영역만큼 반복 -> no-repeat 설정시 1회만

-> 배경에 이미지를 추가하는 속성

background-position

• x-opsition y-opsition: 가로와 세로 위치( left, ,right, center, top, bottom, 백분율, 길이)

-> 배경 이미지의 위치를 설정하는 속성

-> background에서 설정된 위치를 기준으로 이동한다

border-radius

• 박스의 테두리를 둥글게 -> 값이 클수록 둥글어짐
  -> 크기의 반 정도를 주면 둥글게 된다