jason_dev.log https://velog.io/ Wed, 06 Apr 2022 18:03:16 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed Copyright (C) 2019. jason_dev.log. All rights reserved. <![CDATA[HTML 기초]]> https://velog.io/@jason_dev/HTML https://velog.io/@jason_dev/HTML Wed, 06 Apr 2022 18:03:16 GMT 텍스트 요소

- 제목 - h1 ~ h6

  • 제목 단계를 뛰어넘으면 중간에 빠진 제목이 어디 있는 건지 모르므로 사용자의 혼란을 야기할 수 있습니다.
  • 제목 단계를 뛰어넘으면 중간에 빠진 제목이 어디 있는 건지 모르므로 사용자의 혼란을 야기할 수 있습니다. 순서대로 사용 할 것

- 본문 - p

  • <p> 요소는 하나의 문단을 나타냅니다.(paragraph)
  • HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.
  • 문단은 블록 레벨 요소
  • 자신의 닫는 태그 </p> 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다.
    • 컨텐츠 형태를 보고싶을 떄 lorem 입력

- 본문 - br

  • <br> : 줄바꿈 요소
  • 빈요소
  • 문단과 문단 사이 벌리기 위해서 br태그를 여러개 사용X -> CSS사용
  • 이야기가 나누어지면 br태그가 아닌 p태그를 사용해야

- 본문 - blockquote, q

  • blockquote와 q 태그는 인용 요소
  • blockquote는 긴 것
  • q는 인라인 인용문 요소
  • blockquote 안에 p태그 사용 가능
  • q태그는 자동으로 ""들어감
    • 주의사항: p태그 안에 blockquote 사용X
    • p태그는 안에 블록 요소 사용시 자동으로 닫힘
  • cite : 인용문 출처 문서나 URL.

- 본문 - pre

  • pre 요소는 미리 서식을 지정한 특스트를 나타냄 (preformatted)
  • 텍스트는 보통 고정폭 글꼴을 사용

- 본문 - figure, figcaption

  • <figure> 요소는 독립적인 콘텐츠를 표현합니다. <figcaption> 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.

- 본문 - hr

  • 수평선
  • 빈요소

- 본문 - abbr, address, cite, bdo

  • <abbr>: 약어
    <abbr title="HyperText Markup Language">HTML</abbr>.
            Output: HTML.
  • <address>: 주소, email
    <p>Contact the author of this page:</p>
jim@rock.com
(311) 555-2368
~~~ - ``: 인용 출처 ~~~html
First sentence in Nineteen Eighty-Four by George Orwell (Part 1, Chapter 1).
~~~         Output: First sentence in Nineteen Eighty-Four by George Orwell (Part 1, Chapter 1). ### - 포매팅 - b, strong - 굴게 표시하는 것은 같음 - ``: 요약 키워드, 리뷰의 제품명 등, 특별히 중요한 것은 아니지만 굴게 표시할 때 사용 - ``: 높은 중요도 - 문단 전체를 감싸는 것은 X => 그런 경우 CSS 사용

- 포매팅 - i, em

  • 두가지 모두 italic체
  • 보여지는 것은 같지만 완전히 다름
  • <i>: 구분해야하는 부분을 나타냄. 기숭용어, 외국어 구절, 등장인물의 생각 등
  • <em>: emphasize의 약어. 강조 강세 요소

- 포매팅 - mark, small, sub, sup

  • <mark> : 하이라이트 - 마음에 드는 구절 또는 검색 결과 등
  • <small>: 덧붙이는 글이나 저작권 법 표기 등 작은 글씨 사용
  • <sub>: 아래첨자
  • <sup>: 위첨자

- 포매팅 - del, ins, code, kbd

  • <del>: 삭제된 텍스트를 나타낼 때 사용
  • <ins>: 추가된 텍스트를 나타낼 때 사용
  • <code>: 인라인 코드 요소 - 여러 줄을 사용할 떄는 <pre>를 사용
  • <kbd>: 키보드 키를 나타낼 떄 사용

