[광주 인공지능사관학교 1기 아홉번째 날] HTML

🍓𝗪𝗲𝗯

안오늘 2020. 7. 16. 10:14

HTML : Hyper Text Markup Language

웹 페이지를 만들기 위한 언어로, 웹 브라우저 위에서 동작한다.

크롬의 개발자 도구 : cmd + option + i

프론트엔드 개발자는 : 코드창 보는 시간 반 + 개발자 도구 보는 시간 반

기기 마다 화면의 비율이 달라지기 때문에, 이에 대응해야 한다. -> 초반에 잘 짜면 한번에 대응되고 간단한 몇 개의 수정만 거치면 된다.

Element와 Sources 많이 볼 것.

HTML : 웹을 구성하는 뼈대 역할

CSS : 웹을 꾸미는 작업

+ js, python, django, AWS(서비스 배포 시 사용)

<something>내용<something/> HTML은 태그로 이루어져 있다!

something : 속성의 이름

내용은 속성을 통해 표현된다!

html:5 나 ! + tab 하면 기본적인 구조가 완성된다.

태그는 열고 닫는 태그로 구성-> 닫는 태그에는 </속성이름>

head: html의 기본적인 정보를 담고 있다. 제작자. 문서의 제목.

body: 실제 화면에 나타나는 부분

heading tag : 글자를 나타내는 태그 <h1></h1> 제목나타냄 <h2></h2> .... <h6></h6>

paragraph tag : 문단 태그 <p></p>

Lorem : 의미없는 더미 텍스트

스크린리더기 : 접근성을 생각하는 개발자가 되자.

웬만하면 제목은 h#로, 문단은 p로 작성하기.

<div></div> 어디서든 쓸 수 있다. 그래도 접근성을 위해 제목이면 h#~, 문단은 p로~!

어느 순간... div만 쓰는 나의 모습 발견할 수 있다. 전체로 묶는 역할도 한다.

<span></span> inline content. ( 안에 내용만큼 공간을 차지하고, 줄바꿈하지 않음! 같은 줄에 오게 할 때 )

block content : 한 줄 차지 한다. 다음 것은 무조건 다음 줄

<ol> <ul> 차이

ol : ordered list 자동으로 순서 매김 내용 쓰려면 <li>로 감싸서 써야 한다.

ul : unordered list 순서가 없이 . 으로 나열. <li>로 감싸서 내용을 나열할 때 써야 한다.

<a></a> 링크 연결

<img/> 이미지 태그 (따로 글자쓰는 것 없이 닫는다)

<img src="연결할 사진 주소(절대경로나 상대경로)"/> 프로젝트 내에서 쓸 때는 보통 상대경로 쓴다

태그의 종류를 많이 알게되면 html 잘 하게 되는 것이다

다른 언어와 달리 -> 짱구 돌릴 필요 없다.

과제 : codecademy(기본적으로 코드 공부할 수 있는 곳)에서 로그인하고

Learn HTML에서 1~2시간 복습해보면서 친숙해질 것.