기본
-
CSS - 애니메이션기본 2022. 2. 15. 18:01
애니메이션 transition transition-duration : 애니메이션 효과 시간 설정 transition-property : 애니메이션 효과를 적용할 프로퍼티 transition-timing-function : 트랜지션 진행별 속도 설정 transition-delay : 트랜지션 시작 시간 지연 transform keyframes transition 시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 의미 transition-duration 트랜지션 진행 시간 지정 .box { width : 100px; height : 100px; background: red; border : 1px solid black; } .duration { /* 트랜지션이 진행되는 시간을 지정하는 속성 (s or..
-
CSS - 레이아웃 스타일(Grid)기본 2022. 2. 15. 17:27
레이아웃 스타일(Grid) 그리드 아이템 너비 - grid-template-columns 그리드 아이템 사이의 여백 - gap 그리드 아이템 높이 - grid-template-rows 칼럼의 시작과 끝 설정 - grid-column, grid-row grid-column과 gird-row 한 번에 설정 - grid-area display : grid grid를 사용하기 위해서 해당 설정을 해줘야 한다. 그리드 아이템 너비 - grid-template-columns 그리드 아이템 너비 한 행당 그리드 아이템을 여러 개 놓을 경우 띄어쓰기로 구분하여 설정 auto 속성을 넣게 되면 화면 페이지의 크기에 맞춰준다. .container { display: grid; /* grid-template-columns ..
-
CSS - 레이아웃 스타일(Flexbox)기본 2022. 2. 15. 15:16
레이아웃 스타일(Flexbox) flex-direction flex-wrap justify-content align-items display : flex 부모 요소에 display : flex 추가 시 수평 정렬 flex-direction row-reverse : 오른쪽에서 왼쪽으로 column : 위에서 아래로 column-reverse : 아래에서 위로 row : 왼쪽에서 오른쪽으로 flex-wrap nowrap : 줄 바꿈 하지 않음 wrap-reverse : 줄 바꿈이 일어남, 아래에서 위로 wrap : 줄 바꿈이 일어남, 위에서 아래로 justify-content flex-end : 오른쪽 맞춤 center : 가운데 맞춤 space-between : 양쪽 끝에 붙이고 균등하게 맞춤 space-..
-
CSS - 레이아웃 스타일기본 2022. 2. 15. 01:54
레이아웃 스타일 width와 height 화면 배치 방법 변경 - display 여백 관련 속성 - padding, margin 배치 관련 속성 - position, top, left, bottom, right 페이지에 특정 속성을 보이거나 보이지 않게 하는 속성 - visivility 페이지 안의 요소들을 순서대로 위로 쌓는 속성 - z-index width와 height 내용(content)이 차지하고 있는 영역의 크기를 조절할 수 있는 속성 고정 크기 가변 크기 display 화면 배치 방법 변경 블럭 요소와 인라인 요소의 속성을 변경하여 배치 방식을 변경할 수 있다. 블럭 요소인 태그를 인라인 요소로 변경 첫 번째 영역 두 번째 영역 세 번째 영역 인라인 요소인 태그를 블럭 요소로 변경 첫 번째 ..
-
-
CSS - 색상 배경 스타일기본 2022. 2. 15. 00:17
색상 배경 스타일 background-color body { /* 색상명 */ background-color: pink; /* RGB(적녹청) */ background-color: rgb(255, 192, 203); background-color: rgba(255, 192, 203, 0.5); /* HSL(색조, 채도, 명도) */ background-color: hsl(350, 100%, 88%); background-color: hsla(350, 100%, 88%, 0.5); /* Hex Code(16진수) */ background-color: #FFC0CB; } background-clip border-box : 테두리까지 배경색이 채워진다 padding-box : 테두리 이전까지 배경색이 채워진다..
-
CSS - 목록 스타일기본 2022. 2. 14. 23:29
목록 스타일 list-style-type - 순서 없는 목록 스타일 list-style-type - 순서 있는 목록 스타일 list-style-position - 목록 기호 들여 쓰기 list-style-image - 기호 대신 이미지 삽입 list-style-type - 순서 없는 목록 스타일 disc : 채운 원 모양, default circle : 빈 원 모양 square : 채운 사각형 모양 none : 모양 없애기 list-style-type - 순서 있는 목록 스타일 decimal : 1로 시작하는 10진수 decimal-leading-zero : 앞에 0이 붙는 10진수 lower-roman : 소문자 로마 숫자 upper-roman : 대문자 로마 숫자 lower-alpha : 알파벳 소문..
-
CSS - 문단 스타일기본 2022. 2. 14. 23:13
문단 스타일 direction text-align line-height direction 텍스트 글자 쓰기 방향 지정 왼쪽에서 오른쪽으로 텍스트를 표시 꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다. 오른쪽에서 왼쪽으로 텍스트를 표시 꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마..