html (inline과 멀티미디어 속성 약간)

앞에서는 block요소의 부분과 inline부분을 약간 진행하였다. 

html은 전체적으로 구조를 나타내는 부분으로 나무를 나타낸다고 하면  css 꾸며주는 낙엽잎이다. 

block요소는 레이아웃부분은 나타내어주고 inline요소는 text를 의미하는 부분이다.

 

---

 

• abbr =abbrevivation로 약어를 의미한다. 약어를 사용하는 부분에 emmt로 이용하여, 약어를 표현할 부분을 rapping하고 abbr title로 어떤의미인지 표현하여준다. <abbr title ="cute jjungle"> 쩡글이 </abbr>이런식으로 묶어준후 쩡글이라는 단어에 마우스를 가져다가 대면 힌트를 제공해준다. inline속성이다.
• title의 경우 전역속성이기때문에 전체영역에 사용가능한 부분을 가지고 있다. 그렇기 떄문에 어디서든 사용이 가능하다.
• b=범위와 표시를 지정하는  bring attention의 단어이다. 문체를 다르게 하여 범위를 설정하는 부분인데, 1. 의미가 없는 부분에 작성을 한다. 2. 그냥 읽는 흐름에 도움을 전달하기 위하여 사용을한다. 3. 다른 태그를 사용하기에 적합하지 않을 때 사용하는 마지막 수단으로 사용가능하다. 4. 글자를 두껍게 사용하기 위하여 사용한다. (BOLD)속성으로 font-weight(폰트가로두께)를 css로 이용하여 해지가능하다. 
• i=마찬가지로 의미가 없고, em,strong,mark,cite,dfm등에서 표현할 수 있는 적합한 의미가 아닌 경우 사용을 하며, 평범한 글자와 구분을 하고 아이콘이나 특수기호 부분에 구분을 하기 위하여 작성을 한다. b는 일반적인 부분에 사용을 하고, i의 경우는 일반적이지 않고 아이콘과 특수 기호에 작성을 한다. 
• mark = 사용자의 관심을 끌기 위하여 형광펜으로 칠하는 효과를 주는 의미보다는 시각적인 표현을 주는 방법이다. 글자의 배경을 노란색으로 표현하며 사용자의 관심을 끌기위해 하이라이팅을 준다. css로 대체가 가능하며, 관심을 가져야 할 때 작성을 하는 부분이다. css로 색상을 변화줄 수 있다. 
• em = 의미를 강조하기 위하여 표시한다. 이켈리체( 누워있는 문체) 로 작성이 된다. 1. 중첩이 가능하다. <em>사랑스러운<em>햄스터</em>입니다.</em>2. 중첩이 될수록 강조의 의미가 더해져 나는 햄스터!!로 강조를 한것이다. 3. 시각적인 부분에서는 차이는 없다. 그러나 정보통신기기에서 구두 강조로 발음되어 시각장애인이 듣는 정보통신기기에서 햄스터라는 부분이 강하게 발음되는 것을 알 수 있다. css에서 폰트를 font-srtyle=normal 로 정상적으로 변경가능하며  font-weight=bold로 폰트를 두껍게 변경할 수 있다. 
• strong = 의미의 중요성을 나타내는 부분으로 기본적으로 글자가 bold하게 표현된다. 
• dfn = <di><dt><dd>의 대용으로 특정부분의 용어를 정리 할 때 사용한다. 용어의 명시, 용어의 정의를 해주는 부분이다. <p><dfn id="def internet">The internet</dfn>으로 작성된다.
• cite = 창작물의 참조, 책, 논문, 영화등 제목을 정의한다. 이켈리체로 작성이 된다. <cite>그림의 이름</cite>by 그림의 작성자 inline요소이다. 
• q=짧은 인용문의 url을 설정할 때 사용이 된다. block quote은 긴 인용문 
• u = underline으로 의미가 없으며 단지 밑줄의 효과를 얻는 순수하게 꾸미는 활동을 한다. css로 대체가 가능 한 부분으로 a를 사용하여 링크를 걸때 밑줄과 같은 색상을 넣어 헷깔릴 수 있는 링크를 만들어 낼 수 있어 주의가 필요한 부분이다. span으로 emmt으로 rapping 을 하여 css에서 style = text deration:underline으로 underline css로 밑줄 치는 것이 가능 하기 때문에 css활용이 어려운 곳에서만 사용하길 추천한다. 
• code = 컴퓨터의 코드 범위를 설정하고, 코드처럼 보여줄 수 있도록 rapping하여 보여주는 언어이다. <code><document get elementById('id-value')</code>is apiece of computer code 코드부분을 rapping한다. css에서 style변경이 가능하며, 기본적으로 고정폭(monospace)계열로 표시가 된다. (문체는 css의 font family에서 다시 배울예정) code{color : orange; background :lightgray; padding:2px; border :1px solid green;}으로 css에서 box형태로 꾸며줄 수 있으며 코드라는 것을 표현 할 수 있다. 
• kbd  =keyboard 의 약어로 키보드에서 사용자의 입력을 나타내는 텍스트이다. 범위를 설정해주며 <p><kbd>f5</kbd></p>으로 모노스페이스 키로 css를 입혀서 키라는 부분을 표시할 수 있다. kbd{ padding :0 3px; border-radius :3px(모서리를 깍아줌) border-top=2px solid rgb(240, 240, 240); 으로 bottom등 위아래좌우를 선과 선의 두께 모양을 지정할 수 있으며 rgb의 함수로 어떤 color의 색상으로 입힐 것인가 하고 색상을 지정한다. 
• sup = 위첨자 <p>X⁴Y³</p> =X⁴Y³으로 표현된다.
• sub = 아래첨자 <p>H₂O</p>=H₂O_{으로 표현된다.} 
• time =날짜와 시간을 나타내는 목적으로 사용한다. 유효한 날짜와 문자로 정확하게 작성하기 위해서는 datetime이라는 속성을 사용하여 나타낼 수 있다. YYYY-MM-DD로 나타내며 explorer에서는 사용이 불가하다. 
• span = inline에서 div처럼 사용되는 의미없는 요소이다. 막 사용이 가능하며 css입력시 java sp의 링크를 걸어줄 때 많은 사용을 한다. div처럼 1줄에 1개씩 들어가는 태그가 아닌 특정한 부분을 잡아서 사용이 가능하기 때문에 java sp때 사용이 가능하다. span class = "bold"로 설정시 css에서 .bold {font-weight = bold; color= red; font-size=2px;}처럼 그 속성을 따와서 입력이 가능하다. 
• <br/> = break의 약어로 줄바꿈의 의미를 가지고 있는 빈태그이다. display는 inline요소 이며, 인위적으로 줄바꿈을 하고 싶은 부분에 <br/>으로 입력하여 줄바꿈을 입력해주는 부분이다. html의 작성시 주의하여야하는 부분은 간격을 벌리기위해 여러번 사용하는 것은 금지된다. html은 구조를 만들어주는 부분으로 꾸며주고 간격을 넓히고 싶다면 p를 이용하여 emmt하여 rapping하여 진행하면 된다. line-height:16px*1.4;가 일반적인 간격이며, 1줄의 높이를 정해줄 수 있다. 50px로 정해준다면 단어가 들어가는 부분이 50px로 50-글자의 두께 (16px) =34px이 남은 공간이며 위아래로 나눠줄 경우 /2로 하면 글자top과 bottom부분이 17px, 17px로 글자사이와 간격을 계산하여  css에 입력하면 된다.

수정관련 tag 

1. del =특정컨텐츠가 있었다가 사라짐 cite의 속성으로 수정된이유와 변경된 이유의 url을 입력 가능하며 datetime을 이용하여 언제 없어진건지 작성이 가능하다. 
2. ins = 새로 추가된 없다가 생긴 text범위를 이야기한다. 마찬가지로 cite를 속성으로 이용하여 변경url을 입력가능하며page citelink를 작성할 수 있다. datetime을 이용하여 유효한 날짜를 작성할 수 있다.

my favorite color is <del>black</del><ins>bule</ins>!=

blackbule 

으로 표현이 가능하다. 없애고 싶다면  css으로 수정이 가능하다. 

------inline의 경우 의미에 대해서만 집중하면 된다. 

멀티미디어 

• <img/> = 이미지를 삽입한다. <속성> src ->이미지의 url 을 입력할 수 있으며 sorce를 의미한다. 개발자 도구를 이용하여 png의 px크기를 확인 할 수 있다. alt ->이미지를 대체 하여 나타낼 수 있는 text 이다. 
• src는 <body> 부분에 img요소를 넣을 때 link img 의 경우 width ="333" || height = "444"으로 간단하게 이미지를 정사각형으로 한쪽방향으로 작성하여 크기를 조절할 수 있으며 css에서는 img { width=666;}으로 변경이 가능하다.
• 반응형 웹사이트의 정의로 srcset 와 sizes가 있다. 
• srcset = 브라우저에서 제시할 url와 원본크기의 목록을 정의한다. 
• sizes = 미디어의 조건과 해당조건일 때 이미지의 최적화 크기의 목록을 정의 한다. 
• css의 "미디어 쿼리 " background-image=속성의 경우 전부 지정하여야하지만 html의 지정을 할 경우 sizes와 srcset의 크기만 설정하고 고견사항의 경우 사용자의 브라우저에 떠넘기기가 가능하다.