본문 바로가기

CSS3

[TIL] 엘리스 SW 엔지니어 트랙 2기 day 04 ✏️ Today I Learned (2022.04.07) 📖 온라인 강의 움직이는 웹사이트 제작 반응형 웹사이트 제작 📝 움직이는 웹사이트 제작 1. Transform rotate, scale 1 2 3 4 5 6 .transition { transfrom: rotate(45deg); /* 회전 */ transform: scale(2,3); /* 확대 축소 */ } Colored by Color Scripter cs .rotate(angle): 입력한 각도만큼 회전하며, 음수도 입력 가능 .scale(x, y): 숫자는 비율의 의미하며 width를 x배, height를 y배 만큼 확대 skew, translate 1 2 3 4 5 6 .transition { transform: skew(10deg, 20.. 2022. 4. 10.
[TIL] 엘리스 SW 엔지니어 트랙 2기 day 03 ✏️ Today I Learned (2022.04.06) 📖 이론 강의 개발자로서 가져야 하는 마음가짐 HTML 반찬 📝개발자로서 가져야 하는 마음가짐 공부는 점점 재미없어진다.(변화의 차이 때문) 내가 하는 공부, 개발이 웅덩이에서 바다가 되었기 때문이다.(슬럼프 X) 프로젝트를 미루지 마라, 현지식으로도 충분히 많은 것을 할 수 있다. 📝CSS 2일 차 온라인 강의랑 겹치는 이론은 생략! : 주석 CSS이용법 중 인라인 스타일 방식은 별로 인라인 요소 vs 블록 요소 margin 겹침 현상이 일어나면 오버랩되어서 더 큰 값으로 렌더링 Grid( 두 방향(가로-세로) 레이아웃 시스템(2차원)) .container{ display: grid;} :그리드의 시작 grid-template-rows : 행(r.. 2022. 4. 10.
[TIL] 엘리스 SW 엔지니어 트랙 2기 day 02 ✏️ Today I Learned (2022.04.05) 📖 온라인 강의 웹사이트의 정보와 디자인 웹사이트 레이아웃에 영향을 미치는 요소 📝웹사이트의 정보와 디자인 **앞부분이랑 중복되는 부분은 생략했다 웹을 구성하는 요소 웹 구성 요소 웹 제작 시 고려 사항 웹 표준: 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격 웹 접근성: 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식 크로스 브라우징: 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법 태그: paragraph의 약자로 본문 내용을 표현합니다. See the Pen Untitled by 조재홍 (@h0ng95) on CodePen. 웹사이트의 중요 정보를 담는 태그로, 나타내고자 하는 내용을 열린 태.. 2022. 4. 7.