- a 태그와 하이퍼링크 - href

  • anchor(닻)의 약자
  • href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일주소와 그 외 다른 URL로 연결 할 수 있는 하이퍼링크를 만듬
    <a href="https://example.com">Website</a>
<a href="mailto:example@emil.com">Send email</a>
<a href="tel:010-123-2345">Phone</a>
href
하이퍼링크가 가리키는 URL. 
링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있음

- a 태그와 하이퍼링크 - target

  • 링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, <iframe>의 이름이나 특정 키워드입니다.
  • 다음 키워드는 특별한 뜻을 가지고 있습니다.
    • _self: URL을 현재 브라우징 맥락에 표시합니다. 기본값.
    • _blank: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.

- 엔티티(Entity)

& = &amp; < = &lt; > = &gt; " = &quot; space = &nbsp;

구조를 나타내는 요소

- 컨테이너 (div, span)

  • <div> 요소는 플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.
    • <div> 요소는 의미를 가진 다른 요소(<article>, <nav> 등)가 적절하지 않을 때만 사용해야 합니다.
  • <span> 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다.
    • 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.
    • 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. 
<div> example
// 블록레벨 최대 길이는 부모의 최대 길이

<span> example => span tag는 인라인

- 시멘틱 웹이란?

  • semantic: 의미의, 의미론적인
  • 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다.
  • <div>, <span>같은 의미가 없는 순수 컨테이너: non-semantic 
// div로도 작성 가능하지만 의미론적인 마크업을 사용하는 것
<body>
    <header> <!--header--> </header>

    <nav> <!-- nav --> </nav>

    <main>
        <article>  <!-- 본문 --> </article>
        <aside>  <!-- 사이드바 --> </aside>
    </main>
    <footer>  <!-- Footer --> </footer>
</body>
  • 사용하는 이유
    • 검색엔진은 의미론적 마크업을 분석 - 검색 랭킹에 영향을 줄 수 있음
    • 스크린 리더로 페이지를 탐색할 때의미론적 마크업을 푯말로 사용할 수 있음

- header, footer

  • <header> 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다.
    • 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
    • 웹페이지의 소개를 위한 header는 하나만 사용
    • 페이지 제목, 글 제목을 적을때 사용하기도 함
  • <footer> 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.

- nav

  • <nav> 요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
  • //    예제 코드
<nav>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>

- aside

  • <aside> 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
    <article>
<p>
  디즈니 만화영화 <em>인어 공주</em>는
  1989년 처음 개봉했습니다.
</p>
<aside>
  인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.  // 중요하지 않은 내용 
</aside>
<p>
  영화에 대한 정보...
</p>
</article>

- main

  • body태그 안에 유일하게 하나만 사용 가능
  • 주요 콘텐츠

- article

  • <article> 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냄
  • 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등

- section

  • <article>요소와 비슷함
  • 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용.
  • 보통 <section>은 제목을 포함하지만, 항상 그런 것은 아닙
  • 요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 <article> 요소가 더 좋은 선택일 수 있음.

목록과 표

- 목록 - ul, ol, li

  • 순서가 있는 목록: Ordered List = ol
  • 순서가 없는 목록: Unordered List = ol
  • ol태그와 ul태그의 단일 아이템: li (List Item)

<ol>

type

  • 항목을 셀 때 사용할 카운터 유형.
    • 'a'는 소문자 알파벳,
    • 'A'는 대문자 알파벳,
    • 'i'는 소문자 로마 숫자,
    • 'I'는 대문자 로마 숫자,
    • '1' 는 숫자(기본값)을 나타냅니다.
      <ol type="i">
<li>로마숫자 i</li>
<li>로마숫자 ii</li>
<li>로마숫자 iii</li>
</ol>

start

  • 식작 숫자 변경
    <ol start="4">
<li>4번부터 시작</li>
<li>5번</li>
<li>6번</li>
</ol>

reversed

  • 숫자를 거꾸로 할 때 사용

<ul>

  • 중첩 사용 가능

- 정의 목록 - dl, dt, dd

