출처 unsplash
🪵생활코딩 WEB1:HTML&Internet 강의 바로가기
https://www.youtube.com/watch?v=tZooW6PritE&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb
🪵마인드셋
"코딩을 배우는 학생이아니라 스스로의 문제를 해결하는 엔지니어" 라 생각하기
🪵생활코딩 유튜브로 HTML 공부하기
🪵HTML이란?
- 웹사이트를 구성하는 언어
- 가장 쉬우면서도 가장 중요한 언어
🪵태그
- 컴퓨터랑 명령하기위한 시적언어
- 태그를 통해 보여지는 걸 다르게 표현할 수 있다.
🌳웹을 가독성있게 만드는 기본 태그정리
- 아래정리된 태그 외 필요한 태그가 있다면 구글링을 통해서 찾을 수 있다.
- 웹페이지에서 어떤 태그가 사용 됐는지 알고 싶을 때는 html br(태그종류) tag라고 검색하면서 알아가기
🌱
<strong>글자 볼드체로 전환</strong>
<u>밑줄 태그</u>
<em>글자 기울기 태그</em>
<p>단락태그</p> - html new line tag
<br></br>
<p style = "margin top: 24px">공간만드는-법</p>
🌱태그로 제목쓰기
<h1>~<h6> headings 제목으로 지정하는 태그🌱태그공부 다양하게하기(꿀팁💡)
- 공부법 어떤 코드가 가장 많이 사용되는 지 통계로 확인해보자
https://www.advancedwebranking.com/seo/html-study/
www.advancedwebranking.com - 그외 공부법 frequency of japanese word와 같이 언어공부에도 활용가능
🌳 목차만들기
- 태그간에 부모태그, 자식태그가 존재하는데 주로 목차만들기에 쓰인다.
<li> : list
<ol> : ordered list
<ul> : nodered list🌱목차를 만들고 싶을 때??
<ul>
<li>list를 뜻한다</li>
</ul>🌱번호 순서를 매겨 목차를 만들고 싶을 때??
<ol>
<il>라라라</il>
</ol>🌱해당 웹페이지가 어떤 코드로 이루어졌는지 확인하는 법
- View page source 확인하기
- 모르는 태그가 나왔을 때
- hyml spacifiation :W3C에서 만든 공식 설명서보기
🌳이미지(img) 태그 속성추가(src)
- 태그의 이름만으로는 정보가 부족함으로 이미지 태그옆에 source 를 달아준다.
- scr = "이미지파일명" 으로 넣어줄 수 있다.
<img src="" width="100%">-
width와 같이 달아주는 것을 attribute 속성 이라고 한다.
🌱이미지크기 변경하기
-
width(가로) 또는 height(높이) 속성을 이용해서 변경할 수 있다.
<img src = "사진.jpg" width = "100"> // 100픽셀 크기로 이미지를 맞춰줘
<img src = "사진.jpg" width = "100" height = "300"> //높이를 같이 변경할 때 height값 설정해주기- 단, width와 height 속성을 함께쓰면 원본 비율과 달라 이미지가 왜곡될 수 있으니 둘 중 한개만 사용해주면 된다.
🌱alt 속성값
- alt : alternative text
- 이미지가 출력되지않을 경우 alt 속성값이 표시된다.
(인터넷 접속 지연 또는 이미지 파일 오류, 이미지 파일 이름변경 등의 이유) - 이미지 출력에 오류가 생길 경우 활용할 수 있다.
<img src = "사진.jpg" height = "100%" alt = "이미지파일을 가져올 수 없습니다">🌱<title=" ">태그 활용해 이미지 설명 달기
- 이미지에 마우스를 가져가면 "코딩공부중"이라는 설명을 확인할 수 있다.
<img src = "사진.jpg" height = "100%" title = "코딩공부중">🌱저작권없는 사진 다운 받을 수 있는 사이트
- https://unsplash.com/ko 참고
- 다운 받아서 rename 해주자
unsplash.com
🌳태그로 링크달아주기
- 본문에 글을 클릭해 링크로 이동이 가능하다.
<a href="링크주소"></a>
🌳HTML이 중요한 이유
🌱웹페이지 구성이 그림보다 문자로 표시 될때의 장점
- 시각장애인들은 리더기를 통해 문자로 된 정보가 전달 받을 수 있다. 하지만 그림 또는 사진자료 같은 경우에 '존재하지 않는 정보'로 인식되어 전달이 불가하다. 이미지태그 같은 경우에는 사진이름 저장시 정보를 알 수 있도록 설정해주자. 다양한 사람들이 정보를 전달 받을 수 있도록 이미지파일명 또한 태그처럼 기능을 알아보기 쉽게 이름을 짓는게 중요한 것 같다.
🌳최초의 웹사이트 감상하기
- primitive web팀 버너스리
info.cern.ch - 처음 등장한 웹사이트라니 너무 신기하다
- 이제 나도 만들 수 있겠다.
🌳웹 사이트완성
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>things I studied.</h1>
</body>