728x90
HTML(Hypertext markup language) 마크업 언어: 태그를 이용하여 문서 내에서 구조와 요소를 나타내는 언어

주소를 입력해서 입력 내용을 보여주는 것 = 렌더링
applepy.tistory.com/manage/newpost/~~~
→ 요청 내용

  • HTML(Hypertext markup language) - 콘텐츠를 작성하는 역할, 구조를 잡는 역할
  • CSS(Cascading style sheets) - HTML에 디자인을 주는 역할(폰트 색상, 크기 등)
  • Javascript - 사용자와 상호작용 기능 구현

HTML은 <!DOCTYPE html>로 선언을 해주고 <html>로 시작하여 </html>로 끝낸다.
<head>와 <body>로 구성되어 있다. 파일 에디터인 VSCODE에서

.html 파일 만든 뒤 html:5 로 head 부분을 자동 완성할 수 있다.

head에는 문자셋, 파일 제목 등 이러저러한 정보들이 들어있다. 헤드에 있는 내용은 브라우저에는 표시되지 않는다. 그럼 이제 <body>에서부터 내용을 작성하면 된다. 작성하다가 페이지에 어떻게 뜨는지 확인하고 싶으면 Alt+b를 누르면 페이지가 뜬다. 작성하면서 확인하니깐 재밌다. ※네이버나 다음 웹 페이지에서 F12(DevTool)를 누르면 HTML로 작성된 페이지 소스를 볼 수 있다.

● 제목은 글자 크기에 따라 h1부터 h6까지 쓴다.

<h1>Hello, world!</h1>

<h2>Hello, world!</h2>

<h3>Hello, world!</h3>

<h4>Hello, world!</h4>

<h5>Hello, world!</h5>

<h6>Hello, world!</h6>


● 문단은 p로 쓴다
<p>Hello, world!</p>

● 글자를 강조하고 싶을 땐 다음과 같이 중첩하여 쓸 수 있다.
b(bold체)나 strong(강조)
<p><b>Hello, world!</b></p>
<p><strong>Hello, world!</strong></p>

● 기울이고 싶을 땐 i(italic체)이나 em(기울기)를 넣는다.
<p><i>Hello, world!</i></p>
<p><em>Hello, world!</em><p>

어떤 것을 사용하든 결과는 똑같이 나온다. 다만 의도가 강조와 기울이는 것이기 때문에 strong과 em을 사용하는 것이 작성하는 데 있어 더 semantic한 요소가 된다. 사용하는 요소가 의도와 더 가깝다는 뜻이다. 의미를 담는 요소들은 SEO(검색엔진최적화)에 영향을 미쳐 검색 시 상단에 뜰 가능성이 높다.
semantic 요소들 <div>, <nav>, <section>, <article>, <header>, <footer>, <main>

● 링크를 넣고 싶을 때 - 앵커를 쓴다.
<a href="applepy.tistory.com">척척석사의 프로그래밍</a>
여기에 target="_blank"를 추가하면 새로운 탭에서 열리게 한다.

----> <a href="applepy.tistory.com" target="_blank">

● 이미지 넣고 싶을 때
<img src="그림1.png">
파일은 작성한 html 파일과 동일한 폴더에 있어야 한다.

● 리스트 표현하기
ul - Unoldered list. 순서가 필요없는 목록
ol - Oldered list. 1, 2, 3과 같이 순서가 필요한 목록
li - list item. ol과 ul의 각 항목들을 나열할 때 사용하는 태그

● 표(table) 만들기
표를 만들기 위해서는 <table>로 시작해야 한다. 표에도 head와 body가 있다. 바로 <thead>, <tbody>이다.
th(table head)는 제목, tr(table row)는 행, td(table data)는 내용이 들어가는 셀을 만든다. 즉 tr의 개수는 행의 개수와 같다.

<table> 안에 boder="1"을 추가하여 표에 1값의 테두리를 주었다. CSS를 배우고 나면 body가 아닌 head에서 스타일 속성을 변경한다. 지금은 CSS 적용 전이므로ㅎㅎ

Alt+b를 눌러 표가 잘 만들어졌는지 확인해 보자.

위와 같이 3열 4행의 표가 잘 만들어졌다. 굿.


● 사용자의 입력을 받는 form 만들기
서버로 데이터를 보낼 때 사용하는 요소. input과 label 태그를 사용한다.
<form action="URL"> URL에는 서버로 데이터를 보낼 때 입력된 데이터가 도착할 URL을 입력한다.
아까 만든 테이블 밑에 </br>로 한 칸 띄어준 뒤 form을 만들었다.

입력한 라벨의 타입도 설정할 수 있는데 이름, 학교는 text로, 이메일은 email로 설정하였다. 만약 password로 설정하면 *****이런 표시로 비밀번호가 숨김으로 입력될 수 있게 한다.

짜짠. 폼이 만들어졌다. 여기에 직접 입력할 수 있다. 아주 재미있다.

728x90

'MS AI School' 카테고리의 다른 글

DAY 5 - 자바스크립트 기초(데이터 유형, 함수, HTML에서 작성하기)  (0) 2022.10.13
DAY 4 - CSS 심화 공부(레이아웃, 반응형)  (0) 2022.10.11
DAY 3 - CSS기초 박스모델 공부  (0) 2022.10.11
DAY 2 - CSS를 배워보자  (0) 2022.10.09
DAY 0 - Hello, world! 개발자 마인드, CS 기초  (0) 2022.10.05

+ Recent posts

티스토리툴바