| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- 서버의 의미
- 프로토콜이란
- 코드펜 안되는 이유
- 반응형 웹
- 반응형 정사각형
- 에디터 사용법
- 코드펜 복사해도 안되는 이유
- 정보처리기능사 필기
- 서버 뜻
- 정보처리기능사 준비
- ck editor 사진 넣는법
- 정보처리기능사 따는법
- 앵귤러 명령어
- 터미널에서 angular project 생성
- 프로토콜 뜻
- ck editor 사진
- 정보처리기능사
- 코드펜
- 에디터 api
- 글 에디터 넣는법
- 코드펜 옮겨오는 법
- ck editor 이미지 업로드
- 앵귤러 터미널 명령어
- 정보처리기능사 필기 준비
- 터미널 명령어
- 무료 에디터 사용법
- CK Editor
- 서버란 무엇인가
- 프론트엔드 용어
- angular 터미널
- Today
- Total
목록CODE/css (3)
멋진 개발자가 되고 싶어
반응형 정사각형으로 만들고 싶은 부분(.square)에 아래와 같이 스타일을 적용하면 된다. .square { background-color: #0f6674; width: 100%; } .square:after { content: ""; display: block; padding-bottom: 100%; } 자세하게 알고 싶다면 아래의 코드펜을 참고하면 된다. See the Pen Responsive Square by bbungbbun (@bbungbbun) on CodePen.
반응형 웹을 만들면 이미지의 크기가 웹의 크기에 따라 달라지는 경우가 생긴다. 이때 이미지 크기에 따라 태그의 개수를 다르게 표시할 수 있는 방법이다. 그러니까 이미지의 가로 크기만큼 태그가 잘리지 않는 선에서 최대한으로 보일 수 있는 방법이다. .....나도 설명하면서 뭔말인지 모르겠다. 그래서 미흡한 설명을 한눈에 확인할 수 있도록 codepen으로 준비해봤다. 아래의 코드펜 창을 통해 바로 확인할 수 있다. 추가로 설명하자면 box 아래에 태그를 감싸는 tags라는 클래스의 div가 존재하고, 이 안에는 태그 100개가 들어가 있다. 그 아래에는 박스의 넓이를 조절할 수 있는 range type의 input이 존재한다. See the Pen How to hide tags by bbungbbun (@..
See the Pen Untitled by bbungbbun (@bbungbbun) on CodePen. CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io background-size: cover / contain은 사진이나 gif만 적용된다. 하지만 이런 기능을 영상에도 적용하고 싶을 때가 분명 존재한다. 그럴 때는 어떻게 해야하는가? 결론! 적용하고 싶은 영상에 object-fit : cover / contain으로 적용하..