[SeSAC x 코딩온] HTML

타다닥·2023년 9월 15일

html

html, css

목록 보기

1/3

두번째 수업 날 배운 내용은 HTML!
순식간에 나간 진도덕분에 정신없기는 했지만 그래도 알차게 배웠다.
집에서 복습을 하니 어느정도 정리가 되는 느낌..?

오랜만에 긴 시간 공부를 하려니 집중력이 조금 딸리긴 했다.
고등학교 졸업한건 언제인지 기억도 안나고, 대학 졸업 기억도 가물가물하다.
책상 앞에 오래 앉아있는게 낯설만도 한 것 같다. 💀

오늘 정리한 내용은 많다! 그래도 정리한김에 쭉 올려보자.

🗒

html, css, JavaScript ?

html 은 ‘명사’로 생각하자. 집 구조를 짓는 것.
css 는 ‘형용사’로 본다. 집을 보기 좋게 인테리어 하는 것.
JavaScript 는 ‘동사’로 본다. 엘레베이터가 움직이거나, 물을 틀면 물이 나오게 만들어 주는 것. 동적인 기능을 담당한다.

html 이란?

HyperText Markup language 의 약자이다.
- HyperText
  - 웹 사이트에서 다른 문서나 사이트로 즉시 이동할 수 있게 해준다.
- Markup
  - 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지 표시하는 것. 즉 문서나 데이터를 구조화해준다.
  - 그리고 이 마크업을 할 때 약속된 표기법이 태그(tag).
  - 태그는 꺾쇠괄호< > 로 표시한다.
컴퓨터에서 사용하는 모든 파일에는 각각의 형식이 있다.
- 엑셀은 .xlsx, 한글은 .hwp
- 웹사이트에서 사용하는 문서는 .html
웹 페이지를 구성하는 가장 기초적인 언어이다. 그리고 약속된 것들을 꼭 지켜서 사용해야 한다! 옷을 사려하는데 브랜드마다 사이즈의 기준이 다르다고 생각해보자. 표준화된 사이즈가 있기 때문에 우리는 어느 브랜드에서 옷을 사든 내 사이즈에 맞게 쇼핑이 가능한 것이다!

html 본격적으로 시작!

우선 기본적으로 알아야 할 내용이 있다.

여는 태그와 닫는 태그를 정확히 입력해주어야 한다. ( 닫는 태그가 없는 태그도 있다.)
적당히 들여쓰기를 해준다. (보기에도 편하고 구조를 파악하기에 편하다.)
html태그는 속성과 함께 사용할 수 있다. 기본적으로 부모-자식 관계로 이루어져있다.
- <태그 속성=”속성 값” 속성=”속성 값” …> 의 형태로 사용된다.
<!—-주석-—>
- 개발자에게 코드를 설명하기 위한 내용을 작성한다. 실제 화면에는 나타나지 않는다.
- 단축키는 ctrl + /

1️⃣ 기본적인 html 문서 구조

<!doctype html>
- 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻. 웹 문서의 시작을 알려준다.
- VS Code에 들어가서 ‘!’를 입력하고 엔터를 쳐주면 기본 구조가 세팅된다.
<html> ~ </html>
- 웹 문서의 시작과 끝을 나타낸다.
<head> ~ </head>
- 문서의 정보를 입력한다. 웹 브라우저가 알아야 할 정보들이 보여진다.
- 실제 문서 내용이 아니다. 확인해야 하는 정보들이 입력되는 공간이다. <title> </title> 사이에 작성된 텍스트만 브라우저 창에 표시된다.
<body> ~ </body>
- 실제로 웹 브라우저 화면에 보여지는 내용들이다.

2️⃣ html의 구성 요소

우선 태그는 블록(block)태그와 인라인(inline)태그가 있다. 블록태그는 하나의 블록을 차지하고, 인라인태그는 가지고 있는 내용만큼의 자리를 차지한다.

택배 트럭과 박스로 예를 들어보자. 블록(block)태그는 연필 하나를 주문하더라도 트럭의 가로사이즈에 맞는 큰 박스에 포장을 해주는 것이다. 인라인(inline)태그 는 연필사이즈에 맞는 박스에 포장을 해주는 것이다.

