본문 바로가기

HTML + CSS23

CSS - 17. Position - fixed 1. Position - fixed css는 정답이 없지만, 어느 브라우저(크롬, ie, safari)에서 봐도, 어느 디바이스(아이폰, 안드로이드, 탭)에서 봐도, 어느 크기에서 봐도 화면이 이상하게 겹치거나 깨지지 않고 잘 나오도록 신경 써야 하는 것이 바로 css이다. 이제 마지막 position인 fixed를 보겠다. .coupon { position: fixed; right: 0; bottom: 0; background-color: red; color: white; font-size: 20px; } fixed는 말 그대로 고정됐다는 뜻이다. absolute는 relative를 가진 부모가 필요했는데, fixed는 필요없다. fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다.. 2020. 6. 15.
CSS - 16. Position - absolute 1. Position 이제까지 html 코드를 작성하면, 작성한 순서대로 페이지에 그려졌다. CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있다. 예를 들어 index.html에서 코드의 위치는 제일 마지막인데, 페이지에서는 제일 위에 보이게 할 수 있다. position에서 사용하는 값은 4개가 있는데 static은 거의 사용하지 않고, 나머지 3가지들을 사용한다. position: static; position: relative; position: absolute; position: fixed; 2. relative position: relative; 자체로는 특별한 의미가 없다. 딱히 어느 위치로 이동하지 않는다. 위치를 이동시켜주.. 2020. 6. 15.
HTML/CSS - 15. Input 사용자가 직접 텍스트를 입력할 수 있는 Input, Textarea 태그를 다뤄보도록 하겠다. 1. , type, placeholder라는 attribute가 있다. 1. type="text" text를 입력하는 속성이다. 대부분의 input type은 text이다. 어느 텍스트나 입력할 수 있다. 이름, id, 주소, 닉네임 등을 입력받을 때 사용한다. 2. type="password" text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나온다. 만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것이다. 화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있다. 3. type="number" 숫자만 입력할 수 있다. 만약 type="number" 으로 핸드폰 번호.. 2020. 6. 15.
HTML - 14. Table 1. 첫 번째 테이블 목록을 표현했을 때 항상 or 과 의 조합이 필요했듯이, 테이블을 표현하기 위해 여러 태그들의 조합이 필요하다. 조합들은 , , , , , 등이 있다. 테이블은 항상 태그로 감싸 져 있다. 태그 내에 행도 만들고, 열도 만들게 되는 것이다. 한 행을 시작할 때는 로 시작한다. tr은 table row의 줄임말이다. 각각의 셀은 태그 내에 태그를 사용한다. tb는 table data의 줄임말이다. Row 1, column 1 Row 1, column 2 Row 2, column 1 Row 2, column 2 위 코드의 결과 사진이다. 대신에 선은 css에서 추가해 준 것이다. 2. 두 번째 테이블 두 번째 테이블에서는 테이블 열의 제목을 다뤄보겠다. Dog Cat Canine Fel.. 2020. 6. 15.

티스토리툴바