CONTENTS
Section6 CSS3 백그라운드
Section7 CSS3 전환&변환
*CSS 파일 작성 방법
*웹 프로그래밍 작업 순서
참고사이트) Font Awesome, draw.io
----------------------------------------------------------------------
Section6 CSS3 백그라운드
1.백그라운드
◎background
-요소의 배경을 설정(단축 속성: background: 색상 이미지경로 반복 위치 스크롤특성;)
| 속성값 | 의미 | 기본값 |
| background-color | 배경 색상 | transparent(투명) |
| background-image | 하나 이상의 배경 이미지 | none cf)<url="경로"> |
| background-repeat | 배경 이미지의 반복 | repeat |
| background-position | 배경 이미지의 위치 | 0 0 |
| background-attachment | 배경 이미지의 스크롤 여부(특성) | scroll |
| background-size | 배경 이미지의 크기 | auto |
| background-origin | 배경 이미지를 스크롤할지 고정할지 여부 | |
| background-clip | 배경의 페인팅 영역을 지정 |
◎background-color
-요소의 배경을 설정
- background-color: 속성값;
*속성값에는 영문키워드(red, blue 등), hex코드(#ffffff 등), rgb(), rgba(), hsl(), hals()를 사용할 수 있음
background-color
◎background-image
-요소의 배경에 하나 이상의 이미지를 삽입
- 이미지 로딩이 실패할 때, 대체 결과물 출력 불가능
- 검색 엔진 색인을 생성하여 검색 시에 노출 안 됨
-디자인적 요소로만 이미지 활용할 때
-콘텐츠와 관련이 없는 이미지일 때
-background-image: url(이미지 경로/주소); (기본값: none)
cf)<img>태그 비교: -이미지 로딩이 실패할 때 alt="대체 메세지"로 대체 결과물 출력 가능
-검색 엔진 색인을 생성하여 검색 시에 노출
-콘텐츠와 관련이 있는 이미지일 때
*URL경로상의 이미지를 끌어오기 위해서는 다음과 같이 경로를 복사함
1. 해당 이미지를 크롬 페이지에서 로딩
2. 개발자 도구를 실행 (F12 혹은 도구 더보기→개발자 도구)
3. 해당 이미지를 클릭하면 소스코드가 나오고 해당하는 이미지에서 Open in new Tab을 클릭하면 URL을 복사할 수 있음
background-image
◎ background-repeat
-배경 이미지의 반복을 설정
-background-repeat: 속성값;
| 속성값 | 의미 | 기본값 |
| repeat | 배경 이미지를 수직, 수평으로 반복 | repeat |
| repeat-x | 배경 이미지를 수평으로 반복 | |
| repeat-y | 배경 이미지를 수직으로 반복 | |
| no-repeat | 반복 없음 | |
| space | 잘리는 것 없이 반복(비율고정, 여백으로 처리) | |
| round | 잘리는 것 없이 반복 (픽셀 비율변경으로 처리) |
background-repeat
◎background-position
-배경 이미지의 위치를 결정
- background-position: x축위치 y축위치;
*공백으로 x축위치, y축위치 구분
-x축 키워드: left, center, right, 수치작성가능(px, %)
-y축 키워드: top, center, bottom, 수치작성가능(px, %)
| 속성값 | 의미 | 기본값 |
| % | 왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100% | 0% 0% |
| 방향 | 방향을 입력하여 위치 설정 top, bottom, left, right, center | |
| 단위 | px, em, cm등 단위로 지정 |
backgound-position
◎background-attachment
-요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정
-background-attachment: 속성값;
*해당 속성이 포함된 박스에 스크롤 할 수 있는 height를 주어서 테스트 가능
| 속성값 | 의미 | 기본값 |
| scroll | 스크롤되면서 이미지가 사라짐 | scroll |
| fixed | 스크롤 시, 이미지가 고정되어 따라다님 | |
| local | 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨, 사용빈도 낮음 |
background-attachment
◎background-size
-배경 이미지의 크기를 지정
- background-size: x축크기 y축크기;
*공백으로 x축위치, y축위치 구분
-x축 키워드: cover, contain, 수치작성가능(px, %)
-y축 키워드: cover, contain, 수치작성가능(px, %)
| 속성값 | 의미 | 기본값 |
| auto | 배경 이미지가 원래의 크기로 표시 됨 | auto |
| 단위 | -px, em, %등 단위로 지정 -width height 형태로 입력가능 (ex. 120px 370px) -width만 입력하면 비율에 맞게 지정됨 |
|
| cover | -배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐(대신 콘텐츠 일부 잘릴 수 있음) | |
| contain | -배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐 -이미지가 잘리지 않음(전체 콘텐츠 표시, 대신 남는 공간 발생 가능) |
background-size
*cf)
1. 이미지의 사이즈를 모를때는 가로 사이즈만 줘서 비율을 유지하는 것이 좋음
2. Cover(사진의 넓은 면을 기준)
3. Contain(짧은 너비를 기준으로 하므로 빈공간이 생기지만 짤리지 않음)
Section7 CSS3 전환&변환
1.전환과 변환
◎Transitions
-CSS 속성의 전환 효과를 지정 - CSS속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션
| 속성값 | 의미 | 기본값 |
| transition-property | 전환 효과를 사용할 속성 이름 ex)width, background | all |
| transition-duration | 전환 효과의 지속시간 설정 | 0s |
| transition-timing-function | 타이민밍 함수 지정 | ease |
| transition-delay | 전환 효과의 대기시간 설정 | 0s |
transition
◎Transition-timing-function
-linear: 처음부터 끝까지 같은 속도
-ease: 느리게 시작하여 점점 빨라졌다가 느리게 끝남
-ease-in: 느리게 시작하여 점점 빨라지다가 일정한 속도에 다다르면 같은 속도를 유지
-ease-out: 일정한 속도의 등속 변화로 시작해서 점점 느려지면서 끝남
-ease-in-out: 느리게 시작하여 느리게 끝남
-cubic-bezier(n, n, n, n): 처음과 끝의 속도를 설정
◎Transition-delay
-CSS속성의 전환 효과를 몇 초 뒤에 시작할지 대기시간을 설정
tansition: 1s 3s;
*duration과 delay를 같이 설정할 수 있음
◎Transfrom
-요소의 변환 효과(모양의 변형)를 지정
| 함수 | 설명 | 사용 예 |
| translate() | 평행 이동 변환 | transform: translate(50px, 100px); |
| rotate() | 회전 변환 | transform: rotate(20deg); |
| scale() | 크기 변환 | transform: scale(2, 3); |
| skewX() | X축 기울기 변환 | transform: skewX(20deg); |
| skewY() | Y축 기울기 변환 | transform: skewY(20deg); |
| skew() | X Y축 기울기 변환 | transform: skew(20deg, 10deg); |
| matrix() | 2차원 행렬 구조 변환 | transform: matrix(1, -0.3, 0, 1, 0, 0); |
translate
◎ transfrom 3D 변환 함수
| 함수 | 설명 | 사용 예 |
| perspective(depth) | 3차원 관점 변환 | transform: perspective(100px); |
| translate3d(x, y, z) | 3차원 평행 이동 변환 | transform: translate3d(50px, 100px, 150px); |
| translateX(x) | 3차원 평행 이동(x축) | transform: translateX(50px); |
| translateY(y) | 3차원 평행 이동(y축) | transform: translateY(50px); |
| translateZ(z) | 3차원 평행 이동(z축) | transform: translateZ(50px); |
| scale3d(x, y, z) | 3차원 크기 변환 | transform: scale3d(2, 2, 2); |
| scaleX(x) | 3차원 크기 변환(x축) | transform: scaleX(2); |
| scaleY(y) | 3차원 크기 변환(y축) | transform: scaleY(2); |
| scaleZ(z) | 3차원 크기 변환(z축) | transform: scaleZ(2); |
| rotate3d(x, y, z, angle) | 3차원 회전 변환 | transform: rotate3d(1, 1, 1, 45deg); |
| rotateX(x) | 3차원 회전 변환(x축) | transform: rotateX(30deg); |
| rotateY(y) | 3차원 회전 변환(y축) | transform: rotateY(30deg); |
| rotateZ(z) | 3차원 회전 변환(z축) | transform: rotateZ(30deg); |
◎transform 3D 변환 함수
| 값(변환함수) | 의미 | 단위 |
| translate3d(x, y, z) | 이동(X축, Y축, Z축) | 단위 |
| translateZ(z) | 이동(Z축) | 단위 |
| scale3d(x, y, z) | 크기(X축, Y축, Z축) | 없음(배수) |
| scaleZ(z) | 크기(Z축) | 없음(배수) |
| rotate3d(x, y, z, angle) | 회전(X벡터, Y벡터, Z벡터, 각도) | 없음, deg |
| rotateX(x) | 회전(X축) | deg |
| rotateY(y) | 회전(Y축) | deg |
| rotateZ(z) | 회전(Z축) | deg |
| perspective(n) | 원근법(거리) | 단위 |
| matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) | 3차원 변환 효과 | 없음 |
transform3D
--------------------------------------------------------------------------------
*CSS 파일 작성 방법
| 1. 초기화 작업 * { margin:0; padding:0; box-sizing:border-box; text-decoration:none; list-style:none; } 2. 주석으로 어느 영역에서 어떤 작업 중인지 표시하기 ex) /* header 영역 시작 */ header { color: red; } header div { ... } /* header 영역 종료 */ 3. 선택자 : 자손선택자를 활용하여 좀 더 구체적으로 부모, 조상 관계 표시하기 header > ul { } header > ul > .box01 { } 4. 큰 레이아웃 태그 단위로 위에서부터 아래로 하나씩 차근차근 css 작업하기. header, nav, section, article, aside, footer 5. 작업 중인 레이아웃 안에서도 정렬(부모) -> 정렬(자기자신) -> 크기 지정 순서대로 작업 후 꾸미기, 요소 |
*웹 프로그래밍 작업 순서
참고사이트)
<아이콘 라이브러리>
Font Awesome
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
*계정 로그인-> your kits-> free kit 주소 복사-> <head>부분에 붙여넣기-> <body>에 적용할 아이콘 <i> 복사해서 붙여넣기
<Dom tree 그리기>
draw.io
Flowchart Maker & Online Diagram Software
Flowchart Maker and Online Diagram Software draw.io is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPMN online, as a circuit d
app.diagrams.net
'프론트엔드 웹프로그래밍 > CSS' 카테고리의 다른 글
| 프로그래밍 언어 활용 12일차 (24/11/26) (0) | 2024.11.26 |
|---|---|
| 프로그래밍 언어 활용 11일차 (24/11/25) (0) | 2024.11.25 |
| 프로그래밍 언어 활용 9일차(24/11/21) (0) | 2024.11.21 |
| 프로그래밍 언어 활용 8일차(24/11/20) (2) | 2024.11.20 |
| 프로그래밍 언어 활용 7일차(24/11/19) (2) | 2024.11.19 |