블록 요소 ( Block Element )
- 기본적으로 부모 요소의 전체 너비(100%)를 차지한다
- 태그가 시작되면 무조건 개행(줄바꿈)이 일어난다.
- 모든 인라인 요소를 포함하거나 다른 블록 요소를 포함한다.
- <div>가 대표적
인라인 요소 ( Inline Element )
- 한 줄을 차지하지 않는다. 자기 자신의 크기만큼만 차지한다.
- 너비와 높이를 지정할 수 없다. (애초에 필요한 공간만을 차지하기 때문)
- 블록 요소 안에 포함되어 있는 것으로, 인라인 요소만 가질 수 있다.
- <span> 이 대표적
빈 요소(Empty Element)
- 내용 없이 구조적인 기능만 한다. 그래서 종료태그가 필요없다.
- <br> , <hr> 이 대표적이다. 하지만 시작과 종료가 한 번에 된다는 걸 보여주기 위해 <**br/> , <hr/> 이렇게 작성하기를 권장한다.**
속성
- 태그를 보조하는 명령어로 태그 안쪽에서 작동한다.
- html태그는 속성과 함께 사용할 수 있다. 기본적으로 부모-자식 관계로 이루어져있다.
- <태그 속성=”속성 값” 속성=”속성 값” …> 의 형태로 사용된다.
- 속성은 여러개를 가질 수 있다.
- 여기서 각 태그에서 사용되는 속성들이 다르기 때문에 태그와 속성을 세트로 알아두면 더 좋다.

3️⃣ 텍스트와 관련된 태그 (블록)

<hn>태그
- heading. 제목을 표시해준다. 블록 요소이다.
- <h1>이 제일 크고 <h6>까지 있다. <h1>이 제일 큰 글자!
- 배포 될 때 검색엔진은 <h1>태그를 가장 먼저 찾는다. 하나의 html문서에 1개만 존재하는게 좋다.
<p>태그
- paragraph. 텍스트 단락을 만들어준다.
- </p>태그를 만날 때 까지 줄바꿈 없이 텍스트를 한 줄로 표시한다.
- 단 브라우저 창의 너비보다 길어질 경우, 줄은 자동으로 바뀐다.
- 기본적으로 줄 간격을 가지고 있다. <div>의 경우 줄 간격에 붙어나온다.
<br/>태그
- break. 줄을 바꿀 위치에 사용한다. 닫는 태그가 없다.
- html 에서는 엔터 줄바꿈이 안먹힌다. 긴 내용도 주루룩 적힌다. 여기서 엔터를 치고 싶을 때 <br/>태그를 사용하면 된다.
<hr/>태그
- horizontal
- 수평 줄을 삽입할 때 사용한다. 닫는 태그가 없다.
<div>
- 특정 영역이나 구획을 정의할 때 사용. 텍스트가 블록으로 처리된다.

3️⃣ 텍스트와 관련된 태그 (인라인)

<b>태그
- bold, 굵게 표시
- 단순 강조, 키워드를 굵게 표시해야 할 때
<strong>태그
- strong, 굵게 표시
- 중요한 내용이어서 강조해야 할 때
<i>태그
- italic, 이탤릭체로 표시
<em>태그
- emphasis, 이탤릭체로 표시
- 흐름상 특정 부분을 강조, 중요한 내용을 표시 할 때
<del> :
- delete. 취소선을 만들어준다.
<u> :
- underline. 밑 줄을 만들어준다.
<span>
- 영역 묶기, 스판..늘어난다..내맘대로 묶어서 스타일 적용! 텍스트 크기만큼 차지한다.
- 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용할 때
```
<p>그냥 글자단락이지만 <span><b>이렇게 특정 부분을 묶어서 굵은 글자를 표시할 수 있다. 텍스트 크기만큼만 차지한다.</b></span>그리고 여기는 일반 글자굵기</p>
```
- 텍스트 영역을 블록 단위, 즉 통째로 묶고 싶다면 <div>태그 사용
<mark>
- mark, 형광펜 효과 내기

3️⃣ 텍스트와 관련된 태그 (목록)

