CSS 강좌
- 기초
- 선택자
- 글자 꾸미기
- 문단 꾸미기
- 표 꾸미기
- 목록 꾸미기
- 박스 모델
- 박스 모델(Box Model)
- margin / 바깥 여백
- padding / 안쪽 여백
- box-shadow / 그림자 효과
- box-sizing / 박스 크기 정하는 기준
- border / 테두리
- border-radius / 테두리 둥글게
- border-style / 테두리 모양
- background-attachment / 배경 이미지의 스크롤 가능 여부
- background-clip / 배경을 어디에 넣을지 정하는 속성
- background-color / 배경 색
- background-image / 배경 이미지
- background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성
- background-position / 배경 이미지의 위치를 정하는 속성
- background-repeat / 배경 이미지 반복 여부 정하는 속성
- background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성
- 선형 그라데이션 효과 만들기
- 원형 그라데이션 효과 만들기
- 배경색만 투명하게 만들기
- z-index / 요소의 수직 위치 정하는 속성
- overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성
- 양식 꾸미기
- 레이아웃 만들기
- 애니메이션
- Flex
- Grid
- 실전 예제
- CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우
- 인용문(Blockquote) 꾸미기
- display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법
- counter-reset, counter-increment로 일련 번호 붙이기
- CSS로 드롭다운(Dropdown) 메뉴 만들기
- max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기
- 세로 가운데 정렬하는 방법
- 짧은 밑줄 만들기
- 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기
- 이미지 위에 텍스트 정가운데에 넣기
- 이미지 가운데 정렬하는 방법
- 동영상을 배경으로 사용하는 방법
- 마우스 오버 효과 / 이미지 확대
- 마우스 오버 효과 / 다른 이미지 보여주기
- 마우스 오버 효과 / 서서히 길어지는 선 그리기
- position의 값이 fixed일 때 가운데 정렬하는 방법
- 도형 만들기 / 삼각형
- 도형 만들기 / 마름모
- 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법
- 양쪽 배분(균등 분할) 정렬 방법
- 구분선 만들기
- display 속성으로 표 만들기 - table, table-row, table-cell
- 마우스 오버 시 텍스트 나오게 하는 방법
- 유튜브 동영상 반응형으로 삽입하는 방법
- float와 overflow
- 미분류
- Reference
- align-content
- align-items
- align-self
- animation
- backface-visibility
- background-attachment
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-collapse
- border-radius
- border-spacing
- border-style
- box-shadow
- box-sizing
- calc
- caption-side
- clip
- color
- columns
- content
- font-family
- font-size
- font-style
- font-variant
- font-weight
- empty-cells
- flex-wrap
- flex-direction
- grid-auto-rows
- grid-column-gap
- grid-gap
- grid-row-gap
- grid-template-columns
- grid-template-rows
- justify-content
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- margin
- opacity
- overflow
- padding
- quotes
- table-layout
- tab-size
- text-align
- text-decoration
- text-indent
- text-shadow
- text-transform
- transform
- transition
- white-space
- word-break
- word-spacing
- word-wrap
- z-index