HTML
Body
Heading
Divs
Attributes
Displaying Texts
Styling Texsts
Line Breaks
Images
Image Alts
Videos
Unordered lists
Ordered lists
기본적으로 Body 는 <body></body>로 설정, 이후 내부에 <div><div/> 를활용하여 구역을 나눔. div 등 opening tag에 추가적으로 적을 수 있는것이 Atrributes 인데, 부가설명하는 것을 뜻함 <div id = "Nothing"> 이런식으로 id를 활용하여 이름을 붙일 수 있다.
Text를 쓸 때는 <p></p>로 묶어서 표현하고 , <h1></h1> 태그를 활용하여 신문의 헤드라인과 같이 강조된 제목을 적을 수 있다. <em></em>을 활용하면 이탤릭체로, <strong></strong>을 사용하면 볼드체로 기본설정되어있다.
<br>은 줄바꿈
<ul></ul> 을 활용하면 글에 ● 표시를 붙임
<ol></ol>을 활용하면 글에 숫자가 붙음 .
UL 이든 OL이든 내부 요소들에는 <li></li>태그를 붙여야함
<img src = "링크" /> 활용하면 이미지 삽입이 가능하고, <img src ="URL" alt =" /> 를 활용하면 image alts라고 해서 이미지 로딩이 안될 때 alt에 들어가는 텍스트를 마우스 커서를 올렸을 때 보이게 할 수 있다. 특이한 것은 img 태그의 마지막 foward slash의 경우 생략이 가능하다는 점이다.
이로인한 이점은 크게 세가지가 있는데 .
- 위에서 말한 사진 로딩이 안될시 이용자가 사진의 설명을 볼 수 있음
- 시력이 좋지 않거나, 불편한 경우 음성보조기가 해당 이미지를 읽을 수 있게됨
- SEO(서치엔진최적화)에서 이미지를 검색할 수 있어 해당 웹페이지의 랭킹이 높아질 수 있음
Video 태그의 경우 img와 다르게 오프닝과 클로징 태그가 다 필요하다.
또한 width(너비) hieght(높이) controls(재생 및 일시정지 포함) 의 부차적인 설정이 들어가줘야 한다.
<video src =" " width = "" height = "" controls> 텍스트 </video>
이런식으로 구성된다. 중간의 텍스트의 경우 브라우저가 동영상을 로딩할 수 없을 때 보여지는 문구가 된다.
10/21 추가
<a></a> anchor라고 부르고, 링크를 거는 역할을 함
<a href="URL삽입"> 텍스트 </a> 이렇게 씀
이것과 동시에 id 라고 하는 attribute를 이용해서 (예를 들면, 위의 div 의경우 <div id="nothing"></div> 이런 식으로 id를 지정하는 것을 말함 일종의 책갈피 기능) 링크를 클릭했을 때 같은 페이지 내의 해당 목차로 이동하는 기능을 구현할 수 도 있음
여러가지가 있지만 ./텍스트 를 통해서 anchor 태그를 이용하여 해당 문서로 연결시킬수도 있고 , anchor tag 에 다가 img 태그를 포함시켜 (이 때 오프닝 anchor tag에 href 로 링크 삽입하는 것이 있음을 유의) 이미지에 링크를 걸 수 도 있고 , 아래ㅣ에서 보여줄 기능(# + id을 활용) 으로 동일 페이지 내로 이동할 수 도있다 .
이런식으로 할 수 있다.
이 경우에 내가 작성한 코드는
<ul>
<li><a href = "#title"> HTML제목으로 이동하기 </a></li>
<li><a href = "#extension"> 10월 21일 추가한 내용으로 이동하기 </a></li>
</ul>
이렇게 생겼다.
identation 과 white space 약속
코드를 읽을 때의 시인성을 위한 약속으로, 흔히 아는 내용이다.
스페이스바를 활용해서 시인성이 좋게 태그간 구별을 해주고
스페이스바 두번 혹은 탭 한번을 활용해서 태그간 위계 구분을 잘 보이게 해준다.
주석달기
<!-- 내용 --!> 이런식으로 달 수 있다.
'IT 관련 > 개발(Codecademy)' 카테고리의 다른 글
| CSS / Display and Positioning , Flow of HTML에 관해서 / (0) | 2022.11.14 |
|---|---|
| CSS Visual Rules , BOX Model / 코드카데미 프론트엔드 코스 #6 (0) | 2022.11.13 |
| Semantic HTML 에 대해서 / 코드카데미 프론트엔드 디벨로퍼 코스 #4 (0) | 2022.10.28 |
| HTML에서의 Table 활용과, 왜 CSS를 활용하여 border를 만들어야 하는지에 대해, colspan 과 rowspan 그리고 tbody #3 (2) | 2022.10.27 |
| Mozilla Developer Network(MDN) 문서 중 HTML Debugging에 관한 내용. Permissive Code 란? (0) | 2022.10.27 |