2021.3.6 토요일

최대환·2021년 3월 7일
0

TIL

목록 보기
7/55
post-thumbnail

🚩 오늘 공부량

공부내용

생활코딩(WEB1- HTML & Internet) 기본문법 태그(5강) ~ 원시웹(16강)

공부시간

2시간 33분


📖 오늘 배운내용

📄 strong태그

🎨특징

  • strong 태그는 매우 중요한 텍스트를 정의하는 데 사용된다.
  • 내부의 텍스트는 진하게 표시된다.

👀마크다운 작성시

이렇게 특정한 텍스트를 <strong>굵게</strong> 쓸 수 있다.

👉결과

이렇게 특정한 텍스트를 굵게 쓸 수 있다.


📄 u 태그

🎨특징

  • u 태그는 내부의 텍스트를 밑줄로 표시한다.
  • 하이퍼 링크에 혼동될 수 있는 요소를 사용하지 않는다.

👀마크다운 작성시

이렇게 특정한 텍스트를 <u>밑줄을</u> 그어줄 수 있다.

👉결과

이렇게 특정한 텍스트를 밑줄을 그어줄 수 있다.


📄 h1~6 태그

🎨특징

  • HTML 제목을 정의하는데 주로 사용한다.
  • h1부터 h6까지 있고 번호가 높아질수록 크기가 작아진다.

👀마크다운 작성시

<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>

👉결과

제목

제목

제목

제목

제목
제목

📄 br 태그

🎨특징

  • 텍스트 줄바꿀때 사용한다.
  • 종료 태그가 없다.

👀마크다운 작성시

안녕하세요.<br>저의 꿈은 계속발전하는 개발자가 되는 것입니다.<br>앞으로 블로그에 매일 공부한 내용을 정리해서 올리겠습니다.

👉결과

안녕하세요.
저의 꿈은 계속발전하는 개발자가 되는 것입니다.
앞으로 블로그에 매일 공부한 내용을 정리해서 올리겠습니다.


📄 p 태그

🎨특징

  • paragraph의 약자로 하나의 문단을 만들때 사용합니다.

👀마크다운 작성시

<p>안녕하세요.<br>저의 꿈은 계속 발전하는 개발자가 되는 것입니다<br>앞으로 블로그에 매일 공부한 내용을 정리해서 올리겠습니다.</p><p>이런식으로 새로운 문단을 시작해 글을 쓸 때 사용합니다.</p>

👉결과

안녕하세요.
저의 꿈은 계속 발전하는 개발자가 되는 것입니다
앞으로 블로그에 매일 공부한 내용을 정리해서 올리겠습니다.

p 태그는 이런식으로 새로운 문단을 시작해 글을 쓸 때 사용합니다.


📄 img태그와 속성

🎨특징

예시) <img src="~~.jpg"  width="~~">

  • img 태그는 HTML페이지에 이미지를 포함하는데 사용된다.

  • 예시에서 src랑 width를 속성이라 하고 "~~"안에 있는 값을 속성값이라고 한다.

  • 속성의 위치는 개수는 상관없다 .

  • 속성은 태그이름만으로 정보가 부족할때 사용한다.

👀_마크다운 작성시

<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Nnx8Y29kaW5nfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" width="500"

👉결과


📄 부모자식관계인 ol,ul태그와 li태그

🎨특징

예시) 
<ol>
    <li>HTML
    <li>CSS
    <li>JavaScript
</ol>

  • 태그가 포함관계로 연결되어 있을 때 포함한 태그를 '부모태그' 포함된 태그를 '자식 태그'라고 한다
  • ol은 'ordered list'의 약자로 li의 순서를 나타낼 수 있다.
  • ul은 'unordered list'의 약자로 li를 순서없이 나열할 때 사용한다.
  • 부모자식이 짝궁으로 쓰이는 다른 대표적인 예시의 태그는 table이 있다.

👀__마크다운

<ol>
    <li>HTML
    <li>CSS
    <li>JavaScript
</ol>
<ul>
    <li>HTML
    <li>CSS
    <li>JavaScript
</ul>

👉결과

  1. HTML
  2. CSS
  3. JavaScript
  • HTML
  • CSS
  • JavaScript

📄 가장 많이 쓰이는 태그들

🎨특징

예시)
<!doctype html>
<html>
<head>  
    <title>
    <meta charset='utf-8'>
</head>
<body>
<body/>

  • doctype 선언은 html태그를 정의하기전에 선언되어야만 한다.
  • doctype 선언은 HTML태그는 아니지만, 선언된 페이지의 HTML버전이 무엇인지를 웹 브라우저에 알려주는 역할을 한다.
  • head태그 안에는 본문을 설명하는 태그, body 태그 안에는 본문에 쓰이는 태그를 사용한다.
  • title 태그는 웹에 이름(제목)을 설정한다.
  • meta 태그는 utf로 파일을 불러오게 설정한다.

📄 a 태그

🎨특징

  • a 태그는 링크를 만들어서, 한 페이지에서 다른 페이지로 연결하는데 사용한다.
  • 기본적으로 밑줄과 파랑색으로 표시된다.
  • 많이 쓰이는 속성으로는 href, target, title 이 있다.
  • href 속성값에는 이동하고 싶은 주소를 쓰면 된다.
  • target 속성값 중 가장많이쓰이는 _blank 는 링크된 문서가 새로운 윈도우나 탭에서 오픈하게 만듭니다.
  • title 속성을 쓰면 링크에 마우스를 올려놓으면 툴팁울 뜨게 할 수 있다.

👀마크다운

 <a href="https://github.com/" target="_blank" title="깃허브 바로가기">깃허브</a>

👉결과

깃허브


🤷‍♂️ 느낀점

처음 공부한 것을 정리해가면 블로그에 써봤는데 처음이라 그런지 너무 힘들었다. 그래도 어제는 정리하다가 포기했는데 오늘이라도 포기하지 않고 정리한 내가 대견하다. 공부는 에전에 html을 한번 배운적이 없어 크게 이해가 안되는 것은 없었지만 예전에 긴가민가 했던것들을 머리속에 확실히 정리했다는데에 의의가 있는거 같다.

profile
나의 개발지식 output 공간

0개의 댓글