1) 순서가 없는 목록 <ul>태그

unordered list
부모태그로 자식태그인 <li>와 함께 쓰인다.
순서가 없는 목록의 경우 각 항목 앞에 작은 원이나 사각형 같은 불릿이 붙는다.

<ul>
 <li>내용</li>
 <li>내용</li>
</ul>

2) 순서가 있는 목록 <ol>태그

ordered list. <li>와 함께 쓰인다.
순서가 필요한 목록이기 때문에 각 항목 앞에 1,2, … 같은 숫자가 기본으로 붙는다.

<ol type="1">
 <li>내용</li>
 <li>내용</li>
</ol>

list가 시작하는 순서를 지정하고 싶다면?
- <ol type=“a” start=“3”> 소문자 알파벳의 3번째부터 목록이 시작된다. 즉 c부터 목록이 시작된다.
reserved속성을 사용하면 목록이 역순으로 표시된다.

3️⃣ 이미지와 관련된 태그

<img>태그

<img src=”경로” [속성=”값”]> 의 형태이며 이미지를 삽입해준다.

이미지의 정확한 경로를 지정해야 한다. 작성중인 웹문서 파일과 같은 위치에 있어야 한다.


[경로를 지정할 때]
*이미지파일의 경로를 작성해도 되고, 이미지 소스 링크를 복붙해도 가능하다!

-웹문서 파일과 이미지 파일이 같은 경로에 있다면? (. 은 현재위치 의미)
<img src=”./cat.jpg”>

-웹문서가 있는 폴더의 하위폴더에 이미지가 있다면?
<img src=”images/cat.jpg”>

-상위 폴더를 거쳐야 한다면?
<img src=”../images/cat.jpg”>

<img>태그 - alt 속성
- 이미지를 설명해 주는 대체 텍스트. 이미지 로딩이 느리거나 깨졌을 때 보여진다. 꼭 해주자!
<img>태그 - title 속성
- 이미지에 커서를 올려놓았을 때 노출되는 메시지.
<img>태그 - width, height 속성
- 속성을 사용하지 않으면 원본 이미지 크기로 표시된다.
- 이미지 사이즈를 원하는 값으로 지정할 수 있다.

3️⃣ 텍스트와 관련된 태그 (하이퍼링크)

<a>태그
- Anchor의 약자. 링크를 만들어준다.
<a>태그 - href 속성
- <a href="이동하고자 하는 링크">화면에 표시 될 텍스트</a> 의 형태이다. 화면에 표시되는 텍스트를 누르면 원하는 링크로 이동된다.

<a>태그 - target속성

링크가 열릴 때 어떻게 열리는지 설정해준다.

사용할 수 있는 속성 값

_blank : 새 창이나 새 탭에서 열린다.
_self : 기본 값으로 링크가 있는 화면에서 열린다.
_parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시한다.
_top : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다.

id 속성
- 한 문서에 하나의 아이디만 사용을 권장하며 중복되면 안된다. 유일해야한다.
- 특정 요소를 클릭하면 그 위치로 한 번에 이동하도록 도와준다.
- 이동하고 싶은 위치마다 id속성을 이용해 앵커를 만들고, 각각 다른 이름을 지정해야 한다.
- id를 지정해 놓으면 <label>태그를 이용해 캡션을 붙일 수도 있고, 나중에 css로 꾸밀 수도 있다.
class 속성
- 그룹으로 묶어서 스타일을 지정할 때 쓴다. 비슷한 요소들을 그룹명으로 지어준다고 생각하자.

4️⃣ 폼 관련 태그, input태그

<form>태그
- input태그를 감싸는 태그. 백엔드쪽과 연결되어야 의미가 있다.
- name속성은 중요하다! 입력받은 데이터의 이름이다.
<input>태그
- 웹에서의 폼은 크게 사용자가 입력하는 부분과, 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다. 사용자자가 내용을 입력하는 부분을 만들 때 사용하는 태그가 <input>태그이다. <input type="text" name="name"/>
type=”button”
- 버튼을 생성한다. 특정 기능을 수행 시킬 때 사용.
type=”text” 속성
- 일반적인 한 줄 텍스트를 입력할 수 있는 폼을 생성한다.
type=”password” 속성
- 비밀번호 값을 받는 폼을 생성한다.
- 입력값이 화면에 보이지 않고 ‘*’와 같은 아이콘으로 표시된다.

