1. img 요소
<img src="image.jpg" alt="이미지의 묘사 내용" />alt
해당 이미지를 설명해주는 부분으로, 150자 이내여야 한다.
<img src="playing-guitar.jpg" alt="기타치는 모습" height="500" width="400" />width, height
width, height 속성은 각각 이미지의 너비와 높이를 뜻한다.
2. 목록 요소
HTML에서 문서 목록을 나타내는 요소로는 ul, ol, li 태그가 있고, 정의 목록으론 dl, dt, dd태그가 있다.
Ul 요소는 Unordered List의 줄임 말로, 순서가 없는 목록 요소를 뜻한다. Ol 요소는 Ordered List의 줄임 말로, 순서가 있는 목록을 말한다. 이 ul, ol 요소 안에 li 요소가 들어가는데 목록 항목을 표현한다.
ol 요소는 보통 숫자 0부터 시작한다. 그러나 ‘start=”숫자”’를 통해 숫자를 지정하거나, ‘reversed’를 통해 역순으로 표현할 수도 있다.
<ul>
<li>밥 짓는 방법<li>
<ol start="10", reversed>
<li>쌀을 씻는다</li>
<li>물에 담근 채 30분간 기다린다</li>
<li>손등에 물이 찰 만큼만 물을 남기고 물을 버린다</li>dl 요소는 Description List의 줄임 말로, dl 요소는 개념과 정의로 이루어진 목록이다. 개념은 dt요소로 정의는 dd요소로 작성한다
ol과 ul은 li요소만을 자식으로 두듯, dl은 dt와 dd만을 자식으로 둘 수 있다. 이때 주의할 점은 dt는 인라인 요소이며, dd는 블럭 요소이기 때문에 dt 안에는 블럭 요소가 들어갈 수 없다는 것이다.
<dl>
<dt>dl요소는</dt>
<dd>개념과 정의로 이루어진 목록이다.</dd>
</dl>3. 의미없는 div/span, 그리고 class 요소
div, span 요소는 아무런 의미를 가지고 있지 않다. 주로 필요에 따라 그룹을 만들거나, css로 조절하기 위해 사용한다. *마크업(문서의 내용 이외에 문서의 서식, 구조 등을 표현하기 위한 부가적인 정보)을 하면서 가장 많이 사용하게 될 요소라 볼 수 있다.
div는 블럭 요소, span은 인라인 요소로, 둘 다 자기자신을 중첩할 수 있다. 특히, div는 레이아웃 잡는 용도로 많이 쓰기 때문에 많이 중첩된다.
Class 속성
<style type="text/css">
.index{
color: blue;
text-align:center;
}
</style>
<span class="index">여기는 개발블로그입니다.</span>div와 span 요소는 보통 class 속성과 같이 사용하는데, class에서 이름을 붙이고 css에서 그 이름을 선택자로 사용하기 때문이다.
<span class="index home">여기는 개발블로그입니다.</span>class는 값을 띄어쓰기로 구분할 수 있어, 여러 개의 요소를 동시에 사용도 가능하다.
4. Class 속성과 Id 속성의 차이
먼저, Class와 ID 속성은 규칙에 맞춰 작성해야 하는데, 이는 다음과 같다.
- 첫 글자는 알파벳으로 시작해야 합니다. (a~z 또는 A~Z)
- 두 번째부터는 알파벳과 숫자 그리고 '-' 또는 '_'가 사용될 수 있습니다.
- 대소문자를 구분합니다.
- 가능한 예시 : abc, Hello, button-2, simpleText, mark_test 등등
- 잘못된 예시 : 2rd, $uper, ch#1, -top, ^^, rec*3 등등
위의 방식만 지키면, 어떤 명칭도 상관 없다는 것이 특징이다. 그러나 중간에 띄어쓰기 사용시 ex) index home, 각각을 클래스로 이해해 2개의 클래스가 만들어진다. 따라서 한 개를 의도 했다면 index-home과 같이 붙여 쓰는 것이 좋다.
Class 관련 Tips
기왕이면 두 가지 단어가 혼합된 클래스(ex. index-home)를 만들 시, '_', '-' 둘 중 하나로 표기하는 것이 제일 좋다. 또한 하나를 선택했으면 그것만 꾸준하게 사용해 실수를 방지하는 것이 중요하다. 그리고 대소문자를 섞어쓰는 것보단 소문자 혹은 대문자만을 사용하는 것이 좋다.
Class요소와 id요소의 차이점
id요소
페이지 내에서 딱 한 번만 선언할 수 있다. 예컨대, index란 아이디 명을 한 번 선언했을 시 다른 요소들은 절대 index란 아이디를 사용할 수 없다.
Class요소
반면, 클래스는 여러 번 사용이 가능하다. 따라서 Class는 범용적 사용시, id는 단 한 번 사용하고자 할 때 사용한다. 또한 클래스는 앞서 말했던 것처럼 띄어쓰기를 이용해 한 요소에 여러 개의 클래스 이름을 지정해 줄 수 있다는 것을 특징으로 한다.(ex. Class="Home Index Casa") 반면 Id는 한 요소에 한 개의 이름만 지정해 줄 수 있다.
<span class="Edsheeran Ed Sheeran" id="X">
<h1>2014년 발매한 앨범</h1>
</div>
<span class="Edsheeran Ed Sheeran" id="%">
<h1>2017년 발매한 앨범</h1>
<p>Shape of you와 같은 유명곡이 수록되어 있음</p>
</div>4. HTML의 메모 기능, 주석
<!-- 주석 내용 -->주석은 메모로 사용되기 때문에, 소스상에서 요소의 시작이나 끝 등을 알려주는 용도로 사용된다.
