css9 position속성 position은 복잡한 레이아웃을 만들어준다. position: static; position: relative; position: absolute; position: fixed; 📌 relative relative은 기준으로 하고싶은 부모요소에게 적용한다 📌 absolute relative 기준으로 움직인다 (자식요소) 만약 relative가 없으면 body기준으로 움직인다 예시 .a { background-color: lime; height: 100px; width: 100px; } .b { background-color: magenta; height: 100px; width: 100px; } 결과 📌 position 주기 .a 클래스 position:relative; 값을 주고 .b 클래스에는 p.. 2021. 1. 13. Input 에 css 적용하기 input type = "text" placeholder="빈칸" type의 유형 ✔️ text text 입력하는 속성이고 이름, id, 주소, 닉네임 등을 입력 받을 때 사용한다 ✔️ password 입력 시 보여지지않는 보안형태로 처리한다 ✔️ number 숫자만 입력할 수 있다. 만약 핸드폰 번호를 받으려면 "-"는 입력할 수 없다 ✔️ placeholder 도움말을 넣어주는 부분이다. 실제 input에 입력되어있는 텍스트가 아니다. 소개: 소개: 부분은 placeholder가 아니라 텍스트이다. textarea처럼 input에도 미리 값을 세팅해 놓을 땐 value라는 attribute를 사용한다. 디자인 변경 inline, textarea, button은 inline라서 한 줄에 이어서 나온다 .. 2021. 1. 13. Table 테이블은 항상 table 태그로 감싸져있다. table 내에 행,열을 만들 수 있다. 한 행을 시작할 때는로 시작한다. 각 셀은내에서를 사용한다. 1 2 3 4 대신태그를 사용하면 가운데정렬, 글씨 두께가 두꺼워진다! 📌 테이블에 선 추가하기 html에 있는 table 클래스를 css에 추가한다 .border-table th, .border-table td { border: 1px solid black; } 📌 셀 병합하기 나태그에 colspan(열병합), rowspan(행병합) 이라는 attribute를 추가할 수 있다. 1 2 3 4 여기서 "2" 는 2개의 행이나 열을 병합한다는 의미이고 병합을 할 때 병합할나는 따로 쓰지 않아도 된다. 셀 배경색을 지정할 땐 class나 id를 추가하여 css 파.. 2021. 1. 12. flex-direction flex-direction row(default) - 가로선상나열 row-reverse - 가로선상나열되지만 start와end가 바뀐다 column - 세로선상나열 colum-reverse - 세로선상나열되지만 start와 end가 바뀐다 flex의 방향이 column이 된다면 justify-content의 방향도 세로로 align-items의 방향도 가로로 바뀐다 row-reverse 또는 column-reverse를 사용하면 start와 end가 바뀐다 2020. 12. 21. div(3) (display) display는 Flex Container를 정의하며(flex box) container는 item을 감싸는 부모이며 item은 자식이다. 컨테이너와 아이템에 적용하는 속성은 구분되어 있다. 가로속성으로는 justify-content 이 있으며 세로속성으로는 align-content, align-items, align-self 가 있다 📌 justify-content 가로정렬 속성 설정하기 display : flex; 부모요소에 선언후 justify-content : 속성; 선언후 속성 설정 flex-start; 컨테이너의 왼쪽으로 정렬 flex-end; 컨테이너의 오른쪽으로 정렬 center; 컨테이너 가운데로 정렬 space-between; 시작 요소는시작점, 마지막 요소는 마지막에 정렬되고 그사이 .. 2020. 12. 9. div(2) div의 크기만큼 body가 생긴다. 웹브라우저에서 f12를 눌러 확인해보면 body에 보라색 만큼의 margin: 8px; 만큼 들어가있다. 이것은 디폴드 값이며 문제해결을 위해서는 body {margin:0 } 을 주면된다. margin은 상하좌우에 줄 수 있다. 값이 하나면 사방에 적용되며 두개면 상하, 좌우에 적용된다 2020. 12. 8. 이전 1 2 다음