type=”checkbox” 속성

여러 선택지 중 여러 개를 선택 가능한 체크 박스를 생성

[필요한 속성]

name : 체크 박스의 이름, 같은 분류의 체크 박스는 같은 이름으로 지정
value : 체크 박스가 실제로 전달하는 값을 지정
checked : 처음부터 선택 된 상태로 로딩

백엔드쪽으로 데이터가 넘어갔을 때 설명이 필요하기 때문에 해당 속성들을 입력해주어야 한다.

예를 들어 ‘취미선택’으로 묶여있는 체크박스라면 name속성을 같은 값으로 묶어줘야 데이터 확인이 편하다.

type=”radio” 속성

여러 선택지 중 하나만 선택 가능한 라디오 버튼을 생성

[필요한 속성]

name : 라디오버튼의 이름, 같은 name을 가지는 것들 중 하나만 선택이 가능하다. 중복 선택 불가!
value : 라디오버튼이 실제로 전달하는 값을 지정
checked : 처음부터 선택 된 상태로 로딩

type=”date” 속성
- 특정 날짜(년/월/일) 선택이 가능하다.
type=”range” 속성
- 슬라이드 막대로 숫자 값을 지정할 수 있다.
type=”color” 속성
- 색상 선택 상자를 표시한다.
type=”file” 속성
- 화면에 [파일 선택]이나 [찾아보기]등이 표시된다.
placeholder속성
- 힌트를 표시해준다. (입력란에 반투명한 글자로 적혀있다.)
<textarea>
- 텍스트 필드를 지정해준다. 사이즈 조정이 가능하다.
- <textarea cols="40" rows="3"></textarea>

<select>태그

체크박스와는 다르게 선택메뉴(드롭다운)이 만들어진다. name속성으로 selcet 박스의 이름을 지정할 수 있다.

<option>태그로 select폼의 옵션 값을 생성 할 수 있다.

[속성]
value : 실제적으로 전달 되는 값
selected : 최초에 선택 된 값으로 설정

<opt group> 태그로 그룹화 할 수 있다.

label 속성 : optgroup의 이름을 설정할 수 있다.

disabled 속성 : 옵션은 보이지만 선택이 불가하다.

<select name="select option">
    <optgroup label="옵션1~3">
    <option value="옵션1">옵션1</option>
    <option value="옵션2">옵션2</option>
    <option value="옵션3">옵션3</option>
    </optgroup>
    <optgroup label="옵션4~6">
        <option value="옵션1">옵션4</option>
        <option value="옵션2">옵션5</option>
        <option value="옵션3">옵션6</option>
        </optgroup>

5️⃣ 표를 만드는 태그

표는 행(row)과 열(column)로 이루어져있다.
<table> 태그
- 표를 만들어준다.
<tr> 태그 - 행(table row)
- 행 안에 열을 넣을 수 있다.
<td> 태그 - 셀(table data)

<th> 태그 - 제목 셀(table head)

표에 제목 셀 만들기. 기본적으로 가운데 정렬이다.
셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시해준다.

<thead>, <tbody>, <tfoot>로 표의 구조를 잡아준다. 아래 형식처럼!

<table border="1" cellspacing="0" width="100%">
       <thead>
	        <tr>
            <th>이름</th>
            <th>성별</th>
            <th>전화번호</th>
	        </tr>
        </thead>
        <tbody>
	        <tr align="center">
            <td>홍길동</td>
            <td>남</td>
            <td>010-0000-0000</td>
	        </tr>
	        <tr>
            <td>양길동</td>
            <td>남</td>
            <td>010-0000-0000</td>
	        </tr>
	      </tbody>
	    </table>

그리고 아래처럼 작성하면 하단 이미지처럼 보여진다.

```html
<table>
	<tr>
	<th> 제목 셀 </th>
	<td> 1행 2열 </td>
	<td> 1행 3열 </td>
	</tr>

	<tr>
	<th> 제목 셀 </th>
	<td> 2행 2열 </td>
	<td> 2행 3열 </td>
	</tr>
</table>
```

