Home

Blogger - CSS Links

기초
  1. CSS를 HTML에 적용시키는 방법
  2. CSS 스타일 기초 문법
  3. 전체 선택자, 타입 선택자, 속성 선택자
  4. 아이디 선택자, 클래스 선택자
  5. 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자
  6. 가상 요소
  7. 가상 클래스
  8. 가상 요소와 가상 클래스 순서
  9. :nth-child(), :nth-last-child()
  10. 상속(inheritance)
  11. 변수(variable)
  12. !important - 속성 값이 적용이 되지 않을 때
  13. calc() - 괄호 안의 식을 계산한 결과를 속성값으로 사용하는 방법
글자 꾸미기
  1. font-family / 글꼴 바꾸는 방법
  2. 구글 웹폰트 사용하는 방법
  3. color / 글자 색 바꾸는 방법
  4. font-size / 글자 크기 바꾸는 방법
  5. font-style / 글자 모양 바꾸는 방법
  6. font-variant / 소문자를 작은 대문자로 바꾸는 방법
  7. font-weight / 글자 굵기 바꾸는 방법
  8. text-shadow / 글자에 그림자 효과를 주는 방법
  9. text-decoration / 선으로 텍스트를 꾸미는 방법
  10. text-transform / 모든 글자를 대문자 또는 소문자로 바꾸는 방법
  11. letter-spacing / 글자 사이 간격
  12. quotes / 인용문의 기호를 꾸미는 방법
  13. 인용문(Blockquote) 꾸미는 방법
  14. 링크가 걸린 글자 꾸미는 방법
  15. em 단위와 rem 단위의 차이점
  16. 짧은 밑줄 만드는 방법
  17. 마우스로 드래그했을 때 배경색, 글자색 바꾸는 방법
  18. 세로 가운데 정렬하는 방법
문단 꾸미기
  1. text-align / 문단 정렬하는 방법
  2. text-indent / 들여쓰기, 내어쓰기 하는 방법
  3. line-height / 줄 높이 바꾸는 방법
  4. word-spacing / 단어 사이 간격
  5. columns / 문단을 다단으로 만드는 방법
  6. overflow / 내용이 밖으로 벗어났을 때 처리 방법
  7. white-space / 줄바꿈, 공백 처리 방법
  8. word-break / 줄바꿈을 단어 기준으로 할지, 글자 기준으로 할지 정하기
  9. 하이픈(hypen) - 에서 자동 줄바꿈이 되는 경우 처리 방법
표 꾸미기
  1. 표 정렬하는 방법
  2. 표의 크기 정하는 방법
  3. 표의 배경색 정하는 방법
  4. border / 표 테두리 만드는 방법
  5. border-collapse / 표 테두리와 셀 테두리 사이의 간격 없애기
  6. border-spacing / 표 테두리와 셀 테두리 사이의 간격의 크기 정하기
  7. caption-side / 제목이나 설명의 위치를 정하는 방법
  8. empty-cells / 비어있는 표의 테두리 숨기는 방법
  9. table-layout / 표 크기 고정시키는 방법
  10. display 속성으로 표 만드는 방법
  11. 표나 이미지에 스크롤바 생길 때 레이아웃 수정 방법
목록 꾸미기
  1. ul, ol 가운데 정렬하는 방법
  2. list-style-type / 목록 앞의 마커 모양 정하는 방법
  3. list-style-position / 목록의 마커 위치 정하는 방법
  4. list-style-image / 목록의 마커로 이미지 사용하는 방법
박스 꾸미기
  1. 박스 모델(Box Model)
  2. margin / 바깥 여백
  3. padding / 안쪽 여백
  4. box-shadow / 박스에 그림자 효과 만드는 방법
  5. box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지 정하기
  6. border / 박스 테두리 만드는 방법
  7. border-radius / 테두리 둥글게 만드는 방법
  8. border-style / 테두리 모양을 정하는 방법
  9. z-index / 요소의 수직 위치 정하는 방법
  10. 체크박스와 라벨(label) 글자의 높이 조절하는 방법
  11. 버튼 사이즈 조절하는 방법
  12. 체크박스 꾸미는 방법
배경 꾸미기
  1. background-attachment / 배경 이미지 고정하고 스크롤하는 방법
  2. background-clip / 배경색을 어느 영역부터 채워나갈지를 정하기
  3. background-color / 배경색을 정하는 방법
  4. background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하기
  5. background-position / 배경 이미지의 위치를 지정하는 방법
  6. background-repeat / 배경 이미지 반복하는 방법
  7. background-size / 배경 이미지의 가로 세로 크기
  8. linear-gradient / 선형 그라데이션 효과
  9. radial-gradient / 원형 그라데이션 효과
  10. 배경 이미지 투명하게 만드는 방법
  11. 내용을 투명하게 만드는 방법
  12. 동영상을 배경으로 사용하는 방법
  13. 마우스로 드래그했을 때 배경색, 글자색 바꾸는 방법
이미지 꾸미기
  1. 이미지 버튼 만드는 방법
  2. 모바일을 위한 이미지 가로 세로 비율 맞추는 방법
  3. 이미지 위에 텍스트 정가운데에 넣는 방법
  4. 이미지 가운데 정렬하는 방법
  5. 이미지의 특정 부분만 보이게 하는 방법
  6. 세로 가운데 정렬하는 방법
  7. 이미지에 마우스 올렸을 때 확대하는 방법
애니메이션
  1. animation / 애니메이션
  2. transition / 속성을 서서히 변화시키는 방법
  3. transform / translate – 이동 효과 주는 방법
  4. transform / rotate - 회전 효과 주는 방법
  5. transform / scale – 확대, 축소 효과 주는 방법
  6. transform / skew – 비틀기 효과 주는 방법
  7. transform-origin – 기준점 설정하는 방법
  8. perspective - 3D 입체 효과, 원근감주는 방법
  9. perspective-origin – 기준점 설정하는 방법
  10. backface-visibility / 뒷쪽에서 앞면이 보이게 하는 방법
Flex
  1. display / 플렉스 적용하는 방법
  2. flex-direction / 아이템의 배열 방향 정하는 속성
  3. flex-wrap / 아이템 한 줄 또는 여러 줄로 배열하는 방법
  4. justify-content / flex-direction 속성으로 아이템의 정렬 방향 정하는 방법
  5. align-content / flex-wrap 속성으로 아이템들을 정렬하는 방법
  6. align-items / 아이템의 교차축 정렬 정하는 속성
  7. align-self / 특정 아이템의 교차축 정렬 정하는 속성
  8. order / 순서 정하는 방법
Grid
  1. display / 그리드 적용하는 방법
  2. grid-template-columns / 행의 갯수 설정하는 방법
  3. grid-template-rows / 열의 갯수 설정하는 방법
  4. grid-auto-rows / 행 높이 같게 만드는 방법
  5. grid-column-gap, grid-row-gap, grid-gap / 그리드 사이의 간격 정하는 방법
  6. order / 순서 정하는 방법
  7. 실전 예제 / 높이가 같은 박스 만들기