본문 바로가기
반응형

분류 전체보기43

[mobile-nav] 클릭, accordion menu 예제 2022. 2. 12.
[css속성] grid 파헤쳐보자! flex - 1차원 레이아웃(한방향) grid - 2차원 레이아웃(두방향, 가로세로) [참고] flex 속성 [css속성] flex 완벽 정복해보자 block 과 inline-block, float 을 쓰던 나는...고인물이였구나ㅋㅋ 편하게 레이아웃을 잡아보자. flexbox는 flex-container(부모요소) 안에 flex-item(자식요소)들이 있다. 각 속성마다 예제를.. shadesign.tistory.com ▶ grid-container (컨테이너) 적용 속성 ◾ display: grid ◾ gird-template-columns //열배치(가로), 여러단위사용가능 gird-template-rows //행배치(세로) ex) gird-templa.. 2022. 1. 28.
[css속성] flex 완벽 정복해보자 block 과 inline-block, float 을 쓰던 나는...고인물이였구나ㅋㅋ 편하게 레이아웃을 잡아보자. flexbox는 flex-container(부모요소) 안에 flex-item(자식요소)들이 있다. 각 속성마다 예제를 만들어봤는데 보면 쉬울것!(참고하시오) ▶ flex-container (컨테이너) 적용 속성 ▶ flex-item (아이템) 적용 속성 • display : flex; *예제 더보기 .container{ display:flex; /* display:inline-flex; */ - 인라인블럭과 비슷 } • flex-direction *예제 //배치방향설정 • flex-wrap *예제 //줄바꿈 설정 • flex-flow *예제 // flex-direc.. 2022. 1. 27.
[front-end] Roadmap 프론트엔드 로드맵 1. Basic tools (개발툴설정 - intelliJ, vscode 사용) 브라우저 - chrome , safari , firefox , edge 등 2. front-end (만듬) HTML(태그, 페이지구조, 시멘틱태그사용, SEO(★)) CSS(스타일링, 레이아웃(그리드,플랙스 등), 미디어쿼리, 에니메이션) Architecture(이름) 전처리기능(Sass, Less, PostCSS) CSS Framework(Bootstrap - 프레임워크) JavaScript(★) - a. 문법공부 b. 다양한 APIs 공부 변수(let,const) 조건문(if, for, switch, while) 함수(function) 객체(object) 자바스크립트특징공부 - Prototype(프로트타입), Hostin.. 2022. 1. 26.
참고도서 : REFACTORING 2 리팩터링 2판 (개정판) 참고(1판-자바) 2판 - 자바스크립트 15가지 챕터 1-4 챕터 예제 + 리팩토링이 무엇인가, 접근법 5-12 전반적인 테크닉(코드잘작성하는법 알수있음) 13-15 실제, 시간 할당, 프로젝트 참고 시간이 날때 읽어보겠다^*^ 2022. 1. 26.
[jsfiddle] 티스토리 적용 (+더미이미지사용) 1. jsfiddle 사이트 접속 https://jsfiddle.net/ JSFiddle - Code Playground jsfiddle.net 2. 로그인- 코드작성 - Run - Save - Embed 3. 티스토리 기본모드 -> HTML모드 전환후 코드 복붙 (+더미이미지사용) https://placeimg.com/ PlaceIMG | Easy FPO and Dummy Images for Any Project placeimg.com 2022. 1. 22.
728x90
반응형

티스토리툴바