HTML
(Hyper Text Markup language)
문서의 구조나 문서의 내용들을 다루고있는 언어이다.
웹페이지의 틀을 만드는 언어이다.
How to use HTML?
- HTML은 tag들의 집합이다.
- TAG: 부등호(<>)로 묶인 HTML의 기본 구성 요소
<!DOCTYPE html> //이 문서가 HTML 문서임을 명시 <html> <head> <title>Page title</title> </head> <body> <h1>Hello world</h1> <div>Contents here <span>Here too!</span> </div> </body> </html>
- html 확장자를 사용한다.
TAG
tag(태그) & content(내용)
HTML에서는 이미지나 텍스트를 그려주려면 그에 맞는 태그가 필요하다.
그래야 브라우저에서 '아 이것은 이거구나!'하고 알 수 있다.
<태그이름>내용</태그이름>
태그는 위에 처럼<>으로 감싸져 있고 브라우저에서는 태그를 제외한 내용만 보여준다.
내용에 왼쪽에 있는 것이 시작 태그(opening tag)이고,
내용 우측에 있는 것이 종료 태그(closing tag)이다.
self-closing TAG
위에서 알 수 있듯이 태그는 보통 (<>) 태그를 쓰면 /를 이용하여 닫는 태그를 뒤에 붙여준다.
하지만 닫는 태그가 존재하지 않는 태그도 있다.
태그 내부에 내용이 없다면,
(<tag``</tag>와 같이 표현되는 경우) <tag/>와 같이 표현 가능하다.
MOST USED TAG
<html>/ 기본 형식 입력 html 문서임을 명시 <div>/ content division을 의미하며, 줄바꿈됨 한줄을 차지함 <span>/ 줄바꿈이 없는 content 컨테이너 그 부분만 차지함 <strong>/ 글씨를 진하게 <img src> 이미지 <u>/ 글씨 밑줄 <h1>/ ~6 제목 크기 <br> 줄바꿈 (여러개 사용 가능) <p>/ 단락 <img src=" "> 이미지 넣기 width=" " 이미지 크기 <li>/ 리스트로 인식 (자식태그) <ul>/ 리스트를 구분지어줌 (부모태그) <ol>/ 리스트 넘버링 <title>/ 웹페이지 제목 <meta charset=" "> 문자 형식 <head>/ 제목 설명 태그 <body>/ 본문 설명 태그 <a href=" ">/ 링크걸기 target="-blank" 새탭으로 열기 <title>=" " 링크에 커서 올렸을때 제목 보이기 <input > 입력폼 Text, Radio(옵션a,b선택)[name을통해 옵션의 그룹설정], Checkbox) <textarea>/ 줄바꿈이 되는 입력폼 <button>/ 버튼
위 태그들을 이용하여 학습 영상을 따라 작성해보았다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>제목</title>
</head>
<body>
<div>div태그는 한줄 공간만큼 차지합니다.</div>
<div>division 2</div>
<span> span 태그는 컨텐츠 크기만큼 공간을 차지합니다</span>
<span>span 2</span>
<span>sapn 3</span>
<div>division 3</div>
<img src=james.jpg width=500 height=650>
<br> <a href="https://codestates.com" target="_blank">코드스테이츠</a>
<br><br><br><br><br>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>"Item 3 has nested list"
<ul>
<li>Item 3-1</li>
</ul>
</li>
<br><br><br><br><br>
<div>며
ID<input type="text" placeholder="type here">
</div>
<div>
password<input type="password" >
</div>
<div>
<input type="checkbox">로그인 기록
</div>
<div>
<input type="radio" name="option1">옵션a
<input type="radio" name="option1">옵션b
</div>
<div>
<button>로그인</button>
</div>
<br>
<textarea></textarea>
<br><br><br><br><br>
</body>
</html>visual sutdio code에서 작성하여 실행한 결과이다.
많이 미흡하지만, 웹개발의 가장 기본적인 뼈대가
여러가지 태그를 통하여 만들어진것이다.
기타
solo study
이해가 부족하였던 이론에 대해서 구글링과 유튜브 영상 시청을 통해
학습하며 스스로 공부하는 방법을 연습하는 시간이었던것같다.
이론을 바탕으로 코플릿을 다시한번 풀어보았을때 전혀 건들지 못했던 문제도
수도코드를 활용해 풀어나갈 수 있게되었다.
하지만 어떻게 공부해야 더 효율적인지를 고민 해볼필요가 있을것같다.
느낀점
수도코드 최고😎
시간을 더 효율적으로 활용하는법을 고민해보자
코플릿은 너무 어려워
