본문 바로가기
728x90
반응형

Coding With Jina154

[CSS] Flex 완벽 정리 후후 이제 확실하게 알았다!!!! flex - 적용하고자 하는 자식 element의 부모 element에 적용할 것 justify-content : (가로) flex-start 요소들을 컨테이너의 왼쪽으로 정렬 default flex-end 요소들을 컨테이너의 오른쪽으로 정렬 center 요소들을 컨테이너의 가운데로 정렬 space-between 요소들 사이에 동일한 간격을 둠 space-around 요소들 주위에 동일한 간격을 둠 aglin-items : (세로) flex-start 요소들을 컨테이너의 꼭대기로 정렬 flex-end 요소들을 컨테이너의 바닥으로 정렬 center 요소들을 컨테이너의 세로선 상의 가운데로 정렬 baseline 요소들을 컨테이너의 시작 위치에 정렬 stretch 요소들을 컨.. 2020. 5. 17.
[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.
[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.
728x90
반응형

티스토리툴바