CSS 문제
문제1. margin, padding 차이
margin : 외부여백, 주변 요소와 거리를 두기 위한 영역.
padding: 내부여백, Content와 Border 사이의 여백을 나타낸는 영역.
Padding 영역도 Content의 연장으로 볼 수 있다.
문제2. width: 300px; height: 500px; 로 지정한 박스에 글을 넣었더니 내용이 길어 박스에서 콘텐츠가 넘친다. 박스를 벗어나는 내용을 스크롤하여 볼 수 있도록 하려면 어떤 속성을 적용해야 하는가.
overflow-y: scroll
박스에 넣을 수 있는 것보다 많은 내용이 있는 경우 스크롤 막대만 표시 : overflow-y: auto
문제3. 자식이 하나 있을 때 다른 스타일 적용할 수 있는 선택자
:only-child, :only-of-type
텍스트 꾸미기
텍스트 스타일 CSS 속성 분류
글꼴 스타일 : 텍스트에 적용되는 글꼴에 영향을 주고, 적용되는 글꼴, 크기, 굵기, 이탤릭체 등에 영향을 주는 속성
color, font-family, font-size
텍스트 레이아웃 스타일 : 텍스트의 간격 및 기타 레이아웃 기능에 영향을 주는 속성으로, 예를 들어 선 과 문자 사이의 간격 및 내용 박스 내에서 텍스트가 정렬되는 방식을 조작
text-align, line-height, letter-spacing, word-spacing
font-size 설정단위 : 기본 폰트 사이즈값 16px
px | 고정값 | 고정 |
em | 단위가 있는 곳의 폰트사이즈의 배수(상위요소 폰트 사이즈 상속) | 가변 |
rem | 문서의 기본값의 배수(상위요소 상속x, 문서 전체의 기본값 배수 | 가변 |
/* em 예시 */
html{ font-size : 10px; }
div { font-size : 2em; /* 10px의 2배 */ }
li { font-size : 2em; /* 10px의 2배의 2배 */ }
/* rem 예시 */
html{ font-size : 10px; }
div { font-size : 2rem; /* 10px의 2배 */ }
li { font-size : 3rem; /* 10px의 3배 */ }
CSS
복사
문자 및 단어 간격
letter-spacing | 글자 사이의 간격 |
word-spacing | 단어 사이의 간격 |
목록 스타일링
list-style-image : 글머리 기호에 맞춤 이미지를 사용 (글머리 기호의 위치, 크기 등을 제어하는 측면에서 약간 제한된다. background 속성 계열을 사용하는 것이 좋다)
ul {
list-style-image: url(star.svg);
}
CSS
복사
list-style-position : 목록항목 표시자의 위치를 지정
/* 문단 안쪽 */
ol {
list-style-position: inside;
}
/* 문단 바깥쪽 */
ul {
list-style-position: outside;
}
CSS
복사
스타일링 링크
링크 상태
:link | href 속성이 명시된 상태 |
:visited | 이미 방문한 링크 |
:hover | 마우스 포인터로 가리키는 링크 |
:focus | 초점이 맞춰진 링크 |
:active | 활성화(예: 클릭)된 링크 |
웹폰트
@font-face : 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용