<dl>

  • <dl> 요소는 설명 목록을 나타냅니다.
  • <dl>은 <dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다.
  • 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.
  • <dt>와 <dd>를 1:1 매칭으로 사용시 <dd>가 <dt>를 설명
  • <dt> 여러개 와 <dd> 여러 매칭시: 여러개의 이름이 하나의 의미일 때
  • <dt> 하나 와 <dd>가 여러개 : 하나의 용어가 여러 의미를 가지고 있을 떄
  • <dt>와 <dd>의 형제로 <div> 사용 금지

- 표 - table, tr, th, td

  • tr = table row: 하나의 행 묶음
  • th = table head: 행이나 열을 대표하는 요소
    • th가 가질 수 있는 속성: scope ex) <th scope="col">나라이름</th> => col : column을 대표 ex) <th scope="row">한국</th> => row : row를 대표
  • td = table data
    • td가 가질 수 있는 속성: colspan ex) <td colspan="2">합계</td> => 두칸을 합칠 때 사용

      - 표 - thead, tbody, tfoot

  • thead: table head
    • thead 사용시 형제 태그로 tr 금지, tbody또는 tfoot을 형제로 사용해야함
  • tbody: table body
  • tfoot: table footer
  • 구획을 나눠서 샤용시 CSS 사용시 용이함

- 표 - caption

  • <caption> 요소는 표의 설명 또는 제목을 나타냅니다
  • table의 첫번째 요소로 사용되어야 함
  • <caption> 요소를 가진 <table> 요소가 만약 <figure> 요소의 유일한 자식인 경우, <figcaption>을 대신 사용하세요.

임베디드 요소

img

  • 빈요소
  • src, alt, width, height 
    <img class="picture" 
   src="/주소source/이미지.jpg" 
   alt="이미지설명"
   title="이미지제목"
   width="200"
   height="100"
   />

웹에서 사용하는 이미지 유형

반응형 이미지 - srcset

  • viewport(화면 크기)별로 반응형 이미지

반응형 이미지 - sizes

  • srcset는 다른 사진을 보여주는 것이지만 sizes는 조건에 따라 다른 파일을 보여주거나 지정된 사이즈로 보여줌

video

audio

canvas, iframe

폼 관련 요소

form - action, method 속성

  • get과 post 차이

label과 input

  • label
  • get을 통해 받는 값 name
  • 자식 요소로도 사용시 for와 id값 불필요

fieldset

  • <fieldset> 요소는 웹 양식의 여러 컨트롤과 <label>을 묶을 때 사용합니다
  • <legend>는 <fieldset>의 자식으로만 사용
<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

input - type 속성

text

<input type="text" name="text" minlength="5" maxlength="8">
  • text output:

password

<input type="password" name="pwd">
// get method 사용시 마스킹을 하여도 전송시 주소창에 보임
// post 사용할 것
// minlength maxlength 사용 가능
  • pasword output:

email

<input type="email" name="email">

tel

<input type="tel" name="tel">
// 모바일에서 접속시 숫자패드 다이얼 뜸
// 문자 입력은 가능

number

<input type="number" name="number">
// 숫자만 입력 가능

range

<input type="range" name="range">
// 0~100까지 조절 가능

date / month / week / time

<input type="date" name="date"> // 년 월 일 선택
<input type="month" name="month"> // 년 월 선택
<input type="week" name="week"> // 주차 선택

submit button reset

<input type="submit" value="기본 값 '제출' 버튼">
<input type="button" value="빈 버튼"> // 눌러도 보내지 않음, javascript를 통해 작업 필요
<input type="submit" value="기본 값 '제출' 버튼">
<input type="reset"> // 입력 값 초기화 버튼
  • text:

checkbox

<label>CheckBox:
    <input type="checkbox" name="check1">
      <input type="checkbox" name="check2" checked> // checked 사용시 체크값으로 시작
</label>

radio

<label>RADIO:
    <input type="radio" name="radio" value="r1"> // value 값이 없으면 어떤 값을 제출했는지 알 수 없음
      <input type="radio" name="radio" value="r2"> // checkbox와 다르게 하나만 선택 가능(name이 같을 떄)
</label>

input - placeholder

