안녕하세요. Codinglee입니다.
왕초보도 이해할 수 있는 웹 프로그래밍 시간입니다.
이번 내용은 지난 HTML 기초에 이어 HTML을 사용하는 방법 및 CSS란 무엇인가? 입니다.
HTML CSS 한 번 파헤쳐 보겠습니다.
이전 시리즈 보기
시리즈 1. 챗지피티 활용 프로그래밍 1 – 계산기 만들기 (준비)
시리즈 2. 챗지피티 활용 프로그래밍 2 – 계산기 만들기
시리즈 3. 챗지피티 활용 프로그래밍 3 – 계산기 만들기
시리즈 4. 챗지피티 활용 프로그래밍 4 – 계산기 만들기(완료)
시리즈 5. 왕초보 웹 프로그래밍 1 – HTML CSS JAVASCRIPT
시리즈 6. 왕초보 웹 프로그래밍 2 – 인터넷, 웹브라우저
시리즈 7. 왕초보 웹 프로그래밍 3 – DNS(Domain Name System)
시리즈 8. 왕초보 웹 프로그래밍 4 – 서버, 클라이언트
시리즈 9. 왕초보 웹 프로그래밍 5 – 개발자 도구 살펴보기
시리즈 10. 왕초보 웹 프로그래밍 6 – HTML 태그
오늘의 학습 순서입니다.
[HTML 사용하기]
1. HTML 태그 사용해보기
2. HTML 태그 사용 시 주의점
[CSS란 무엇인가?]
1. CSS란 무엇인가?
2. CSS 사용 방법
그럼 오늘 내용 시작하겠습니다.
[HTML 사용하기]
1. HTML 태그 사용해보기
HTML 태그의 종류는 매우 많다고 알려드렸습니다.
모든 태그를 기억할 필요도 없다고 말씀드렸습니다.
주로 사용하는 태그의 종류는 몇 가지 되지 않고, 모르면 찾아보면 됩니다.
다음 html 코드는 지피티가 알려준 가장 많이 사용하는 태그 종류 모음입니다.
<body>
<h1>HTML에서 많이 사용하는 태그 20개 예시</h1>
<h2>1. 제목 태그</h2>
<h1>큰 제목 (h1)</h1>
<h2>중간 제목 (h2)</h2>
<h3>작은 제목 (h3)</h3>
<h2>2. 문단 태그</h2>
<p>이것은 문단을 나타내는 태그입니다.</p>
<h2>3. 이미지 태그</h2>
<img src="https://via.placeholder.com/400" alt="이미지 예시">
<h2>4. 링크 태그</h2>
<a href="https://www.example.com">여기를 클릭하세요</a>
<h2>5. 리스트 태그</h2>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
<h2>6. 테이블 태그</h2>
<table>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>30</td>
</tr>
<tr>
<td>김철수</td>
<td>25</td>
</tr>
</table>
<h2>7. 폼 태그</h2>
<form action="#">
<label>이름:</label><br>
<input type="text"><br><br>
<label>나이:</label><br>
<input type="number"><br><br>
<input type="submit" value="제출">
</form>
<h2>8. 강조 태그</h2>
<p>이것은 <strong>강조된 텍스트</strong>입니다.</p>
<p>이것은 <em>기울어진 텍스트</em>입니다.</p>
<h2>9. 구분선 태그</h2>
<hr>
<h2>10. 코드 태그</h2>
<p>HTML 코드 예시: <code><div>Hello</div></code></p>
<h2>11. 블록 인용문 태그</h2>
<blockquote>
이것은 인용문입니다. "명언이나 중요한 말을 인용할 때 사용합니다."
</blockquote>
<h2>12. 줄바꿈 태그</h2>
<p>여기서 줄이 <br> 바뀝니다.</p>
<h2>13. 숨김 태그</h2>
<p>이것은 보이는 텍스트입니다. <span style="display:none;">이것은 숨겨진 텍스트입니다.</span></p>
<h2>14. 데이터 목록 태그</h2>
<dl>
<dt>HTML</dt>
<dd>웹페이지 구조를 정의하는 언어입니다.</dd>
<dt>CSS</dt>
<dd>웹페이지를 꾸미는 스타일 언어입니다.</dd>
</dl>
<h2>15. 비디오 태그</h2>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
브라우저가 동영상을 지원하지 않습니다.
</video>
<h2>16. 오디오 태그</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
브라우저가 오디오를 지원하지 않습니다.
</audio>
<h2>17. 버튼 태그</h2>
<button>클릭하세요</button>
<h2>18. 아이프레임 태그</h2>
<iframe src="https://www.example.com" width="300" height="200"></iframe>
<h2>19. 마크 태그</h2>
<p>이것은 <mark>강조된 부분</mark>입니다.</p>
<h2>20. 작은 텍스트 태그</h2>
<p>이것은 <small>작은 텍스트</small>입니다.</p>
</body>위 태그를 html 파일 속 body 태그로 변경하고 결과를 확인해보겠습니다.
총 20개의 태그 종류들입니다.
코드와 화면을 함께 보면서 내가 쓴 코드가 어떻게 화면에 표시되는지 살펴보세요.
정말 이 정도의 태그만 알아도 웹 개발을 하는 데 무리가 없습니다.
몇 가지 정말 많이 사용하는 태그를 추가 설명하겠습니다.
<h1>큰 제목 (h1)</h1>
<h2>중간 제목 (h2)</h2>
<h3>작은 제목 (h3)</h3>
<h4>더 작은 제목 (h4)</h4>
<h5>더더 작은 제목 (h5)</h5>
<h6>더더더 작은 제목 (h6)</h6>
가장 많이 사용되는 태그 중 하나입니다.
h1부터 h6까지 사용됩니다.
신문의 헤드라인 제목에 사용된다고 생각하시면 됩니다.
h1이 가장 큰 글씨크기입니다.
다음은 HTML 언어의 가장 큰 특징이었던 하이퍼링크를 사용할 수 있는 a 태그입니다.
<h2>4. 링크 태그</h2>
<a href="https://www.example.com">여기를 클릭하세요</a>
왼쪽의 a 태그를 보시면 a 태그안 href라는 것이 보입니다. href의 값에 인터넷 주소가 들어가 있네요. 이렇게 태그 안에 추가로 넣을 수 있는 것들을 속성이라고 부릅니다.
왼쪽에 보이는 “여기를 클릭하세요” 라는 글씨를 누르면 해당 링크로 이동됩니다.
HTML 태그 설명 마지막으로 form 태그에 대해 알려드리겠습니다.
<h2>7. 폼 태그</h2>
<form action="#">
<label>이름:</label><br>
<input type="text"><br><br>
<label>나이:</label><br>
<input type="number"><br><br>
<input type="submit" value="제출">
</form>
form 태그는 로그인/회원가입할 때 한번은 보셨죠?
현재 web 2.0은 사용자와의 상호작용이 가장 큰 특징이기 때문에 이런 입력폼을 아주 많이 사용합니다.
나중에 javascript까지 알게되시면 Database에 여기 입력된 값들을 넣을 수 있게 됩니다.
태그 설명은 여기서 마치겠습니다. 더 궁금한 게 있으시면 w3schools 또는 chatgpt, google 검색을 하시면 더 자세한 정보를 얻을 수 있습니다.
2. HTML 태그 사용 시 주의점
이런 HTML 태그를 사용할 때 주의할 점이 있습니다.
- 첫째, 여는 태그, 닫는 태그를 꼭 확인해야 합니다.
– 이전 시간에 태그 종류에 닫는 태그가 있는 것과 없는 것으로 나뉜다고 말씀드렸습니다.
사용하시다보면 당연히 알게 되실테고, Visual Studio Code와 같은 개발환경에서 자동으로 닫아주겠지만 코드에 오류가 없게 닫는 태그를 꼭 확인하셔야 합니다. - 둘째, 오타를 조심하세요.
– 어떤 프로그래밍 또는 코드에서도 마찬가지지만 오타를 조심하세요.
컴퓨터는 내가 코드를 작성하면 스스로 수정하지 않습니다.
무조건 내가 작성한 대로만 동작하려합니다. 인공지능 AI도 마찬가지입니다.
따라서 코드를 작성할 때, 대부분 영어로 작성하기 때문에 영어 타이핑 연습을 많이 하셔야 합니다. 코드를 많이 쳐보시면 당연히 오타가 줄어들고 영어타자가 빨라집니다.
그리고 내가 쓴 코드에서 오타 찾는 것은 거의 불가능합니다. 다른 동료에게 부탁하면 훨씬 빨리 찾아줍니다. - 셋째, 태그의 부모-자식 관계를 잘 알아야 합니다.
– 태그를 작성하다보면 태그 속에 다른 태그가 들어갑니다.
이 관계를 잘 이해하셔야 HTML 문서 작성할 수 있습니다.
VSC에서는 이 관계를 잘 알 수 있도록 알려주고 있습니다.
<div class="grandgrandparents">
<div class="grandparents">
<div class="parents">
<div class="children">
<div class="babys">
</div>
</div>
</div>
</div>
</div>위와 같은 코드가 있다고 생각해봅시다.
grandgrandparents 부터 babys 까지 div 태그 안에 또 태그가 있는 구조입니다.
실제 웹 프로그램을 만들다보면 이렇게 중첩되는 태그들이 늘어나는데
이 구조를 잘 파악하셔야, 내가 원하는 모양의 페이지를 만들 수 있습니다.
VSC에서는 구조 파악을 쉽게 할 수 있도록 도와주니 다음 이미지를 참고하세요.
현재 코드 내에 children 글자를 선택한 상태입니다.
그럼 위쪽에 태그 종속관계가 쭉 나열됩니다.
test.html 파일 속 grandgrandparents부터 children까지 …
앞으로 프로그래밍 하실 때 이 부분을 놓치지 말고 잘 보시길 바랍니다.
HTML 내용이 길어져서 CSS내용은 짧게 넘어가겠습니다.
다음 포스트에서 더 자세히 설명할게요~
[CSS란 무엇인가?]
1. CSS란 무엇인가?
CSS란 Cascading Style Sheet로 HTML 언어로 작성된 웹페이지를 꾸미는 역할을 하는 스타일 시트 언어입니다. 색상, 폰트, 레이아웃 등을 정의해 웹페이지를 더욱 아름답게 만듭니다.
2. CSS 사용 방법
CSS는 주로 세 가지 방법으로 사용됩니다.
- 인라인 스타일
– HTML 태그 내에서 직접 사용 - 내부 스타일
– html 파일 속 <style></style> 태그 내에 작성 - 외부 스타일
– 별도의 .css 파일로 관리하여 링크하여 사용
HTML을 사용하는 방법 을 조금은 더 잘 아셨나요?
이제 시작입니다.
앞으로 약 50개의 포스트를 더 올릴 계획입니다.
계속 잘 봐주시길 바랍니다. 댓글도 많이 달아주시면 감사하겠습니다
이번 포스트에서는 HTML을 사용하는 방법 및 CSS 에 대해서 알아보았습니다.
다음 포스트에서는 CSS를 더욱 더 깊이 알아보도록 하겠습니다.
감사합니다. Codinglee였습니다.
2024.10.18.(금) 판교 직장에서 씀.
