‘23.3.29(수) 완료
강의에서 사용한 태그와 각 태그의 속성 정리
<head>
profile(1.해당 문서 정보가 수정이나 추가된 경우 그 정보가 담긴 페이지의 URL 지정/ 2. 메타 태그 내용 속성에 있는 정보를 브라우저가 잘 이해하도록 도움) –속성값:URL [HTML5에서는 더 이상 지원하지 않음] 요소 <title> HTML문서 전체의 타이틀 표현 요소 <meta> name(메타 요소가 어떤 정보의 형태를 갖고 있는지), content(실제 메타데이터의 컨텐츠)
<body>
배경에 관한 속성 bgcolor(문서의 배경색 설정), background(문서의 배경 이미지 설정, 패턴 형식으로 적용됨) -링크에 관한 속성 text(글자색상), Ink(링크로 설정한 글자색 지정), alink(링크를 클릭했을 때 변화되는 색 지정), vlink(방문한 적이 있는 링크일 때 색 지정) -여백에 관한 속성 topmargin(위쪽여백), rightmargin(오른쪽여백), bottommargin(밑쪽여백), leftmargin(왼쪽여백)
<h(n)>
align(글자 좌우 정렬 기능) -속성값: left, center, right title(풍선 도움말을 만들어주는 속성)
<p>
align="left (왼쪽 정렬)| right (오른쪽 정렬)| center (가운데 정렬)| justify(양끝 정렬)”
<br>
class(문서의 요소를 식별) ,clear(오른쪽 또는 왼쪽 정렬을 취소), id(문서의 요소를 식별), style(요소에 대한 인라인 스타일을 지정), title(문서에 대한 제안 제목 열기 가능)
<a>
href=””(“”내의 링크 주소로 이동) target=”_blank”(새로운 탭)
<img>
src(경로지정) alt(설명) width(픽셀단위) height(높이) *숫자만, 혹은 %사용
<strong>
중요한 텍스트라는 것을 알려주는 역할을 한다. 이 태그를 쓰면 태그와 태그 사이에 있는 내용은 bold체가 된다. 혼자서도 중첩이 가능하며 <em>과 함께 중첩이 가능하다. -span ( 하이라이트 기능)
<em>
텍스트를 강조해주는 역할을 한다. 이 태그를 쓰면 태그와 태그 사이의 내용은 기울어지게 된다. 혼자서도 중첩이 가능하며 <i>와 함께 중첩이 가능하다.
<b>
텍스트를 굵게 해준다. 문법적인 강조는 하지 않는다는 점에서 <strong> 과 차이가 있다.
<i>
텍스트를 기울어지게 해준다. 문법적인 강조는 하지 않고 스타일링일 뿐이라는 점에서 차이가 있다.
<ul>
순서가 없는 목록에 사용.
<ol>
순서가 있는 목록에 사용. type 속성을 사용해 숫자 대신 기호로 순서를 표시할 수 있음.
<dl>
용어의 정의나 설명글에 사용. 하위 태그로 <dt><dd>를 사용하여 용어의 정의와 설명에 활용할 수 있음.
⚡ 토론해보아요 !
가장 자주 사용할 것 같은 태그와 그 이유는 무엇인가요?
<p>태그, 단락을 가독성 좋게 분리할 때 자주 사용할 것 같다.
<h1>~<h6> 태그
1에서 6으로 갈수록 폰트 크기와 작아지고, 얇아짐 ->콘텐츠의 대제목, 중제목, 소제목에 사용하여 보기 편하게 만들 수 있을 것 같음.
<a> 태그
당장 우리가 사용하는 웹 사이트들만 봐도 링크 연결이 없는 웹은 없다고 봐도 무방하기 때문에 자주 사용할 것 같다.
<img>태그
요즘은 글이나 웹 페이지에 거의 다 사진이 첨부되어 있기 때문에 <img>태그가 자주 쓰일 것 같다.
비슷하다고 생각하는 태그와 각 태그별 차이점은 무엇인가요?
<strong>-<b>
전자는 의미를 강조하고 후자는 시각적으로만 강조 해줌.
<em>-<i>
전자는 텍스트를 강조하며 강조하는 역할을 하고 후자는 시각적으로 기울이기만 한다.
<p>와 <br> 모두 글을 보기 편하게 정렬하는 태그라는 점이 비슷하다.
차이점: <p> 태그는 단락을 나누고, <br> 태그는 줄을 바꾸는 태그이다.
강의 내용 이외의 태그 중에 사용해보고 싶은 태그가 있다면 소개해보아요!
<object> 태그, 웹페이지에 다양한 정보를 담을 수 있어서 정보의 확장에 용이하기 때문이다.
<audio>
control -> 웹 화면에 컨트롤 막대를 표시하고, 재생/멈춤, 진행바, 볼륨 등을 조절하고 싶다.
autoplay -> 오디오가 실행될 준비가 끝나는 대로 자동 실행 기능을 사용해보고 싶다.<textarea> --> 여러 줄의 텍스트를 입력하는 영역인데, 이를 사용해서 웹페이지를 예쁘게 디자인할 수 있을 것 같기 때문이다.
<table> 태그랑 표 작성 관련 다른 태그들을 사용해서 표 만들어보고 싶음
<textarea> 여러 줄의 텍스트를 입력하는 영역인데, 이를 사용해서 웹페이지를 예쁘게 디자인할 수 있을 것 같기 때문이다.