HTML/CSS
1.채팅 말풍선 레이아웃 잡기
말풍선과 날짜를 하단에 붙이면서 나란히 정렬한다display - flex 이용flex-direction좌측 말풍선 : row우측 말풍선 : row-reverse부모 요소에 align-itme-bottom 으로 부모 요소 하단에 하위 요소들 붙게 하기날짜 텍스트에 우측
2.클릭시 이전페이지로 돌아가기
이전 페이지로 돌아가기1: 앞 페이지\-1 : 이전페이지앞 페이지로 이동
3.불투명 배경 위에 모달창 만들기
투명값을 Opacity속성으로 주지 말고rgba값으로 준다background-color: rgba(0, 0, 0, 0.4);(다른 요소 속성 : fixed)fixed : topz-index : 20
4.상하단 고정바 있을 때 내용에 CSS 주는 법
결과 : 중간 내용이 상,하단 바에 가려지지 않고 스크롤된다.
5.툴팁 만들기
어떤 요소 눌렀을 때 안내문구가 뜨게 해보자
6.div 비율 유지되게 하기
aspect-ratio 속성 주면 너비에 맞게 세로가 정해진다사용법aspect-ratio : (가로)/(세로)HTMLCSS
7.텍스트 가로, 세로 중앙정렬하기
텍스트 감싸고 있는 컨테이너에 높이 준다.컨테이너 display속성을 flex로 지정 후 아이템 정렬 속성 준다justify-content : 가로align-items : 세로
8.Position
요소에 좌표값을 주어 이동시켜보자
9.float
박스를 공중에 띄워 가로로 차곡차곡 정렬해보자
10.div 수직 중앙 정렬 방법
block 요소를 수직으로 중앙에 오게 해보자
11.box-sizing
박스 폭 기준 설정하는 법에 대해
12.Pseudo Element
요소 일부에만 스타일을 줘보자
13.Sass 1
css 전처리언어 SASS에 대해 알아보자
14.Sass 2 : Nesting, extend
클래스간 포함관계를 명확히 할 수 있는 Nesting 문법과, 공통되는 속성을 상속하게 할 수 있는 문법인 extend에 대해 알아보자
15.Sass 3. Mixin, use
mixin 키워드 이용하여 클래스를 함수처럼 사용할 수 있는 방법과, 다른 scss파일을 불러오는 방법에 대해 알아본다.
16.HTML video, audio
HTML에 동영상이나 음악을 넣는 법을 알아보자
17.keyframe
정교한 애니메이션 줄 때 사용하는 keyframe에 대해 알아보자