728x90 반응형 전체 글220 [CSS] Flex flex - padding이나 margin 없이 엘리먼트의 포지션을 이동시키고 정렬할 수 있음 - 적용하고자 하는 엘리먼트의 부모 엘리먼트에만 작성해야함 속성 의미 display Flex Container를 정의 flex-flow flex-direction와 flex-wrap의 단축 속성 주축 여러줄 묶음 flex-direction Flex Items의 주 축(main-axis)을 설정 flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정 justify-content 주 축(main-axis)의 정렬 방법을 설정 align-content 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) align-items 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄.. 2020. 5. 15. [후기] 노마드코더 Vanilla JS 챌린지 3기 2020년 4월 20일부터 5월 3일 2주 동안 노마드코더 바닐라 자바스크립트 챌린지 3기에 참여했다. 바닐라 자바스크립트 강의를 듣고 이메일로 주어지는 데일리 과제를 제출하는 것이었는데 첫날 이메일로 역대 최대 참여자가 모였다고..ㅎㄷㄷ 하지만 졸업하기는 힘들 거라는 말에 다들 무료이다 보니 가볍게 생각하나 보다고만 생각했다.(하지만 그건 큰 오산이었음💀) 하루 이틀은 가벼운 객관식 과제여서 수업을 열심히 듣고 과제도 금방 끝낼 수 있었다. 하지만 코드 과제가 있는 날부터 나는 밤을 지새울 수밖에 없었다. 니꼬쌤 이 사람의 정체가 궁금할 정도로 수업의 난이도와 과제의 난이도는 달랐다. (물론 한참 부족한 나만 그런 것 같기도 했지만..ㅠ) 점점 갈 수 록 꾀나 어려운 응용문제가 주어졌고 정말 슬랙의 같.. 2020. 5. 15. [CSS] vertical-align 수직정렬 vertical-align inline 요소와 inline-block 요소를 수직정렬할때 사용 파란색 박스와 노란색 박스가 빨간색 박스 밑으로 수직정렬을 하고 싶을때 사용하면 이렇게 수직 정렬이 된다! 단, 파란색과 노란색 박스 둘 다에게 적용해야함 .box { display: inline-block; height: 100%; vertical-align: top; } 2020. 5. 14. [CSS] Position & Display position : static || fixed || relative || absolute static - default 값 fixed - 고정(스크롤을 내려도 따라내려옴) relative - 상대배치 - 부모 element에 적용 - 자식 element에 absolute를 설정해주면 부모 element안에 자식 element이 위치하게 됨 absolute - 절대배치 - 자식 element에 적용 - 포지션 relative에 상대적으로 포지션을 잡는 것 - 부모 element 에 relative가 설정되어 있지 않으면 absolute로 설정된 element는 body에 맞춰 포지션됨 display : inline || block || inline-block || none inline - 다른 css 요.. 2020. 5. 14. [CSS] Box Model 쉬운 정리 Box Model padding : 20px 15px; 상하 → 20px 좌우 → 15px padding : 10px 20px 40px 12px; 상 → 10px 우 → 20px 하 → 40px 좌 → 12px (시계방향) 2020. 5. 14. [HTML] HTML의 자동완성기능 Emmet 며칠 전 강의를 듣다가 완전 쿨한 기능을 보았기에 잘 배웠다가 써먹으려고 한다 이런 거 잘 쓰면 뭔가 멋있어 보이고 편하고 아주 좋으니까ㅎㅎ Emmet 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 주는 플러그인 1) > 는 자식요소를 가진 구조를 생성할 수 있다. div>ul>li*3을 입력하면 이렇게 자동으로 코드가 생성됨(완전 멋지다😍) 2) + 는 형제요소를 가진 구조 즉 각각의 엘리먼트 생성 가능 div+a+p를 입력하면 이런 Emmet 문법이 엄청 많지만 일단은 오늘 배운 것만 적어두고 하면서 배운것들 다시 더 적어놓은 예정 3) ul>li*5>a{$}를 입력하면 이렇게 숫자도 생성이 가능하다. 1 2 3 4 5 2020. 5. 14. 이전 1 ··· 29 30 31 32 33 34 35 ··· 37 다음 728x90 반응형
