INTP의 멋대로 개발 세상

(23/06/22) HTML 기초 본문

2023 여름 특강/HTML, CSS, JS

(23/06/22) HTML 기초

인팁구름 2023. 6. 22. 17:36

🔸 마크다운 문법

 

제목 적을 때는

  • #의 개수로 제목 크기 조절하기

글씨에 효과 주기

  • ** 을 양 끝에 추가 (bold효과)
    • 내용
  • ~을 양 끝에 추가 (줄 긋기)
    • 내용
  • *을 양 끝에 추가 (기울이기 효과)
    • 내용

 

` (백틱) 3개 ⇒ 코드창

```html
<h1>Hello World!</h1>
```

이런 식으로 작성!

 

🔸HTML (Hyper Text Merkup Language)

- 크롬/엣지 같은 브라우저가 html, css, js 등을 해석해서 사이트처럼 보이게 만들어 주는 인터프리터.

- 즉, html, css, js는 스크립트 언어이다. 브라우저 위에서 돌아가는 언어.

 

Hyper Text

  • 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트

Markup Language

  • 논문 용도
  • 태그 등을 이용해서 문서나 데이터의 구조를 명기하는 언어의 한 가지

🔸CSS

  • Cascading Style Sheets
  • 웹 페이지의 시각적 스타일과 레이아웃을 정의, 제어

cursor : 해당 속성에 마우스 커서를 올렸을 때 손가락 모양으로 바뀜 (버튼은 아님. 브라우저 내부에서만 컨트롤 가능)

 

 

🔸JavaScript

  • 웹 브라우저 내에서 대화형 효과를 만드는 데에 사용되는 프로그래밍 언어
  • 웹 페이지에 동작 및 상호작용을 추가하는 데에 사용
    • ex) 팝업 및 알림
    • 양식 확인
    • 애니메이션 및 효과
    • DOM 조작 (HTML의 속성을 만질 수 있다.)
    • 웹 API에서 데이터 가져오기
    • 대화형 게임 및 퀴즈 만들기
<h1 onclick="test()">안녕하세요</h1>

<script>
    const test = () => alert("클릭하셨습니다.");
</script>

 

 

🔸HTML 의 일반 태그  VS 단일 태그

 

  • 일반태그 <h1>내용</h1>
  • 단일 태그 <태그명 />

 

HTML5 부터는 단일 태그명 뒤에 /를 붙이지 않아도 되지만,
하위 버전의 호환성을 고려해서 습관적으로 붙이는 것이 좋다.

 

🔸HTML 의 공통 속성 VS 특수 속성

 

  • 공통 속성

태그 안의 id, class …

 

  • 특수 속성

a 태그의 href와 terget은 다른 태그들에는 없는 속성

 

 

🔸블록과 인라인

 

  • 블록 : 페이지의 한 블록 전체를 감싼다.

 

  • 인라인 : 태그 내용만 감싼다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div {
            background-color: red;
        }
        
        span {
            background-color: blue;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div>블록 태그입니다</div>
    <span>인라인 태그입니다</span>
    <span>인라인 태그입니다</span>
</body>
</html>

div 태그는 얼마든지 height, width를 조절해서 사용 가능하지만, 인라인 태그(span)은 사용 불가하고 내용만 감싼다😊

 

원래 style 속성은 바깥에 써야하지만, 개별로 사용해서 인라인 블록을 만들 수도 있다.

<div style="display: inline-block;">인라인 블록 태그입니다</div>

 

✨중요!!✨

💡 블록은 한줄을 다 차지하고 높이와 넓이 세팅 가능 인라인은 한 줄에 여러 개 들어간다. 대신 높이와 넓이 세팅이 불가능.

💡 인라인 블록은 인라인처럼 한 줄에 여러 개 들어가는데 나머지는 블록속성과 동일하게 사용가능하다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div {
            background-color: red;
            height: 100px;
        }
        
        span {
            background-color: blue;
            /* inline 태그와 span 태그는 높이와 넓이가 세팅되지 않는다 */
            height: 100px;
        }

        .ib {
            /* 클래스명에 스타일을 줄 때에는 앞에 . 을 붙인다 */
            background-color: green;
            height: 100px;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div>블록 태그입니다</div>
    <!-- <span>인라인 태그입니다</span> -->
    <!-- <span>인라인 태그입니다</span> -->
    <div class="ib" style="display: inline-block;">인라인 블록 태그입니다</div>
    <div class="ib" style="display: inline-block;">인라인 블록 태그입니다</div>
</body>
</html>

div는 블록태그인데 어떻게 인라인으로 만들 수 있나요? 🤔🤔

⇒ 덮어 씌우는 개념이다! span 태그는 기본적으로 인라인 디스플레이가 적용되어 있기 때문

 

 

🔸HTML 필수 태그

아래는 HTML, CSS, JS 표준 웹 사이트! 모르는 태그 있을 때 참고 시 유용하다

 

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

 

💡 참고💡 

  • <p> 태그 안에 <div> 태그를 넣을 수 없다.
    div가 문단이기 때문에 범위가 더 넓은 태그이다!!!!!
  • img 태그는 대표적인 inline block 속성이다!

 

details 태그

<details>
    <summary>설레이는 이 마음은 뭘까</summary>
    <p>왠지 잠을 이룰수가 없어</p>
</details>

details 태그 안에 summary 태그는 꼭 들어가야 한다!

 

ul 태그 + li 태그

순서가 없는 태그 (점으로 찍힘)

<ul>
    <li>사과</li>
    <li>배</li>
    <li>바나나</li>
</ul>

 

ol 태그 + li 태그

순서가 있는 태그

<ol>
  <li>아침 먹기</li>
  <li>점심 먹기</li>
  <li>저녁 먹기</li>
</ol>

 

a : blank 태그

a 태그와 같지만 링크가 새 탭으로 열림.

<a href="https://google.com" target="_blank" rel="noopener noreferrer">구글로 이동</a>

_blank 대신 _self로 쓰면 현재 페이지가 이동 됨

<a href="https://google.com" target="_self" rel="noopener noreferrer">구글로 이동</a>

 

input 태그

유저가 직접 입력하는 대화형

<h1>텍스트 입력</h1>
    <input type="text" name="id">

    <h1>비밀번호 입력</h1>
    <input type="password" name="password">

    <h1>체크박스 입력</h1>
    <label>
        <input type="checkbox" name="checkbox">밥먹기
    </label>

    <h1>라디오 버튼 입력</h1>
    <!-- input 박스는 같다는 기준이 name 값이다 -->
    <!-- 라디오 버튼은 하나만을 선택해야 하므로 두 개의 name값이 같아야 한다. -->
    <!-- name값이 다르면 중복 선택이 된다 -->
    <label>
        <!-- checked를 붙인 쪽이 기본값이다. 적지 않아도 됨 -->
        <input type="radio" name="radio" checked>예
    </label>
    <label>
        <input type="radio" name="radio">아니오
    </label>
    <label>
        <input type="radio" name="radio" disabled>몰라요
    </label>

    <h1>이메일 입력</h1>
    <input type="email" name="email">

    <h1>날짜 입력</h1>
    <input type="date" name="date">

    <h1>파일 입력</h1>
    <input type="file" name="file">

    <h1>범위 입력</h1>
    <input type="range" name="range">

    <h1>색상 입력</h1>
    <input type="color">

 

 

색상입력  input 태그 color 타입

 

textarea 태그

문장 이상의 내용을 입력함

<textarea placeholder="내용을 입력하세요." rows="5" cols="20"></textarea>

 

button 태그

<button type="button">클릭</button>

 

audio 태그

<audio src="https://zrr.kr/5Xik" controls></audio>

 

video 태그

<video src="https://zrr.kr/Mghf" controls width="400"></video>

 

저작자표시

'2023 여름 특강 > HTML, CSS, JS' 카테고리의 다른 글

(23.06.23) CSS 기초 (형태, 선택자, 상속, 속성, 트랜지션, 애니메이션)  (0) 2023.06.26
(23/06/23) HTML 기초 (테이블)  (0) 2023.06.26
'2023 여름 특강/HTML, CSS, JS' Related Articles more
Comments