오늘도 어제에 이어서 “한 번에 끝내는 파이썬 웹 개발 초격차 패키지 Online” 의 파트 3의 HTML 기본문법, 요소의 관계 이해를 듣고 정리해보았다. 참고로 이 포스팅은 공부용으로 강의 내용을 요약한 것으로 자세한 강의 내용은 위 링크를 참조 할 것.



아래는 공부 인증 사진.


2022-05-28-Python-Photo1

2022-05-28-Python-Photo2



01. HTML 기본 문법

  • HTML의 요소, 태그에 대해 알아보자.
<h1>Hello World!</h1>

  • 위의 HTML 을 풀어 쓰면 아래와 같다.
<태그>내용</태그>
  • 위의 내용전체를 **요소(element)**라고 부른다.
  • <태그> : 시작(열린) 태그(Tag)
  • </태그> : 종료(닫힌) 태그(Tag)
  • 내용 : 요소의 내용(Contents)

  • 이번에는 HTML요소의 다른 예시를 살펴보자.
<태그 속성="값">내용</태그>
  • 속성 : Attribute
  • "값" : Value
  • 속성 = "값" : HTML 기능의 확장

  • HTML에서 종료태그가 없는 태그를 볼 수도 있다.
<태그>
  • 빈(Empty) 태그라고 부른다.

  • 빈(Empty) 태그는 아래 두 가지 방식으로 입력할 수 있다.
<태그>
<태그 />
  • <태그> : 편리하다. HTML1/2/3/4/5 에서 사용 가능
  • <태그 /> : 안전하다. XHTML/HTML5 에서 사용가능
  • HTML5에서는 두 가지 방식 모두 호환 가능하다.
  • 참고: HTML의 버전은 HTML 1, 2, 3, 4, XHTML, HTML 5로 총 6가지 버전이 존재한다.

02. 요소의 관계 이해

<div>Contents</div>
  • div라는 요소가 쓰여있다.
  • 라는 여는 태그,
    라는 닫는 태그를 사용했다. 
<div><div>Contents</div></div>
  • 하나의 여는태그 & 닫는 태그를 또 다른 여는 태그 & 닫는 태그로 감싸주었다.
  • 바깥 여는 & 닫는 태그를 1번 요소, 안쪽 여는 & 닫는 태그를 2번 요소라고 했을 때, 1번 요소를 부모 요소, 2번 요소를 자식 요소라고 부른다.
  • 1번 요소와 2번 요소는 부모-자식 관계를 갖고 있다: 상대적인 개념
  • 위에서는 부모요소의 여는 태그와 닫는 태그를 한눈에 알아보기 어렵다.

  • 요소의 시작과 끝을 명확하게 알 수 있기 위해 아래처럼 HTML 코드를 작성하기도 한다.
<div>
	<div>Contents</div>
</div>
  • 엔터로 구분을 해주고, 자식요소는 tab키 를 눌러 **들여쓰기(Indent)**를 하여 작성한다.
  • cf. 내어쓰기(Outdent): Shift + tab 키

  • 이번에는 div 요소가 하나 더 추가된 예시를 살펴보자.
<div>
	**<div>**
		<div>Contents</div>
	**</div>**
</div>
  • 위 예시 중 굵은 글씨로 쓰여진 요소 입장에서 가장 바깥 태그는 자신의 ‘부모 요소’이다.
  • 굵은 글씨 요소는
    Contents
    입장에서 볼때 부모 요소에 해당한다.
  • 부모-자식요소는 상대적 개념이다.
  • Contents
    입장에서 가장 바깥 요소를 어떻게 부를까? - **상위(조상) 요소** - ’자기 자신'을 기준으로 부모요소를 포함한 모든 외부요소를 상위요소/조상요소라고 지칭할 수 있다.
  • 반대로 가장 바깥 요소에서 가장 안쪽 요소를 어떻게 부를까?
    • 하위(후손) 요소
    • ‘자기 자신’을 기준으로 자식요소를 포함한 모든 내부요소를 하위요소/후손요소라고 지칭할 수 있다.

<div>
	<div>Contents1</div>
	<div>Contents2</div>
</div>
  • Contents1
    와
    Contents2
    는 같은 부모요소를 공유하고 있다. - **형제 요소**라고 지칭할 수 있다. -
    Contents1
    는
    Contents2
    를 **다음(next) 형제 요소** 라고 지칭할 수 있다. -
    Contents2
    는
    Contents1
    를 **이전(previous) 형제 요소** 라고 지칭할 수 있다.



02. 요소의 관계 이해

<div>Contents</div>
  • div라는 요소가 쓰여있다.
  • 라는 여는 태그,
    라는 닫는 태그를 사용했다. 

<div><div>Contents</div></div>
  • 하나의 여는태그 & 닫는 태그를 또 다른 여는 태그 & 닫는 태그로 감싸주었다.
  • 바깥 여는 & 닫는 태그를 1번 요소, 안쪽 여는 & 닫는 태그를 2번 요소라고 했을 때, 1번 요소를 부모 요소, 2번 요소를 자식 요소라고 부른다.
  • 1번 요소와 2번 요소는 부모-자식 관계를 갖고 있다: 상대적인 개념
  • 위에서는 부모요소의 여는 태그와 닫는 태그를 한눈에 알아보기 어렵다.

  • 요소의 시작과 끝을 명확하게 알 수 있기 위해 아래처럼 HTML 코드를 작성하기도 한다.
<div>
	<div>Contents</div>
</div>
  • 엔터로 구분을 해주고, 자식요소는 tab키 를 눌러 **들여쓰기(Indent)**를 하여 작성한다.
  • cf. 내어쓰기(Outdent): Shift + tab 키

  • 이번에는 div 요소가 하나 더 추가된 예시를 살펴보자.
<div>
	**<div>**
		<div>Contents</div>
	**</div>**
</div>
  • 위 예시 중 굵은 글씨로 쓰여진 요소 입장에서 가장 바깥 태그는 자신의 ‘부모 요소’이다.
  • 굵은 글씨 요소는
    Contents
    입장에서 볼때 부모 요소에 해당한다.
  • 부모-자식요소는 상대적 개념이다.
  • Contents
    입장에서 가장 바깥 요소를 어떻게 부를까? - **상위(조상) 요소** - ’자기 자신'을 기준으로 부모요소를 포함한 모든 외부요소를 상위요소/조상요소라고 지칭할 수 있다.
  • 반대로 가장 바깥 요소에서 가장 안쪽 요소를 어떻게 부를까?
    • 하위(후손) 요소
    • ‘자기 자신’을 기준으로 자식요소를 포함한 모든 내부요소를 하위요소/후손요소라고 지칭할 수 있다.

<div>
	<div>Contents1</div>
	<div>Contents2</div>
</div>
  • Contents1
    와
    Contents2
    는 같은 부모요소를 공유하고 있다. - **형제 요소**라고 지칭할 수 있다. -
    Contents1
    는
    Contents2
    를 **다음(next) 형제 요소** 라고 지칭할 수 있다. -
    Contents2
    는
    Contents1
    를 **이전(previous) 형제 요소** 라고 지칭할 수 있다.



이번 포스팅에서는 강의의 파트 3의 HTML 기본문법, 요소의 관계 이해를 정리해보았다. 다음 포스팅에서는 HTML의 글자와 상자를 알아보도록 하자.


본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.



#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #캐시백챌린지 #캐시백 #환급챌린지 #한번에끝내는파이썬웹개발초격차패키지Online