overflow: hidden과 display: none의 차이
-
overflow: hidden
over되는 것들을 숨겨준다. 안 보이게 해준다. -
display: none
화면에 나오지 않게 한다.
<style>
.a + li {
background: red;
}
li + li + li {
font-size: 25px;
}
</style>
</head>
<body>
<ul>
<li>Apple</li>
<li>Mango</li>
<li class="a">Banana</li>
<li>Melon</li>
<li>Strawberry</li>
</ul>+: 인접 형제 결합자
앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택.
같은 부모를 가진 첫 번째 것의 바로 뒤에 오는 다음 것을 선택해서 적용시키는 것
.a + li {
background: red;
}- Apple
- Mango
- Banana
- Melon
- Strawberry
li + li + li {
font-size: 25px;
}- Apple
- Mango
- Banana
- Melon
- Strawberry
-
상대 길이 단위 (Relative length units)
em : 배수 단위. 부모 요소 기준
rem : root em. 최상위 요소(<html>)의 글자 크기를 기준점으로
% : 비율. 부모 요소 기준
vw : 화면 넓이를 기준으로 하는 백분율 단위
vh : 화면 높이를 기준으로 하는 백분율 단위
vmin : 화면의 가로와 세로(넓이와 높이) 중 작은 값을 기준으로 하는 백분율 단위
vmax : 화면의 가로와 세로 중 큰 값을 기준으로 하는 백분율 단위
ex : 현재 폰트의 x-height 값. 즉 현재 폰트의 소문자 x의 높이 값을 기준으로 한 백분율 단위
-
overflow
요소의 콘텐츠가 너무 커다랄 경우 요소를 어떻게 처리할지 지정.
overflow-x, overflow-y의 축 별로 값을 설정할 수 있다.
overflow 속성은 첫 번째 overflow-x, 두 번째 값은 overflow-y를 지정.
하나만 사용하면 지정한 값을 양 축 모두에 적용하는 축약형.
<css>
div {
/* x축은 숨기고, y축은 숨기지만 스크롤을 제공하여 잘린 나머지 부분을 확인 할 수 있게 함. */
overflow: hidden visible;
width: 100px;
height: 100px;
}- overflow 중요 속성
visible : 기본 속성으로 콘텐츠를 자르지 않는다.
hidden : 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라낸다. 스크롤 바 제공 X
float나 magin 합침 현상 등에서 자식 요소의 넓이나 높이를 포함시키기 위해서도 많이 사용.
scroll : 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라냄. 잘려진 나머지 부분을 확인 할 수 있도록 스크롤 바 제공.
-
font
font-family를 사용하면 CSS를 적용하여 글꼴을 변경할 수 있습니다. 이때 글꼴은 여러 개가 지정가능 한데 여러 개를 지정하는 이유는 해당 서체가 없을 경우 그 다음 글꼴이 차선책으로 사용되도록 해줍니다
text-transform은 텍스트를 대문자나 소문자로 표현할 수 있습니다. uppercase는 대문자, lowercase는 소문자, capitalize는 각 단어의 첫 글자를 대문자로 지정
font-style은 텍스트를 기울기 글꼴로 표현할 수 있습니다. normal은 일반 스타일, italic은 이탈릭체, oblique는 오블릭체
text-decoration은 밑줄을 표현할 수 있습니다. none은 효과 제거, underline은 밑줄 추가 -
font format
font format 이란 폰트를 구현하는 방법이며, 브라우저 별로 서로 다른 포맷을 지원하기 때문에 브라우저별 지원 정보를 알아 둘 필요가 있습니다.
Text
line-height
글자의 높이를 지정.
normal : 기본 값
number : 1은 font-size 값 만큼의 글자 높이를 의미합니다. 2는 font-size 값의 두 배를 의미합니다. 소수점을 지원
text-indent
텍스트 라인에서 텍스트가 시작하기 전의 빈 공간을 설정할 수 있다. 쉽게 말해 들여쓰기 공간 설정.
text-decoration
텍스트에 붙는 라인을 꾸며주는 속성입니다.
텍스트의 상단, 하단에 라인을 그려줄 수 있고, 라인의 종류와 색상도 지정할 수 있다.
대신 <a> 태그의 기본 스타일을 제거할때 가장 자주 쓰이는 속성.
vertical-align
인라인 요소가 이어저 나올 경우 이어지는 인라인 요소의 높이를 맞추기 위해 사용하는 것(파워포인트의 요소 높이 맞추기와 같은 기능)
img 태그의 바깥쪽 공백을 없애기 위하여 자주 사용
baseline; sub; super; text-top; text-bottom; middle; top; bottom;
