이제 Python은 마무리 나고 다음 HTML 수업을 시작하였습니다.
지금은 Back-End에 관심 있었지만, 원래는 Front-End 쪽을 고민했었습니다.
Back-End는 약간 아직 만들어지지 않은 것들을 구성하고 계획하여 만드는 것이 있는데,
Front-End는 Back-End가 구성해 놓은 것들을 꾸미는 듯한 느낌이랄까?
요소들을 적용시킬 때마다 그때그때 즉각 나타나는 것이 굉장히 흥미로웠고 매력적이었어요.
하지만 제가 느낀 Front-End는 시대적인 트렌드에 민감하다고 해야 할까요.
그런 디자인 감각들을 표현하기엔 너무 어렵고 힘들더라고요, 그리고 디자인 경험은 한 번이면 족하는 이유도 있었어요.
그렇지만 오랜만에 진행하는 HTML은 언제 봐도 재밌고 그 처음 배웠던 설렘이 느껴져요 :)
HTML
요소 (Elements)로 구성되어 있음
태그 (Tag)
어떤 표시를 하기 위해 붙인 꼬리표
웹 문서에 정보를 정의해 주는 형식
(<>) 시작 태그(여는 태그)와 (</>) 종료 태그(닫는 태그)의 쌍으로 구성
+ 요소 포함
<!-- 알맞은 사용 예 -->
<p>
HTML은 요소 안에
<strong>다른 요소</strong>가 들어갈 수 있습니다
</p>
<!-- 잘못 사용된 예 -->
<p>
HTML은 요소 안에 <strong>다른 요소 가 들어갈 수 있습니다
</p> </strong>
주석
<!-- 주석 -->
프로그램 동작에 영향을 미치지 않음
개발할 때 주석은 최소한
실수 방지, 팀원들과 협업을 위해 활용
ex)
협업할 때
<!-- 휴대폰번호 인증필요 -->
<input type="tel">
<!-- # 2022.02.20 4:00 업데이트 -->
임시 처리
<!-- 신청기간이 아니어서 임시 주석처리
<a href="#">신청페이지 바로가기</a> -->
HTML 구조
<html> <!-- 조상 -->
<head></head>
<body>
<section> <!-- 부모 -->
<h1>
<strong></strong>
</h1> <!-- 형제 -->
<img> <!-- 형제 -->
<div> <!-- 기준 -->
<p><strong></strong></p> <!-- p 자식, strong 자손 -->
<p><strong></strong></p>
<p><strong></strong></p>
</div>
</section>
</body>
</html>
HTML 문서 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>여기에는 문서의 제목을 입력해주세요</title>
</head>
<body>
여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
</body>
</html>
+ 설명
문서 형식 선언 : <!DOCTYPE html> (! 입력 후 엔터 하면 자동 생성)
문서의 시작과 끝 : <html lang="ko">
문서의 정보 : <head>
인코딩 방식 설정 : <meta charset="utf-8>
문서의 제목 : <title>
화면에 표시될 콘텐츠 : <body>
블록 요소와 인라인 요소
Block
부모 요소의 전체 공간을 차지하여 블록을 만듦
늘 새로운 줄에서 시작, 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지
이전, 이후 요소 사이에 줄 바꿈이 발생
페이지의 구조적 요소를 나타날 때 사용
width, height 크기를 지정할 수 있고 padding, border, margin 속성을 사용할 수 있음
div, p, form 등 있음
+ 블록 요소는 인라인 요소 안에 중첩될 수 없지만, 인라인 요소는 블록 요소 안에 중첩될 수 있음
<!-- O -->
<div>
블록요소 안
<span>인라인요소 중첩 가능</span>
</div>
<!-- X -->
<span>
인라인요소 안
<div>블록요소 중첩 불가능</div>
</span>
+ 인라인요소 중에 a 태그의 경우, 안에 블록 요소 중첩 가능
<a href=”#”><div></div></a>
Inline
항상 블록 레벨 요소 내에 포함
콘텐츠의 흐름을 끊지 않으며 콘텐츠에 따라 할당된 공간만 차지
문장, 단어 같은 작은 부분에 대해서 적용
새로운 줄을 만들지 않음
width, height 크기를 지정할 수 없고 padding, border, margin 속성을 사용할 수 있지만 상하 margin 속성은 사용할 수 없음
a, label, input 등 있음
HTML 다양한 태그
1. div, span
div : 콘텐츠 분할 요소, 여러 태그들을 그룹핑하기 위한 태그, 블록 요소, CSS로 스타일을 주기 전엔 레이아웃에 영향을 주지 않음
span : 인라인 요소, div와 마찬가지로 CSS로 스타일을 주기 전엔 레이아웃에 영향을 주지 않음
2. Sections
header : 소개 및 탐색, 요소 포함, haed 태그와 혼동하지 말 것, header를 중첩 사용 or header안에 footer 사용 불가
ex)
<header>
<header></header>
</header>
<header>
<footer>
</footer>
</header>
nav(navigation bar) : 문서의 부분 중 현 페이지 내 or 다른 페이지의 링크, 메뉴, 목차, 브레드크럼(breadcrumb)으로 사용, 문서의 모든 링크가 nav 안에 있을 필요는 없음, 하나의 웹페이지에 여러 개의 nav 태그를 가질 수 있음
footer : 페이지의 작성자, 저작권정보, 관련 문서 등의 내용
main : body의 주요 콘텐츠, 웹페이지에서 한 번만 사용 가능, 여러 페이지에 반복되는 콘텐츠를 포함해서는 안됨 (검색 폼이 주요 기능일 경우는 예외)
article : 독립적으로 구분해 배포 or 재사용, 다른 사이트에 영향을 주지 않음, 제목 요소를 자식으로 포함하여야 함, 대표적 사용은 뉴스 홈페이지
section : 제목 요소를 자식으로 포함하여야 함
(article vs section : 독립적으로 사용한다면 article 사용, 웹페이지의 앞뒤 문맥이 연결성이 필요하거나 더 적합한 의미를 가진 요소가 없을 때 section을 사용)
aside : 문서의 주요 내용과 간접적으로 연관된 부분을 나타냄, 문서 주요 흐름을 따라가지 않고 보조 역할의 공간, 대표적으로 광고나 배너에 사용
3. Contents
h1, h2, h3, h4, h5, h6(Heading) : 제목, h1 ~ h6 순서대로 작성
a : 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 생성
+ href : hypertext reference (하이퍼텍스트 참조)
+ tel : 전화번호
+ mailto : 이메일주소
+ _self : 현재 페이지 (기본값)
+ _blank : 새 탭
+ download : 링크 이동 대신 사용자에게 URL에 위치하는 대상을 저장 할 지
<a href="b.html">b.html으로 이동</a>
<a href="b.html" target="_blank">b.html 새탭으로 이동</a>
<a href="b.html" download>b.html 파일 다운로드</a>
<a href="mailto:google@gmail.com">mailto:google@gmail.com</a>
<a href="tel:010-0000-0000">010-1234-1234</a>
p(paragraph) : 하나의 문단, 블록 요소
strong : 중대하거나 긴급한 콘텐츠, 단어 or 문장, 기본적으로 굵은 글꼴 적용
br(line break) : 줄 바꿈, HTML은 엔터 값을 인식하지 않기 때문에 HTML 문서에서 여러 줄로 되어 있어도 실제 화면에서는 한 줄로 보임
hr : 이야기에서 장면 전환 or 문단 안에서 주제가 변경되었을 때 사용, 단락 구분 시 사용, p 태그 내 사용하지 않음
code : 짧은 코드 (한 줄)을 나타낼 때 사용, 텍스트의 고정 폭 글꼴 (monospace font : 모든 문자가 동일한 너비를 가지는 글꼴)을 사용
<code>push()<code>
pre : HTML에 작성한 내용 그대로를 표현, 텍스트는 고정 폭 글꼴을 사용, 공백 유지, 공백 필요한 코드 or 텍스트 사용해 그림 그릴 때 사용
4. 목록 태그
ol(ordered list) : 순차적 목록
+ type : 항목을 셀 때 사용할 카운터 유형
+ 1 : 숫자(기본값)
+ a : 소문자 알파벳
+ A : 대문자 알파벳
+ i : 소문자 로마 숫자
+ I : 대문자 로마 숫자
<ol type="i">
<li>Introduction</li>
<li>List of Grievances</li>
<li>Conclusion</li>
</ol>
+ start : 항목을 셀 때 시작할 수, 아라비아 숫자만 가능
<p>Finishing places of contestants not in the winners' circle:</p>
<ol start="4">
<li>Speedwalk Stu</li>
<li>Saunterin' Sam</li>
<li>Slowpoke Rodriguez</li>
</ol>
+ reversed : 순서 역전
ul(unordered list) : 비순차적 목록, 순서가 중요하지 않는 목록에 적용
li : 목록의 항목, 단독으로 사용 불가, ol or ul의 자식요소로만 사용할 수 있음
+ 자식이 아닌 자손요소로는 다른 태그도 사용 가능
<ol>
<li>item
<div>first item</div>
</li>
<li>item</li>
</ol>
5. Media
img(image) : 문서에 이미지 삽입
<img src="chilli.jpg" alt="위니브 다람쥐 캐릭터 칠리" >
+ src : 경로
+ alt : 대체 텍스트. 이미지에 대한 설명
(이미지를 대체하는 텍스트가 중복이라면 alt="" 생략이 아닌 빈 값으로 둠)
+ 이미지 하단의 빈 공간
해당 현상은 img가 인라인 요소라서 발생하는 현상
인라인 요소이기 때문에 img의 세로 정렬이 글자의 baseline을 따르게 됨
현상을 해결하기 위해서는 아래와 같은 초깃값을 넣어주면 됨
img{
vertical-align:top;
}
이렇게 HTML의 기본 구조와 태그에 대해 알아보았습니다.
태그들이 많아 처음엔 많이 헷갈렸지만 직접 실습을 해보면 쉽게 이해가 가능합니다.
다음에 실습을 진행한다면 GitHub 첨부할 테니 참고하시면 될 것 같아요 :)
https://github.com/soohyun020812/ormcamp
GitHub - soohyun020812/ormcamp: 오름캠프 교육에서 활용한 실습 내용들 정리
오름캠프 교육에서 활용한 실습 내용들 정리. Contribute to soohyun020812/ormcamp development by creating an account on GitHub.
github.com