'코딩 연습/HTML&CSS'에 해당되는 글 6건

강의를 따라 만든 블로그에서 혼자서 새로운 기능 추가하기

• 원하는 기능: Django Admin에서 카테고리를 선택하는 것을 폼을 통해 만들고 싶었다
  

HTML Form 요소들 중에 <select> 요소 사용하기

• HTML Form 요소들을 확인해볼 수 있다. (https://www.w3schools.com/html/html_form_elements.asp)
  

• <select> 요소를 사용하면 drop-down list 형태로 만들 수 있다.

• selected 속성은 옵션을 우선 선택해놓게 한다. 나의 경우 "Category"를 지정했다.

• disabled 속성은 해당 옵션이 사용되지 않도록 한다. 따라서 "Category"는 타이틀 역할이다.
  

• 완성된 모습이다. 기본값처럼 Category가 보이지만 옵션을 disabled한 상태이므로 실제로 선택은 되지 않는다.

input 태그 안에 value 속성을 사용하면 된다.

속성 값으로는 이미 데이터베이스에 저장된 데이터를 지정한다.

Grid system은 웹페이지를 12개의 열로 나누어서 활용하게 만든다.

<div class="col-sm-6 col-sm-offset-3">에서

col-sm-offset-3은 3개 열을 상쇄시켜서 가운데 정렬을 할 수 있도록 한다.

양옆 3칸을 비워두고 가운데 6칸에서 데이터를 매핑하게 된다.

<div class="col-sm-4">는

총 12개 칸 중에 4칸을 사용해서 이름과 주소를 매핑하는데,

for문을 통해 순차적으로 다른 데이터도 매핑되므로 4칸씩 자리를 차지하게 된다.

3번 연속으로 4칸을 차지하면 12칸이 되므로 그 다음 데이터는 아랫줄로 이어서 출력하게 된다.

퍼센테이지(%)로도 사이즈 크기를 조절할 수 있다.

데이터만 주줄이 나열되면 가독성이 떨어지고 볼품 없어 보인다.

표형식으로 깔끔하게 정리해서 보이도록 <table> 태그를 사용한다.

우리가 평소 쓰는 표가 <table>이라고 보면 된다. 대신 줄과 칸을 입력하려면 수작업이 요구된다.

<tr>은 표에서 "줄"역할을 한다. 첫번째 줄에 캐릭터 이름이 들어간 것이다.

<th>는 해당 줄의 "데이터 제목"에 해당한다. 강조 효과를 주기 위해 bold 처리가 된다.

<td>는 "칸"역할로 데이터가 표시된다.

완성된 형태는 아래와 같다

연습삼아 하나 더 만들어보자.

다음 테이블은 아래와 같다