6장 CSS 속성
- 5장에서 배운 CSS 선택자를 이용하여 HTML 요소를 선택하고, 그 선택한 요소에 대해 속성을 부여함
- 속성에는 여러가지 속성들이 존재하며, 각 속성마다 명목형, 크기, 색, URL 등의 값을 줄 수 있음
속성의 값
- 명목형(교재에는 키워드 라고 나와 있음): 속성 이름과 콜론을 쓰고 Webstorm에서 Ctrl+Space를 누르면 선택 가능한 값이 나열됨
- 크기: %, em, px 등
- 색: 색 이름, rgb(r, g, b), rgba(r, g, b, a), #RRGGBB
- URL: url('/back.jpg')
속성 들
- 박스 속성: margin, border, padding, width, height
- 박스 테두리 속성: border-width, border-style, border-color, border-radius http://www.cssmatic.com/border-radius
- 표시 속성: display
- 배경 속성: background-image, background-size, background-repeat, background-attachment, background-position, background-color
- 글자 속성: font-size, font-family, font-style, font-weight, text-align, line-height
- 위치 속성: position, overflow
- float 속성: float
- 그림자 속성: text-shadow, box-shadow http://www.cssmatic.com/box-shadow
- 그레디언트: css gradient generator http://www.cssmatic.com/gradient-generator
실습
- 자기소개서 페이지의 항목을 플로팅 박스로 만들기
.floating-box {
display: inline-block;
width: 300px;
margin: 10px;
border: 3px solid deepskyblue;
float: left;
}
- 박스에 그림자 적용하기
- <h1>에 그레디언트 컬러와 둥근 모서리를 적용하고, 글자를 중앙에 위치시키기
- 특정 박스에 대해 스크롤바 적용하기(height를 지정하고, overflow-y 속성 이용), 아래 예시에는 '허준영' 박스에 대해 적용한 것임
예시)
브라우져 크기에 따라 2열로 표시되기도하고 3열로 표시되기도 함. inline-block의 응용
브라우져 크기에 따라 2열로 표시되기도하고 3열로 표시되기도 함. inline-block의 응용