<label>ID: <input type="text" name="id" placeholder="아이디를 입력하세요"></label>

input - autocoplete

<label>text: <input type="text" name="text" autocomplete="on"></label>

input - required

<label>text: <input type="text" name="text" required></label> // 반드시 입력해야 제출 가능
]]> <![CDATA[Velog 사용방법 정리]]> https://velog.io/@jason_dev/Velog-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95-%EC%A0%95%EB%A6%AC https://velog.io/@jason_dev/Velog-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95-%EC%A0%95%EB%A6%AC Sat, 02 Apr 2022 07:41:36 GMT Velog를 처음 시작하며 간단한 마크다운 문법을 공부하면서 정리해 보았습니다.

마크다운이란?

마크다운(markdown)은 일반 텍스트 문서의 양식을 편집하는 문법이다. README 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쓰인다. 마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능하다. -위키백과

기본 문법

<제목 표현>
# H1
## H2
### h3
#### h4
##### h5
###### h6
<줄 바꿈>
여러 번 줄 바꿈시 -> <br/> 사용
<폰트 스타일>
__굵게__
**굵게**
_기울여 쓰기_
*기울여 쓰기*
~~취소선~~

굵게 굵게 기울여 쓰기 기울여 쓰기 취소선

💻 코드블럭

한줄짜리 코드블럭은 tab 또는 `(백틱)으로 생성 가능

`tab` 으로 생성한 코드블럭

`(백틱) x 3은 여러 줄의 코드 블럭

``` 백틱을 3번 입력하여
여러 줄의 코드 블럭을 사용할 수 있다.
``` (백틱 닫음)

`(백틱) 뒤에 프로그래밍 언어 이름을 붙여서 코드 작성

function example{
 console.log("Hello World"); 
}

✌🏻인용문

인용문을 사용할 때는 >를 사용

인용문을 작성 할 수 있다.

>>으로 중첩도 사용 가능

>>>

🔗 링크 작성

⌨️ 입력

[Naver](https://www.naver.com/)
<https://www.naver.com>

🖥 출력 Naver https://www.naver.com

🏞 이미지 삽입

입력

![이미지 설명](이미지 링크)

이미지에 링크 추가

[ ![이미지 설명](이미지 링크) ](연결하고자하는 url "마우스 오버 시 나타낼 링크 title")

수평선

* or - or _를 3번 이상 작성 단 -의 경우 header로 인식 할 수 있어 이 전 라인을 비워야 함 ***을 주로 사용

테이블

| 로 구분하며, 또한 -(하이픈)으로 구분된 곳 각각 왼쪽, 양쪽, 오른쪽에 :(세미콜론)을 붙일 경우 순서대로 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬이 가능

⌨️ 입력

| 드라마 제목 | 주연 배우 | 방영일 |
|:----------|:----------:|----------:|
| **호텔 델루나** | 이지은, 여진구 | ~~2019.07.13. ~ 2019.09.01.~~ |
| 타인은 지옥이다 | 임시완, 이동욱, 이현욱, 이정은 | 2019.08.31. ~ |
| 멜로가 체질 | 천우희, 안재홍, 전여빈, 공명 | 2019.08.09. ~ |

🖥 출력

왼쪽 정렬 가운데 정렬 오른쪽 정렬
Bold Italic Cancel
Left 1 Italic&Bold Right
Left 2 Center Right

체크박스

-, *, +뒤에 띄어쓰기 후 대괄호를 넣어 작성. 대괄호안에 띄어쓰기를 하면 빈 체크박스, x를 넣으면 체크된 체크박스 생성

⌨️ 입력

- [x] Yes
- [ ] No

🖥 출력

  • Yes
  • No

Font 색상

html 태그를 이용하여 작성 ⌨️ 입력

<span style="color:red"> red </span>
<span style="color:#d3d3d3"> #d3d3d3 </span>
<span style="color:rgb(245, 235, 13)"> rgb(245, 235, 13) </span>

🖥 출력 red #d3d3d3 rgb(245, 235, 13)

참고 사이트 https://velog.io/@jinuku/ https://velog.io/@yuuuye/

]]>