<colspan>
- column(열)끼리 합치기 > 가로로 합쳐진다.
<rowspan>
- row(행)끼리 합치기 > 세로로 합쳐진다.

사용할 수 있는 속성

border : 테두리 두께
cellspacing : 테두리 간격 사이의 너비 (값을 ”0”으로 두면 테두리가 한 줄로 된다.)
cellpadding : 셀 내부의 간격
align : 테이블 정렬 속성
width 와 height : 테이블의 너비와 높이
bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색

HTML 요소는 Semantic하게 작성되어야 한다.

웹페이지를 이루는 요소에 의미에 맞는 태그를 사용하자. 깔끔하게! 구조화해서!

출처: 코딩온 교육자료

<header> : 헤더 (로고, 메뉴 아이템 등)

<nav> : 네비게이션 (다른 곳으로 이동 가능한 링크들)

<main> : 콘텐츠 영역임을 표시. 한 html 페이지당 한 번 사용하는 것이 바람직하다.

<section> : article을 포함 (그룹화 목적)

<article> : 하나의 의미있는 요소 (ex. 기사 리스트 중에서 기사 하나)

<aside> : 콘텐츠와 직접적인 연관이 없는 옆에 있는 부분 (ex. 광고 등)

<footer> : 푸터 (하단 영역)

HTML 요소는 Semantic하게 작성되어야 한다.

SEO (Search Engine Optimization, 검색최적화)
- 검색엔진은 HTML 코드를 분석해 사이트를 노출시킨다.
- 크롤러가 페이지의 구성 요소들이 무엇을 의미하는지 이해하여 사이트 노출에 영향을 준다.
유지보수성
- 페이지를 유지보수 할 때, <div> 태그만 가득하다면 구분하기도 힘들고, 원하는 내용을 찾기 힘들다. 다른 사람이 보더라도 한 눈에 들어오게 깔끔하게 해주어야 한다.
시멘틱 태그를 활용해 컨텐츠를 적절히 구분시켜주어야 한다.

💬

html은 집에서 맛보기로 공부를 살짝 했던지라 크게 어렵지는 않았다. 그런데도 진도가 조금 빠르게 느껴져서 걱정이 많아졌다. 앞으로는 아는 내용이 하나도 없는데 내가 진도를 잘 따라갈 수 있을 까..?
html 쉬운듯,, 어려운거 같기도 하고,, 보기만 하는 것 보다 내가 직접 코드를 입력하고 뭐라도 만들어보는게 더 도움이 될 것 같다.
복습은 필수! 여유가 된다면 예습을 도전해보자.

✏️

제대로된 수업을 들으면서 실습을 해보았다. 실습을 하면서 느낀 점이 있다.
실습이 시작되면 여기저기서 타자소리가 타닥타닥 들려온다. 그리고 쓰레드에 하나둘 댓글이 올라온다.
마음이 굉장히 조급해진다!
나만 못하나 싶고 나도 빨리 하고픈 마음에 더 호다닥 한 것 같다.
그래서 뭐지 뭐지! 하면서 복붙을 하고 헐레벌떡 한 느낌이 없지않아있다.
그리고 나중에 다시 보니 빼먹은 내용도 있었다.ㅎ
내가 정말 이해를 해서 내 머릿속에서 나와서 하는게 맞나? 하는 생각이 들었다.
어쨌든 내가 이해가 되는게 제일 중요하기 때문! 그러니 흔들리지 말고 ㅠ 여유로움을 가지고 침착하게 이해하면서 차근차근해야겠다는 생각이 들었다.

타다닥

프론트엔드 ㄱH발ㅈr ㅎH보ㅈr - ☆

다음 포스트

[SeSAC x 코딩온] HTML

html, css

html, css, JavaScript ?

html 이란?

html 본격적으로 시작!

HTML 요소는 Semantic하게 작성되어야 한다.

HTML 요소는 Semantic하게 작성되어야 한다.

[SeSAC x 코딩온] CSS (작성방식, 우선순위, 선택자, 박스모델)

0개의 댓글