내일배움카드(재직자) 웹표준 수업 / 3월2일 (수) 2회차

 

<웹사이트 만들기>
1. 닷홈가입
2. 상단메뉴 - 웹호스팅 - 무료호스팅
3. 무료호스팅 신청 - 아이디,비번설정,이메일 인증
4. 파일질라 설치
5. 호스트: 아이디.dothome.co.kr
6. 빠른연결 단추 클릭
7. html 폴더안에 작업한 html,css 파일 넣기
(왼쪽은 내컴퓨터 폴더,오른쪽은 웹폴더 / 왼쪽에서 파일을 찾아서 오른쪽으로 옮겨야함)
8. 인터넷에서 http://아이디.dothome.co.kr 접속

 

 

 

<목록태그>
▶순서가 없는 목록 (unorder list)
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
<li>목록4</li>
<li>목록5</li>
</ul>


▶순서가 있는 목록 (order list)
<ol>
<li>....
</ol>


▶설명 목록 (definition list)
<dl>
 <dt>목록제목</dt>
 <dd>설명</dd>
....
</dl>


▶구역 나누기:말그대로 구분을 위해서 만들어진 태그
<section>
내용 입력
</section>



▶기본구조의 표만들기:table
*td는 무조건 tr 안에. tr이 없으면 안만들어짐
<table>------표
<tr>-----줄
<td></td>----칸
<td></td>----칸
<tr>
</table>


▶표에 테두리선 넣기
<table border="1"> 여기서 숫자는 선의 굵기다



▶칸에 입력된 글자 굵게하기
<table>------표
<tr>-----줄
<th></th>----굵은글자칸 (table head)
<td></td>----일반글자칸



▶표의 가로세로 크기 지정(가로:widtn,세로:height)
<table>------표
<tr>-----줄
<th width="200px">이름</th>---가로가 200px인 굵은 글자칸
<td>빈칸</td>
</tr>
<tr>
<th height="50">주소</th>--------첫번째줄의 칸과 같은 가로크기,세로크기가 50px인 굵은 글자칸
<td colspan="3"></td>-------가로로 3칸이 합쳐진 칸
</tr>
<td></td>
</table>


▶표의 가로세로 셀 병합하기
(" "안의 숫자는 몇칸을 합치는지를 의미한다)
가로
<table>
<tr>
<td colspan="3">1</td>

세로
<table>
<tr>
<td rowspan="3">1</td>





▶표 제목(Caption) 붙이기 
<table>------표
<caption>표제목</caption>


▶링크만들기(지정된 페이지로 이동)
<a href="연결할 주소">글자</a>

 

*html=hyper text markup language
*href=hypertext reference

 

 

❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓❓

 

 

<b>태그는 글자 굵게 표시할때 사용하고,
border 속성은 테이블 선 보이게 해주는 것. >헷갈렸던거 ㅎㅎ...전혀 다른거였군앙

 

 

 

 

<p>태그와 <br>태그의 기능과 차이점

 

우선 <p> 태그와 <br> 태그를 알아보겠습니다. 두 개를 동일 기능으로 많이 사용하게 되는데 대부분

두 태그를 글자의 줄을 바꾸는 기능으로 알고 있는데 결과물은 비슷하지만 원리는 다릅니다.

 

<p> 태그는 말그대로 문단이라는 뜻으로 각 한줄 한줄이 독립적인(Block-level Element) 태그입니다.

문단과 문단을 나누기 위함이 목적이고

<br> 태그는 하나의 문단안에서 줄을 끊어서 단순히 줄을 바꾸는 기능입니다.

 

예제로 살펴보죠.

<p> 태그를 사용 했을 때 입니다.

공백 라인이 하나 더 추가되어 문단이 구분 되어 있는 것을 알 수 있습니다.

 

여기에 <br> 태그를 추가 해보면

문단 안에서 줄바꿈이 되는 것을 알 수 있습니다.

 

만약 <br> 태그가 아닌 <p>태그로 줄바꿈을 나눈다면 아래 형태가 되겠죠?

아래와 같이 모든 문단이 구분되어져서 가독성이 떨어지게 됩니다.

출처: https://cocosoft.kr/343 [코코소프트]