이번 두번째 수업에서는 HTML을 배웠다.
HTML (Hypertext Markup Language)
웹 페이지를 구성하는 가장 기초적인 언어
- Hypertext: 링크. 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것.
- Markup: 문서나 데이터의 구조를 명기하다.
기본 구조
- 반드시
<!DOCTYPE html>으로 시작하여 문서 형식을 HTML5로 지정 - 실제적인 HTML 문서는 2번째 행부터 시작,
<html>과</html>사이에 작성 <head></head>사이에는 html 문서 정보를 정의하는 코드가 포함된다. 제목, 저장 방식, 브라우저의 크기 등등. 이 안에 있는 건 일반 유저가 볼 수 없다.
head 태그
- HTML 문서의 메타 데이터와 문서 정보를 정의하는 데 사용되는 태그
- 메타 데이터: 데이터에 대한 정보를 제공하는 데이터. 화면에 표시되지 않음.
- 태그:
<>로 열고 닫은 단어들. 이거 하나하나가 다 태그<title>: HTML 문서의 제목<style>: HTML 문서의 스타일 정보 정의<link>: 외부 리소스와의 연결 정보를 정의<script>: JavaScript를 정의<meta>: 페이지 설명, 키워드, 저자, 화면 크기 등의 정보. 주로 브라우저 또는 검색 엔진에서 사용.
SPA와 MAP
- SPA: HTML을 하나만 쓰는 것.
- MAP: HTML 여러 개 만들어서 링크로 연결.
body 태그
- HTML 문서의 실제 콘텐츠를 정의하는 데 사용되는 태그
- 다양한 태그를 사용하여 웹 페이지의 구조 만듦
중첩 관계
부모-자식 관계로 웹 페이지의 구조를 표현함
주석
개발자에게 코드를 설명하기 위해 사용. 브라우저는 주석을 화면에 표시하지 않음.
Element 구성
- Element = Start tag + Content + End tag
예를 들어 아래와 같은 코드를 Element라고 한다.
<p>Hello, World!</p>- Start tag:
<p> - Content:
Hello, World! - End tag:
</p>
빈 요소 (Empty Element)
- 내용 없이 구조적인 기능만 하는 요소
<br>: 줄 바꿈<hr>: 수평 줄 하나 그어줌
블록 요소 (Block Element)
- 기본적으로 부모 요소의 전체 너비 100%를 차지함
- 태그가 시작되면 무조건 줄 바꿈이 일어남
- 모든 인라인 요소를 포함하거나 다른 블록 요소를 포함함
- 많이 사용하는 태그:
<div>
인라인 요소 (Inline Element)
- 텍스트 혹은 이미지 크기에 맞는 필요한 공간만을 차지하는 요소
- 너비와 높이를 지정할 수 없음
- 블록 요소 안에 포함되어 있으며 인라인 요소만 가질 수 있음
- 인라인 요소 안에는 인라인 요소만 쓰기
<a>: 링크를 거는 데 사용<span>: 블록의 div 역할<strong>: 글자를 두껍게
인라인 요소 안에 인라인 요소만 쓰기란 예를 들어
<span>div is<div>block</div> element.</span>이런식으로 인라인인 span 안에 div같은 블록요소를 쓰지 말라는 것이다.
반대로 아래의 코드와 같이 블록 요소 안에는 인라인 요소 포함 가능하다.
<div>span is<span>inline</span> element.</div>속성 (Attributes)
예를 들어 아래와 같은 코드가 있다고 해보자
<p class =”foo”>class→ attribute name (속성명)foo→ value (속성에 대한 값)- 태그를 보조하는 명령어로 태그 안쪽에서 작동 (ex: id, class, style, width, height)
- 태그마다 사용 가능한 속성이 정해져 있음
주요 태그
<h1></h1>: 제목 태그. 하나의 HTML 문서에는 하나의 h1 태그를 권장. 웹 검색 엔진이 제일 먼저 검색하는 태그.<p></p>: 문단<br>: 빈 요소로 줄을 바꿔줌<img>: 이미지 삽입<a></a>: 하이퍼링크<div></div>: 블록 요소
목록 태그
<ul>: 순서 없는 목록 (unordered list)<ol>: 순서 있는 목록 (ordered list)
둘 다 안에 <li></li>를 넣어준다.
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul><ol>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ol>이미지 삽입
<img>: 이미지 넣을 때 사용- 속성 값 중 하나인
src사용 alt속성이 중요title: 사진 위에 마우스를 올렸을 때 이름이 나타나게 해줌
<img src="" alt="" title="">하이퍼링크 <a>
- 속성값:
href: 이동할 페이지의 링크target: 링크된 문서를 열 때의 동작
- _blank : 새로운 탭에서
- _self : 현재 탭에서 (기본 값)
<a href="https://..." target="_blank">새로운 탭에서 열기</a>느낀점
html를 자세히 공부할 수 있어서 좋았다. html은 쉬운편이어서 그냥 대충하고 넘어가는 개념들이 많았는데 이렇게 하나하나씩 공부하면서 정리해보니 머리속에 잘 정리된거 같다. 강의중간에 직접 실습해보는 시간이 있었는데 그 시간이 아주 좋았다. 혼자 공부하면서 코드 따라치는건 많이 해봤지만 실제로 혼자서 코드치면서 구현하는 연습을 더 해야할거 같다. 요즘 외국 개발자들 유투브 비디오들을 많이 보는데 거기서 항상 말하는 tutorial hell에 빠진 상황이 너무 나같다. 그리고 맥을 처음 써보느라 스크린샷하는것도 몰라서 과제 제출 해맸다.맥으로 부분 캡쳐는 command+shift+4 그리고 전체캡쳐는 command+shift+3이라고 한다. 얼른 맥 운영체제에도 익숙해지면 좋겠다. 키보드부터가 한영 변환이나 커멘드키 위치가 달라서 신경쓰인다.
