CSS 12. 변형관련 스타일
2022. 12. 13. 22:18
Front/CSS
transform 1. 상하,좌우, 대각선으로 움직이기 : translateY | translateX | translate(x,y) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 2. 가로,세로, 전체 확대 축소 : scaleX | scaleY | scale(x,y) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 3. 지정한 각도만큼 가로,세로,전체 뒤틀기 : skewX | skewY | skew(x,y) -> 단위 deg HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 4. 지정한 각도만큼 회..
CSS 11. 레이아웃 관련 스타일 (2)
2022. 12. 12. 17:26
Front/CSS
배치 관련 스타일 position : 상대위치 (relative)와 절대위치(absolute) >> 부모 요소에 position:relative 로 세팅, 이동하고자하는 요소에 position:absolute top: 거리(px) left:거리(px)로 설정 첫번째자식 두번째자식 세번째자식 HTML 삽입 미리보기할 수 없는 소스 position : 고정위치 (fixed) HTML 삽입 미리보기할 수 없는 소스 z-index : 요소들을 순서대로 위로 쌓는 속성 요소1 요소2 요소3
CSS 10. 레이아웃 관련 스타일(1)
2022. 12. 12. 17:21
Front/CSS
블럭요소 : 한줄로 영역 차지하고 있는 요소 / 줄바꿈 발생 ( div, p, pre, h1~h6) 인라인 요소 : content부분만 영역을 차지하고있는 요소 / 옆으로 배치 ( span, label. input, image, 글자관련태그..) * 요소의 크기 : content 영역 + padding 영역 +border 영역 margin영역 (요소의 바깥쪽 영역) 레이아웃 관련 스타일 - width, height : 기본적으로 내용을 차지하는 content 영역의 가로, 세로 길이를 조절하는 스타일속성 고정크기 (px) HTML 삽입 미리보기할 수 없는 소스 가변 크기 (%) - 화면의 크기에 따라 변경 HTML 삽입 미리보기할 수 없는 소스 - display : 화면 배치 방법 변경 선택자 { dis..
CSS 09. 배경 관련 스타일
2022. 12. 12. 17:07
Front/CSS
배경 관련 스타일( background-) background-color : 배경색 지정시 사용 나는 라이너 묻힌 있습니다. 다하지 계집애들의 차 이국 듯합니다. 새겨지는 비둘기, 불러 프랑시스 봅니다. 별빛이 가을 부끄러운 쓸쓸함과 지나고 어머님, 봅니다. 하나에 많은 이 봅니다. 까닭이요, 나는 내 않은 이름과 아이들의 까닭입니다. 자랑처럼 별 속의 말 있습니다. HTML 삽입 미리보기할 수 없는 소스 background-clip : 배경을 적용시키고자 하는 범위 지정할 때 사용 선택자{background-clip : border-box(기본값) | padding-box | content-box;} 이름과, 이 어머님, 딴은 우는 아스라히 흙으로 계십니다. 애기 아직 걱정도 내 가슴속에 청춘이 보고,..
CSS 08. 테두리 관련 스타일
2022. 12. 12. 16:58
Front/CSS
테두리 관련 스타일(border-) 선택자 { *테두리 스타일 border[-위치]-style : none | dotted | dashed | solid | double | groove | ridge | inset| outset; *테두리 두께 border[-위치]-width : 테두리두께; *테두리 색상 border[-위치]-color : 테두리색상; *테두리두께, 스타일, 색상을 한큐에 지정 border[-위치] : 두께 스타일 [색상]; *테두리 모서리 둥그스름하게 border[-상하위치-좌우위치]-radius :숫자; *박스의 그림자 효과 box-shadow : 가로거리(x) 세로거리(y) 흐림정도 번짐정도 색상 ; } 로그인 HTML 삽입 미리보기할 수 없는 소스
CSS 07_ 영역 관련 스타일
2022. 12. 12. 16:42
Front/CSS
여백 및 간격 관련 스타일 요소 영역 == content (내용물) + padding (여백) + border(테두리) * padding : content 영역과 border영역 사이의 거리(여백)을 조절하는 스타일 속성 기준 div 기준 div padding 컨텐츠영역 컨텐츠영역 컨텐츠영역 HTML 삽입 미리보기할 수 없는 소스 * margin : 타요소 간의 간격을 띄워주고자 할 때 사용 컨텐츠영역 컨텐츠영역 컨텐츠영역 HTML 삽입 미리보기할 수 없는 소스
CSS 06. 목록 관련 스타일
2022. 12. 12. 16:36
Front/CSS
목록 관련 스타일(list-) list-style-type : 불릿 기호 변경 list-style-image : 불릿기호로 이미지 적용 list-style-position : 불릿기호의 위치를 조정할때 사용 *순서 없는 목록 (ul) 선택자{ list-style-type : disc | circle | square | none; list-style-image : url("적용시키고자 하는 이미지의 경로"); list-style-position : inside | outside(기본값); } *순서 있는 목록(ol) 선택자{ list-style-type : decimal | decimal-leading-zero(숫자앞 0붙여줌); list-style-type : lower-alpha | upper-alph..
CSS 05. 텍스트 관련 스타일
2022. 12. 12. 16:26
Front/CSS
텍스트 관련 스타일 ( text- ) color : 텍스트의 색상지정 선택자 { color : 색상명 | 16진수 | rgb(x,x,x) | rgba(x,x,x,x) | hsl(x,x,x) | hsla(x,x,x,x) } (hue 색상, saturation 채도 , lightness 밝기) text-decoration : 텍스트에 줄을 긋거나 기존의 줄을 없얼때 사용 선택자{text-decoration : none | underline | overline | line-through;} 텍스트 영역 아래 줄 긋기 텍스트 영역 중간에 줄 긋기 텍스트 영역 위에 줄 긋기 네이버로 HTML 삽입 미리보기할 수 없는 소스 text - transform : 영문텍스트의 대소문자 변환시 사용 선택자{ text-tra..
CSS 04. 글꼴관련 스타일
2022. 12. 9. 20:17
Front/CSS
1. font-family : 글꼴을 지정할때 사용 선택자{font-famliy : 글꼴명, 글꼴명, ...} font 테스트1 HTML 삽입 미리보기할 수 없는 소스 * 외부 웹 폰트 사용하는 방법 웹폰트 제공 사이트 : http://www.fonts.google.com 글꼴 테스트 Font Style Test HTML 삽입 미리보기할 수 없는 소스 2. font-size : 글꼴의 크기를 변경할 때 사용 선택자{font-size : 크기(px| em| %)} px : 고정크기 / em,%: 가변 크기 ( 상위글꼴 대비) 고정크기 px테스트 가변크기 em테스트 가변크기 %테스트
CSS 03. 선택자 우선순위
2022. 12. 9. 17:40
Front/CSS
선택자 우선순위 기본적으로 CSS는 위에서 부터 아래로 적용 ( 마지막에 작성된 스타일이 반영) 단, 동일한 요소를 다양한 선택자로 스타일을 부여했을 경우 작성순서에 관계없이 우선순위에 따라 적용 태그 선택자-> 클래스 선택자-> 아이디 선택자 -> 인라인스타일방식 -> !important 우선순위 테스트 HTML 삽입 미리보기할 수 없는 소스