본문 바로가기

분류 전체보기77

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.
HTML/CSS - 13. List 1. List 목록을 표현하는 태그는 이다. List Set HashMap (Dictionary) Queue Stack Tree Sorting Search 목록에서 List, Set, HashMap, Search까지 목록 아이템 하나하나를 태그로 감싸주고 목록 전체를 태그로 감싸준다. 은 ordered list라는 의미이다. 을 쓸 경우 안에 있는 목록들 앞에 자동으로 numbering을 해준다. 그 반대인 태그도 있다. 태그는 unordered list라는 의미로, 숫자 없는 목록(굵은 점)을 표현해준다. 여기서 주의할 점은 아무 스타일도 넣고 싶지 않다고 태그만 사용해서는 안된다. 목록은 항상 이나 태그로 감싸야한다. ul의 굵은 점이 마음에 들지 않는다면 css를 적용하여 삭제할 수도 있다. 삭제하.. 2020. 6. 15.
CSS - 12-1. margin auto 1. 레이아웃 div { background-color: yellow; margin-bottom: 20px; } .has-width { width: 150px; } inline, block 성질을 앞에서 다뤘는데 거기에 더해 margin의 값(설명)을 하나 더 추가하겠다. block 속성은 원래 좌우 끝 다 차지하는데 width가 부여되면 늘어나지 않게 된다. 이때 margin에 auto로 설정하면 가로 중앙에 오게 할 수 있다. .center { margin: 20px auto; } 이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고 두 번째는 왼쪽, 오른쪽에 주는 margin이라는 뜻이다. 위 코드에서 처럼 왼쪽, 오른쪽을 auto로 설정할 경우 좌우의 나머지 공간을 균등하게.. 2020. 6. 14.