좋은 웹디자인이란?
- 기획 → 디자인이 아니다. → 어떤식으로 건물을 만들지, 건물에 대한 이름을 붙이고, 건물의 동선을 짜는 행위 → 이 기획에 맞춰서 나온게 디자인
- 컨벤션 → 팀원들끼리 규칙을 정하는 것 ⇒ 코드 작성 규칙은 코드 컨벤션이라고 한다.
<InLine / Block>
- html 태그는 두가지 1. 인라인 속성 : 자기 크기만큼만 사이즈를 확보한다. (ex. span) 2. block 속성 : 행을 통째로 잡는다. (ex. div)
1. span은 대표적인 인라인
2. div는 블락
[헤딩 태그]
- 헤딩태그 : 문서의 제목을 나타낼때 씀. (ex. h1 ~ h5)
<body>
<h1>제목1</h1>
<h3>제목1</h3>
<h5>제목1</h5>
</body>[이미지 삽입]
<body>
<img src="" alt="">
</body>
[<a> 태그]
<a href="URL"> html의 핵심 = 하이퍼 텍스트 (링크)<div>
이상혁은 <a href="">리그오브레전드 챔피언쉽</a> 4회 우승을 하였다.
</div>[리스트 출력 <ol> <ul> <li>]
ol, ul, li 은 블락
ul = 순서가 없는 리스트 (Unordered List)
<ul>
<li>계란 3개</li>
<li>간장(2큰술)</li>
<li>맛술(1큰술)</li>
<li>소금(조금)</li>
</ul>
ol = 순서가 있는 리스트 (Ordered List)
<ol>
<li>계란을 잘 풀고, 조미료를 넣어줍니다</li>
<li>계란말이 팬에 잘 풀은 계란을 1/4만큼 조금씩 넣어줍니다</li>
<li>반숙 상태가 되면 젓가락으로 조금씩 안쪽으로 말아줍니다</li>
<li>이를 반복해서 끝까지 잘 구워줍니다</li>
</ol>
[입력 양식 만들기 <form>]
- <form>은 나중에 서버 전송할 때 사용
<body>
<form action="example.php" method="post" name="contact-form">
여기에 입력 양식을 넣습니다.
</form>
</body>action : 데이터의 전송 대상 페이지를 지정
method : 데이터 전송 방법을 지정 [ get / post ]
name : 입력 양식의 이름을 지정
[표 만들기 <table> <th> <tr> <td>]
- 테이블은 인라인
- <table> 표를 나타내는 태그 ⇒ 표 전체를 감싼다.
- <tr> 'Table Row'의 약자 ⇒ 표의 한 행을 나타낸다. → <tr> 내부의 셀은 같은 개수로 맞춰줘야 함.
- <th> 'Table Header'의 약자 ⇒ 표의 제목 셀을 나타낸다.
- <td> 'Table Date'의 약자 ⇒ 표의 데이터(내용) 셀을 나타낸다.
<body>
<table border="1">
<tr>
<th>플랜 이름</th>
<th>요금</th>
</tr>
<tr>
<td>두근두근 플랜</td>
<td>월정액 29,000원</td>
</tr>
<tr>
<td>콩닥콩닥 플랜</td>
<td>월정액 19,000원</td>
</tr>
</table>
</body>
[표 병합 <colspan> <rowspan>]
병합하려는 테이블 예시
<body>
<table border="1">
<tr>
<td>셀 1</td>
<td>셀 2</td>
</tr>
<tr>
<td>셀 3</td>
<td>셀 4</td>
</tr>
<tr>
<td>셀 5</td>
<td>셀 6</td>
</tr>
</table>
</body>
수평 방향 병합 <colspan>
셀을 수평 방향으로 병합할 때는, 병합하고 싶은 <th>나 <td> 태그에 colspan 속성을 추가
colspan에는 병합하고 싶은 셀의 수를 작성한다.<body>
<table border="1">
<tr>
<th colspan="2">셀 1+2</th>
</tr>
<tr>
<td>셀 3</td>
<td>셀 4</td>
</tr>
<tr>
<td>셀 5</td>
<td>셀 6</td>
</tr>
</table>
</body>
수직 방향 병합 <rowspan>
수직방향은 rowspan 속성을 추가
<table border="1">
<tr>
<td>셀 1</td>
<td>셀 2</td>
</tr>
<tr>
<td rowspan="2">셀 3+5</td>
<td>셀 4</td>
</tr>
<tr>
<td>셀 6</td>
</tr>
</table>
[선택 박스 <select> <option>]
- 선택 박스를 클릭하면 선택지가 출력되는 요소 → 사용자에게 주소를 선택하게 만들고 싶을때 등에 사용 → 선택지 전체를 <select> 태그로 감싸고, 선택 항목을 <option> 태그로 감쌈
- <select> 태그의 주요 속성 → name : 버튼의 이름 → multiple : shift 또는 ctrl키로 여러 항목을 선택 가능
- <option> 태그의 주요 속성 → value : 전송될 선택지의 값 → selected : 처음부터 항목이 선택돼 있게 하고 싶을 때 지정
<body>
혈액형
<select name="bloodtype">
<option value="A">A</option>
<option value="B">B</option>
<option value="O">O</option>
<option value="AB">AB</option>
<option value="모름" selected>모름</option>
</select>
</body>
[<lable>]
- HTML 폼 요소와 관련된 텍스트를 나타내는 태그 → 사용자에게 특정 입력 필드에 대한 설명이나 안내를 제공하는 역할
- 레이블 텍스트 부분을 <label> 태그로 감싸고, for속성을 지정 → 이때, 연결하고 싶은 입력 양식에 id 속성 부여
- for 속성과 id 속성의 값(식별 이름)을 같게 입력하면 레이블과 입력 양식이 연결된다. ⇒ 즉, 텍스트 부분을 클릭해서 체크 박스를 선택 가능
<body>
<input type="checkbox" name="travel" value="국내" id="korea">
<label for="korea">국내</label>
<input type="checkbox" name="travel" value="유럽" id="europe">
<label for="europe">유럽</label>
<input type="checkbox" name="travel" value="동남아시아" id="asia">
<label for="asia">동남아시아</label>
</body>
[<hr> <br> <b>]
- <hr> 밑에 가로 선
- <br> 내려쓰기
- <b> 진하게
Share article
