003. HTML요소 (Attribute,속성)을 알아보자!

오늘은 저번 시간에 이어서 HTML요소 중

하나인 태그의 Attribute(속성)을 알아보려고 한다.

태그 안에서 쓰이는 것으로,

속성을 부여하면! 조금 더 구체적인

명령을 내릴 수 있다.

class 부분은 css(꾸미기)를 해줄 때, 내가 원하는

class들을 어떤 식으로 꾸밀지 정하는 '방'같은 것이다.

버튼이 안 보이게 할 건지, 진하게 할 건지 등등을

class를 통해 정의해줄 수 있다.

 

위의 tag모음들은 안에 컨텐츠가 

들어가지 않으면 유저에게 보여지지 않는다.

 

<!-- ㅁㅁㅁ -->

그리고 위 tag는 개발자들끼리 소통할 때 꼭 필요한 녀석이다.

문서에 코멘트를 달아서 (주석)

이게 무엇인지 설명해주는 역할을 한다.

 

그리고 <a>tag와 함께 쓸 수 있는 속성값들에

대한 분류는 모두 mdn사이트의 html elements reference에서

확인이 가능하다.

HTML요소들 각 기능의 데모버전을 한 번씩 타이핑하고,

어떤 기능들인지 빠르게 익히는 것이 관건일 것 같다.

 

위의 <a>tag에 <href>, <target> 속성을 부가적으로 사용할 수 있다.

그리고 그 예시는 아래와 같다.

 

href는 하이퍼링크 (우리가 링크하고 싶은 주소를 적는 것)

target은 어디에 이 페이지를 열 건지 정의해주는 것.

그리고 target에도 또 종류가 있어서

새 창에서 열 건지, 현재 페이지에서 열 건지 

등등을 정할 수 있다.

 

저 Click 버튼 누르면 이제 구글 창으로 간다.

p는 paragrah의 약자이기 때문에 문단을 정의할 때 쓴다.

그리고 문단 안에

<b>꿈이</b> 를 입력해주면 그 부분만

글씨 진하게 효과를 줄 수 있다.

( <b>태그는 인라인 태그임

<b>를 쓴다고 해서 문장이 다음 줄로 넘어가지 않는다.)

 

그리고 <span>태그를 사용해서 이 부분만 

나중에 css로 배경색 지정을 할 수 있다.

span을 이용했기 때문에 (inline) 문장이 역시 넘어가지 않는다.

 

block과 inline은 자동으로 줄바꿈을 바꿔주느냐 아니냐의 차이다.

div 태그를 사용하면 이렇게 문장이

다음 문단으로 넘어가게 된다.

목록을 표현하는 element인 

<ol>은 Order List의 약자이다. (순서가 있음. 1./2./3. 이런 식)

 

ol>li*3 +Tab 하면 자동으로 3개의 목록을 

쭈르르 만들 수 있다. (단축키임)

<ul>은 Unordered List의 약자다. (순서가 없음)

 

출처 위 사진과 동일.

<d>은 Description List의 약자다. (개념과 정의로 나뉨)

 

그리고 <ol>의 속성값은 역시 MDN사이트에서 확인이 가능하다.

<ol>을 사용할 때, 요 명령어들을 더해서

보다 구체적으로 명령을 내릴 수 있다.

 

예시 1: Type속성 부여해서, 로마글자로 바꾸기

 

<ol>에 [Type] 속성값 i를 부여해줬더니

Roman 글자로 변환된다.

 

예시 2: Reversed 속성 부여해보기.

리스트를 역순으로 바꿔주는 속성값인데

밸류값을 넣지 않아도,

자동으로 바뀌는 모습을 볼 수 있다.

(토글 형식으로 reverse기능을 켜는 것)

 

HTML요소들 중에서도 <input>은 자주 쓰이는 기능 중 하나다.

사용자에게 input을 받아야 원하는 결과를 출력할 수 있기 때문이다.

 

우리가 원하는 데이터를 사용자(user)에게 요구해서

사용자(user)에게 그 데이터를 받을 수 있다.

 

보통 <input>만 쓰기보다는 label을 같이 써서

사용자에게 어떤 정보를 원하는지 명확하게 요구한다. 

(화면에 뜨진 않지만, 이름표 같은 거라고 생각하면 될 듯!)

 

→ label과 input은 둘다 in-line태그. (한 줄에 동시에 태그되는 것이 그 증거)

그리고 input은 한 페이지 안에

워낙 많은 input들이 들어가기 때문에

id로 고유한 식별자를 준다.

 

<input id="input_name" type="checkbox">

너는 input의 이름이고,

<label for=input_name">Name </label>

label은 이 input name을 위한 이름이다라고 정의하는 것이다.

 

*

그리고 input에도 종류가 여러가지 있는데

버튼, 체크박스, 컬러, 날짜, 패스워드 

 

예시 1: input에 type="color"속성 값을 준 모습이다.

 

그리고 input의 password 속성을 이용해서

비밀번호 입력 창도 만들 수 있다!

 

이상 유튜브 코딩엘리님 강의를 보고

HTML요소들 중 자주 쓰이는 것들을 정리해봤다.

이제 조금씩 개념이 잡혀가는 것 같다.

에치티엠엘+css 책 한 권 샀는데

그거랑 유튜브에서 예제 계속 따라하다보면

마스터할 수 있을 것 같다.