색 지정
- 표준 색상명 (140개)
- rgb(0~255,0~255,0~255)
- red/green/blue 색의 3원소
- #rrggbb
- HEX == 16진수
- rgba(0~255,0~255,0~255,alpha 투명도 0.0~1.0)
- hsl
- hue(색조) 0~360 : 0(빨강) / 120(초록) / 240(파랑)
- saturation(채도) 0~100%
- lightness(밝기) 0(검정)~100(흰색)%
선택자 {
속성 : red;
속성 : #rrggbb;
속성 : rgb(255,255,255);
속성 : rgba(255,255,255,0.5);
속성 : hsl(0,100%,50%);
}정렬
수직 정렬
- 블럭 모드를 컨테이너에 대하여 가운데 정렬
div{
margin: 0 auto;
/* left, right 마진을 자동으로줘서 가운데 정렬*/
}- 텍스트를 가운데 정렬
p{
text-align: center;
/* 요소 안의 텍스트를 가운데 정렬 */
}background 속성
background-image
- 특정 이미지를 배경으로 사용하는 속성
- 여러 이미지를 사용할 수 있음
- 속성
- background-size : 이미지 사이즈를 정함
- background-position : 이미지가 시작하는 위치를 정함
- background-repeat : 이미지를 반복할지 결정
div{
background: url("나무 이미지 경로") left top no-repeat
, url("꽃 이미지 경로") right bottom no-repeat
, url("종이 이미지 경로") left top repeat;
background-size: 50px 150px, 130px, auto;
}
background-size
- contain
- 이미지가 요소를 넘치지 않을 정로도만 크게 유지
- cover
- 이미지의 세로나 가로가 꽉 차도록 이미지를 크기 조절
- 세로 비율이 짧은 이미지라면, 세로가 꽉 차는 크기
- 가로 비율이 짧은 이미지라면, 가로가 꽉 차는 크기
- 이미지의 세로나 가로가 꽉 차도록 이미지를 크기 조절
background-origin
- 배경 이미지의 영역을 지정
- 속성 값
- padding-box : 패딩 왼쪽상단 (기본값)
- border-box : 테두리 왼쪽 상단
- content-box : 콘텐츠 왼쪽 상단
- background-clip 은 배경색이 칠해질 영역에 대한 속성
gradient 효과
- 색의 부드러운 전환
- 속성 값
- 선형 그라데이션
- linear-gradient(방향, 색상 %, 색상 %, ...)
- 방사형 그라데이션
- radial-gradient(모양, 색상 %, 색상 %, ...)
- 선형 그라데이션
이미지 스프라이트
-
하나의 이미지에 여러 이미지 모음
-
서버에서 이비리를 로드하는 횟수를 줄여 성능을 향상
-
네이버에서 사용하는 이미지 스프라이트
<style>
div {
/* 1. 이미지를 표현하고자하는 사이즈 */
width: 222px;
height: 52px;
/* 2. 이미지 스프라이트르 배경이미지로 지정 */
background-image:url("https://s.pstatic.net/static/www/img/uit/sp_main_dba1af.png");
/* 3. 표현하려는 크기와 실제 이미지파일의 사이즈 비교하여 사이즈 지정 */
background-size: 457px; /* 50% :원본 914px*/
/* 4. 사용하려하는 이미지의 시작 좌표만큼 이미지 포지션을 잡음 */
background-position: 0 -158px;
background-repeat: no-repeat;
}
</style>
<body>
<div></div>
</body>
텍스트
- 기본
- 요소보다 텍스트가 길어지면 개행
- 단어 단위로 개행
word-wrap 속성
- 단어가 요소 밖으로 overflow될 때, 줄을 바꿀 지 지정
- 속성 값
- normal : 기분 줄바꿈
- break-word : overflow가 발생하는 단어를 잘라서 줄 바꿈
white-space
- 공백 문자 처리
- 속성 값
- normal : 연속 공백을 하나로 합침, 자동 개행
- nowrap : 연속 공백을 하나로 합침,
태그에서만 개행
text-overflow
- overflow된 텍스트 표시 여부
- 속성 값
- clip : 기본 값
- ellipsis : 잘린 텍스를 '...'으로 표시
폰트
@font-face
- 클라이언트(브라우저)에 설치 되지 않은 폰트
- 웹 폰트로 지정
- 페이지 로드 시, 자동으로 서버에서 폰트 로드
- 클라이언트 폰트 사용
@font-face{
font-family: myFirstWebFont;
src:url("../images/sansation_bold.woff");
font-weight: bold;
}
*{
font-family: myFirstWebFont;
}
1일 1산책 1커밋