<HTML>생활코딩 WEB1 | 시작 |목차만들기 | 이미지태그에 속성넣기

Chaeyoung·2023년 2월 5일
0

출처 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 제목으로 지정하는 태그

🌱태그공부 다양하게하기(꿀팁💡)

🌳 목차만들기

  • 태그간에 부모태그, 자식태그가 존재하는데 주로 목차만들기에 쓰인다.
<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 = "코딩공부중">

🌱저작권없는 사진 다운 받을 수 있는 사이트

🌳태그로 링크달아주기

  • 본문에 글을 클릭해 링크로 이동이 가능하다.
<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>

🌾 혼자 복습하기

0개의 댓글