오늘은 HTML과 CSS의 기초에 대해 배웠습니다.
우선 HTML은 Hyptertext Markup Language의 약자로 논리를 표현한 프로그래밍 언어가 아닌 구조를 표현한 마크업 언어입니다. 문서의 구조를 표현한 언어이기 때문에 문서의 내용과 그 내용의 표현 방식이나 의미를 태그로 표현하고 있습니다. 보통 내용의 앞에 opening tag, 뒤에 closing tag가 붙습니다. 예를 들면 <div>를 앞에 붙이면 뒤에 </div>를 붙여주는 식입니다. 또 태그 자체로 끝나는 self-closing tag도 있습니다.
태그는 다음과 같은 것들이 자주 쓰입니다. 또 자세한 것은 https://developer.mozilla.org/ko/docs/Web/HTML/Element#%EC%BD%98%ED%85%90%EC%B8%A0_%EA%B5%AC%ED%9A%8D 를 참조하면 됩니다.
<html> : html 문서의 시작 태그. 문서 전체의 틀
<head> : 문서에 대한 정보(제목 등등)
<title>: 문서의 제목, 크롬 탭창 같은 곳에 뜨는 이름.
<body> : 문서의 내용
<h1> : heading. 크기에 따라 h1~h6.
<div> : 줄바꿈되는 컨테이너. 다만 <p> 사용을 권장한다고 하네요
<span> : 줄바꿈 없는 컨테이너.
<il> : 앞에 번호가 붙은 목록을 시작
<ul> : 앞에 번호가 붙지 않은 목록을 시작
<li> : 목록의 각각의 내용.
<p> : 한 문단임을 표시합니다.
<section> : 웹 페이지의 한 의미 단위또 태그에 내용에 대한 정보가 있는 경우도 있습니다.
<img src="https://i.imgur.com/JVAj4t0.jpg"> 에서 img 는 태그 이름, src 는 태그 속성 (attribute), 주소 부분은 태그 값(value)라고 합니다.
<img> : 이미지. <img src=주소 혹은 이름>
<a> : 링크 만들기. <a href=주소 target="_blank"> 이부분을 클릭하면 링크로 이동 </a>
target="_blank" 가 있으면 새탭에서 열리고 아니면 현재탭에서 이동.
<script> : 자바스크립트 구문을 실행. <script src='./sript.js'></script> 같은 식.또 로그인할 때 ID를 입력하는 부분이나 확인사항 체크 같은 곳 같이 입력을 받을 수 있게 해주는 태그도 있습니다. 태그 이름은 input으로 하고 type이라는 태그 속성에 해당하는 값에 따라 그 형태가 바뀝니다.
<input type="text"> :id입력 칸 같은 입력 칸을 만듭니다. placeholder="설명" 을 추가하면 그 칸에 아무것도 입력하지 않았을 때 설명을 표시할 수 있습니다.
<input type="radio" name="name"> : 속성 name에 해당하는 값이 같은 radio type input들 중에 하나만 선택할 수 있는 칸들을 만듭니다., value="a" 를 추가할 수 있습니다.
<textarea> : 줄바꿈이 가능한 텍스트 입력칸을 만듭니다. textarea의 경우 closing tag </text area>가 필요합니다.
<input type="checkbox"> : 개별적으로 선택이 가능한 선택칸을 만듭니다. checked 속성을 추가하면 선택되어져 있는 상태로 시작합니다.
한편 HTML에서 <와 >가 tag로 사용되기 때문에 <a> 같은 것은 직접 사용할 수 없습니다. 이렇게 문법과 겹치는 글자를 표시하기 위해서 < 같은 방식이나 < 같은 방식으로 표현할 수 있습니다. 자세한 것은 http://kor.pe.kr/util/4/charmap2.htm 같은 페이지를 참고하거나 구글에 html 특수문자 를 검색해보세요.
