HTML, CSS (2)

김태완·2024년 11월 15일

CSS html

테이블 스타일링

테두리는 table, th, td 태그에 적용할 수 있다.
테이블 전체 테두리나 각셀마다 테두리를 넣을 수 있다.
border로 선택자를 지정해서 줄 수 있는데, border-collapse를 사용하면 테두리가 겹쳐서 자연스럽게 된다.
// 반대는 border-spacing, 굵기가 다를때는 굵은 것 위주로 보여준다.

이미지

img 라는 태그를 사용한다. src라는 속성에 이미지 주소 or 경로를 넣으면 됩니다.
alt 속성 중요하다. 이미지에 대한 정보를 텍스트로 적는 속성이다.
- 왜 중요해?
  - 이미지를 굳이 다운받지않아도 마크업만 보고도 알 수 있고, 시각장애인용 스크린 리더 프로그램에서도 alt의 내용을 읽을 수있다.
  - 이미지를 다운받는데 실패할때도 alt 내용을 띄워준다. 그래서 alt는 반드시 적는것을 권장한다.
    
    alt를 작성하는데 아래 내용을 참고하면 좋다.
    참고: https://codingeverybody.kr/html-img-alt-%EC%86%8D%EC%84%B1/
width, height 는 너비와 높이를 정하는 속성이다. 이미지를 다운받지 않아도 이미지크기를 알 수 있어서 웹 브라우저 입장에서 효율적으로 동작할 수 있다. 페이지를 로딩할때 미리 자리를 비어놓을 수 있다. 하지만 이렇게 하지않아도 css로 크기를 바꿀수있다.

비디오

<video> 태그를 사용하고 src 속성으로 파일 위치나 경로를 정해주면 되는데, 편하게 사용하려면 몇가지 속성 필요하다.
autoplay 속성: 페이지가 로딩되면 자동으로 재생하는 속성 / 자동재생
크롬브라우저에서는 muted라는 속성과 같이 사용해야 자동 재생이 된다. 비디오의 소리를 끄는 옵션 / 음소거
-> 자동재생되어서 갑자기 소리나면 안되니깐!
controls 라는 속성을 사용하면 프로그레스바, 재생버튼 등이 보인다.
비디오의 크기를 바꿀때는 이미지와 똑같이 하면된다. width, height를 사용한다. px 단위없이 사용한다. 물론 css로도 사용가능하다.

오디오

<audio>라는 태그를 사용한다. src 속성으로 파일을 지정한다.
기본적으로 audio 태그는 화면에 보이지않는다. 그래서 controls라는 속성을 추가해야 보인다.
비디오와 마찬가지로 autoplay라는 속성이 있다.

iframe

유튜브의 공유버튼을 눌러서 Embed룰 들어가면 HTML 코드가 나온다. 이 코드를 iframe 태그에 사용한다.
iframe은 inline frame이란 뜻이다. frame의 인라인 버전이다. 즉, HTML 문서 안에서 다른 HTML 문서를 보여주는 태그이다.
너비와 높이를 지정할 수 있고 px 없이 크기 지정 가능하다.
지도나 결제창 등을 띄울때 많이 사용된다.

폼(form)이란?

웹에서 단순히 데이터를 받기만 하는게 아니라 내 데이터를 웹사이트로 보낼 수 있어야한다. 이때 폼을 사용한다.
내용을 적어 정보를 제출하는 부분을 from이라고 하고, 내용적는 칸은 input, 인풋옆에 붙은 이름은 label 그리고 button 까지 포함한다.

폼만들기

<form>이라는 태그를 감싸고, 안에 input 태그들을 넣는다. input태그는 닫는 태그 없이 시작태그만 쓴다.
label은 인풋의 설명을 적는 용도이다. input 태그를 label 태그로 감싸면, 라벨을 클릭했을때 input 태그에 커서가 깜빡인다.
이렇게 하지 않고, input 태그의 아이디를 라벨의 for 속성에 속성값으로 넣어주면 동일한 기능을 한다.
input 의 name 속성은 input 에 입력한 데이터에 이름을 붙여주는 것.
비밀번호 input 에 type="password"를 추가해주면 비밀번호가 안보인다.
button 태그는 기본적으로 form 태그 안에 있으면 눌렀을때 적은 내용을 전달한다.
- type 속성을 바꾸면 버튼 동작을 바꿀수 있다.
- type="button" 타입을 사용하면 버튼을 눌러도 전송되지 않는다.
- type="submit"이 기본값인데, 누르면 전송된다.
- type="reset" 하면 내용을 초기화된다.
현재 페이지의 주소가 http://127.0.0.1:3000이라고 가정해 볼게요. 이메일에 html@codeit.kr, 비밀번호로는 ilovehtml이라고 적고 나서 확인 버튼을 눌렀다고 합시다. 그럼 아래와 같은 주소로 이동합니다.
http://127.0.0.1:3000/?email=html%40codeit.kr&password=ilovehtml&password_repeat=ilovehtml
조금 복잡해 보이는데, 주소를 풀어서 써 볼게요. 보면 물음표 이후로 폼에 입력한 값이 들어가 있습니다. 이런 걸 쿼리 문자열(Query String)이라고 하는데요. <input> 태그마다 name 속성 값이랑 입력한 값이 짝지어 적혀 있습니다.
<http://127.0.0.1:3000/
?
email=html%40codeit.kr
&
password=ilovehtml
&
password_repeat=ilovehtml>
여기서 http://127.0.0.1:3000이라는 부분은 폼이 보이는 현재 페이지의 주소인데요. 기본적으로는 현재 페이지 주소의 맨 끝에다 쿼리 문자열을 붙여서 이동합니다.
이때 현재 페이지 주소 말고, 다른 주소를 쓰고 싶다면 직접 정해 줄 수도 있는데요. <form> 태그의 action 속성을 사용하면 됩니다. 예를 들어서 구글 검색 페이지의 주소를 적어줄 수도 있는데요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>코드잇</title>
</head>
<body>
<form action="https://google.com/search">
<input name="q">
<button>검색</button>
</form>
</body>
</html>
만약에 "코드잇"이라고 적고 검색 버튼을 누르면 https://google.com/search?q=코드잇 이라는 주소로 이동할 겁니다.
method 속성
- 웹 브라우저는 페이지를 이동하거나, 어떤 데이터를 전송할 때 서버에 "리퀘스트"라는 걸 보내는데요. 리퀘스트의 종류에는 여러 가지가 있습니다. 이번에는 GET 리퀘스트와 POST 리퀘스트를 알아 볼게요.
- 간단히 말해서 GET 리퀘스트는 데이터를 받을 때 사용하고, POST 리퀘스트는 데이터를 보낼 때 쓰는 건데요. 폼 버튼을 눌렀을 때 페이지를 이동하는 건, 사실 웹 브라우저가 어떤 서버로 GET 리퀘스트를 보낸 것입니다.
- 참고로 위 구글 검색 예시에서는 검색어를 입력하고 전송하면, GET 리퀘스트를 구글 서버에 보내고 검색 결과를 보여 주는 페이지로 이동했습니다.
- 그런데 프로필 사진 파일을 업로드하는 경우는 어떨까요? 파일은 크기가 너무 크기 때문에 GET 리퀘스트와 쿼리 문자열 만으로는 보낼 수 없습니다. 이럴 때는 POST 리퀘스트를 주로 사용하는데요. <form> 태그의 method 속성을 바꿔 주면 POST 리퀘스트를 보낼 수 있습니다.
- method 속성의 기본 값은 GET입니다.

체크박스 checkbox

한 항목만 선택하는 경우에는,
- 아래 예시에서는 "동의합니다"에 체크하는 경우 agreement의 값이 on이라는 문자열로 지정됩니다.
  <label>
  <input name="agreement" type="checkbox">
  동의합니다
  </label>
여러 항목 중에서 몇 항목을 선택하는 경우에는,
- <input> 태그에 value 속성으로 값을 지정해 주면, 선택된 항목의 지정된 값이 쓰입니다. 예를 들자면 아래 코드에서는 "액션"이랑 "코미디"를 선택했을 때 film의 값으로 action과 comedy라는 문자열이 지정됩니다. 폼을 전송했을 때 쿼리 문자열에서는 &film=action&film=comedy처럼 전송됩니다.
```
<label>
  <input type="checkbox" name="film" value="action">
  액션
</label>
<label>
  <input type="checkbox" name="film" value="comedy">
  코미디
</label>
<label>
  <input type="checkbox" name="film" value="romance">
  로맨스
</label>
```

날짜 date

선택한 날짜로 값을 지정할 수 있습니다.
<input name="birthdate" type="date">

파일 file

정말 자주 쓰이는 타입이어서 이건 따로 기억해 둡시다. 파일을 선택할 수 있는 인풋인데요.
<input name="avatar" type="file">
- 파일 형식 지정하기
  accept라는 속성을 써서 허용할 파일 확장자들을 정해 줄 수 있습니다.
  <input name="avatar" type="file" accept=".png,.jpg">
- 파일 개수 지정하기
  multiple 이라는 참/거짓 속성을 사용하면 여러 개 또는 한 개만 선택하도록 정할 수 있습니다.
  <input name="photos" type="file" multiple> 
  <input name="avatar" type="file">

이메일 email

텍스트를 입력할 수 있는 건 똑같지만, 버튼을 눌러서 폼을 전송할 때 올바른 이메일 형식인지 자동으로 검사해 줍니다.
<input name="email" type="email">

숫자 number

숫자를 입력하고, 최소/최대 값이나 버튼을 눌렀을 때 증가, 감소할 양을 정할 수 있습니다.
<input type="number">

<input type="number" min="100" max="1000">

<!-- 100에서 1000사이, 버튼을 눌렀을 때 100씩 증가, 감소 -->
<input type="number" min="100" max="1000" step="100">

비밀번호 password

값을 입력했을 때 입력한 내용이 가려집니다.
만약 visible로 토글 기능을 만든다면 type을 password로 하느냐, text로 하느냐를 조절하면 된다.

<input type="password">

라디오 radio

동그란 선택 버튼입니다. 체크박스와 다르게 여러 항목 중 하나의 항목만 선택할 수 있습니다.
value 속성과 같이 사용하면, 같은 name을 가진 <input> 태그들 중에, 선택한 <input> 의 value 값을 입력하도록 할 수 있습니다.
예를 들어서 아래 코드에서 "좋음"을 선택하면 feeling의 값으로 3이라는 값이 들어가게 됩니다.

<input id="very-bad" name="feeling" value="0" type="radio">
<label for="very-bad">아주 나쁨</label>
<input id="bad" name="feeling" value="1" type="radio">
<label for="bad">나쁨</label>
<input id="soso" name="feeling" value="2" type="radio">
<label for="soso">보통</label>
<input id="good" name="feeling" value="3" type="radio">
<label for="good">좋음</label>
<input id="very-good" name="feeling" value="4" type="radio">
<label for="very-good">아주 좋음</label>

범위 range

범위 안에서 선택할 수 있는 인풋입니다.

<label for="signup-feeling">현재 기분</label>
<input id="signup-feeling" name="feeling" min="1" max="10" type="range">

텍스트 text

인풋 타입의 기본 값입니다. 일반적인 텍스트를 입력할 때 사용합니다.
<input name="nickname" type="text">

옵션 선택 `<select>`

미리 정해져 있는 여러 값들 중에서 하나를 선택할 수 있는 태그입니다. <select> 태그 안에 <option> 태그를 value와 함께 사용하면 되는데요.
예를 들어서 아래 코드에서 드라마를 선택하면 genre의 값이 drama가 됩니다.

<label for="genre">장르</label>
<select id="genre" name="genre">
  <option value="korean">한국 영화</option>
  <option value="foreign">외국 영화</option>
  <option value="drama">드라마</option>
  <option value="documentary">다큐멘터리</option>
  <option value="vareity">예능</option>
</select>

긴 글 `<textarea>`

긴 글을 입력할 수 있는 인풋입니다. <input> 태그와 달리 반드시 종료 태그(</textarea>)를 써 주어야 합니다.
<textarea name="content"></textarea>
이때 placeholder 의 디자인을 바꾸려면 CSS 선택자로 ::placeholder 를 활용하면 됩니다.

input::placeholder {
  color: #dddddd;
}

반드시 입력해야 하는 값 required

폼에서 반드시 입력해야 하는 값이 있다면 required 속성을 써주면 됩니다. 만약 required인 인풋의 값이 비어있다면, 전송 버튼을 눌러도 전송되지 않습니다.
<input name="email" type="email" required>
예전에 입력한 값들을 보여주는 인풋을 보신 적 있나요? 이건 autocomplete 이라는 속성을 써서 그런 건데요. 이 속성을 지정해 두면 폼이 전송될 때마다 입력한 값을 웹 브라우저에 저장해 두고, 나중에 인풋에 값을 입력할 때 추천해 줍니다.
참고로 required와 달리 on이라는 값을 지정해 주어야 동작하니까 꼭 기억해 주세요.
<input name="search" type="text" autocomplete="on">
만약에 이메일을 채워 넣게 하고 싶다면 email이라는 값을 쓸 수 있고, 전화번호를 채워 넣고 싶다면 tel이라는 값을 쓸 수 있는데요. 이런 건 특히 스마트폰으로 사이트를 접속했을 때 유용하겠죠?

<input name="email" type="email" autocomplete="email">
<input name="telephone" autocomplete="tel">

link 태그

HTML문서에서 외부에 있는 것을 불러올때 쓴다.
<link rel="stylesheet" href="style.css">
처럼 rel은 어떤 종류의 파일을 가져오는지 적는다.
href는 파일의 주소, 경로입니다. 현재파일을 기준으로 파일의 경로를 찾는다.

`<script>`태그

자바스크립트를 쓰면 웹사이트 안에서 코드를 실행해서 유용한 일들을 할 수 있다.
HTML에서 자바스크립트를 쓰는 방법은 <script>태그를 쓴다.
body 태그안에 script 를 쓰고 그안에 실행문을 넣어주면된다. 아니면 파일을 따로 만들어서 파일 경로를 지정해주면된다.
script태그는 닫는 태그가 필요하다. 안닫으면 에러 발생한다.
권장되는 위치는
'<head> 태그 내부의 메타 태그나 제목 태그 다음, 혹은 <script> 태그' 이전 입니다. <body> 태그 내부에도 위치할 수 있지만,<head> 태그 내부에 위치하게 하는 것이 권장되는 이유는,

1. 스타일 우선 로드:
스타일시트가 페이지 로드 시 최대한 빨리 적용되어 깜빡임 현상을 방지할 수 있습니다.
2. SEO 및 성능 최적화:
검색 엔진과 브라우저가 페이지 로딩 성능을 개선할 수 있습니다.

사이트에 대한 정보

head 태그는 페이지에 대한 정보를 담고 있는 태그이다.
이런걸 메타데이터라고 하는데 컴퓨터가 읽고 사용하는 메타데이터가 담겨있다.
이는 데이터에 대한 데이터라고 할 수 있다.

시맨틱 태그란??

웹 사이트에서 자주 쓰는 배치를 기준으로 만들었다.
의미를 가진 태그라는 뜻에서 시맨틱 태그(Semantic Tag)라고 부른다. // 영역을 의미있게 나눌때 사용한다
작성하는 사람의 의도가 중요하다
이름은 달라도 성질은 div랑 완전 똑같은 태그들이다.
영역 위에서 로고, 제목, 메뉴 등 영역의 도입부를 담고있는 <header> 태그가 있다.
사이트안 이동을 하는 영역에는 <nav>라는 태그를 사용한다.
영역의 본격적인 내용에는 <main>
영역 아래쪽에 여러가지 정보를 담고있는 <footer>태그
<main> 태그는 한 페이지 안에서 딱 한번만 쓸수있지만,
<header>랑 <footer>는 여러 영역에서 사용가능하다.
하나의 독립적인 내용을 가지고 있는 태그는 <article>이라는 태그를 사용한다. 이 안에는 하나의 완전한 내용이라고 보면된다.
블로그 글 밑에 달린 댓글은 블로그 글의 일부가 아니라 하나의 독립적인 내용이라 <article>
<section> 은 어떤것의 구분을 나타낼때 쓴다.
글 목록을 보여줄때 각기 다른 내용의 글을 section 으로 영역을 나눌 수 있다.
이미지와 이미지설명을 묶어놓은 영역은 figure 라는 태그를 사용

사용하는 이유는?

HTMl이 단순히 화면을 보여주기 위한 코드가 아니다.
1. 검색 엔진 최적화(Search Engine Optimization)
- 검색 최적화(SEO)
- 다른 사람이 검색했을때 우리 사이트를 제일 위로 올리고 싶다? 이걸 위해 사이트를 최적화하는 것을 SEO라고 한다.
- 여러 방법중 head 태그 안에 meta 태그를 꼼꼼하게 작성하고, 시맨틱 태그를 작성하는 것이다.
- 메타데이터와 시맨틱태그가 잘 작성되어있으면 검색엔진이 더 잘 찾을 수 있다.
  2. 웹 접근성(Web Accessibility)
- 줄여서 접근성(A11y) // Accessibility를 줄여서 표현한건데요, A와 y 사이에 11글자가 있어서 A11y라고 표현
- 시각장애인은 화면을 읽어주는 스크린리더를 사용한다. div로만 되어있다면 어디가 본문인지 어디가 메뉴인지 알 수 없지만, 시맨틱 태그를 쓴다면 알 수 있다.
- 장벽없은(Barrier-Free)인터넷을 만드는데 중요한 역할
  3. 개발자 관점
- 개발자는 코드를 읽고 수정하는 직업
- div 태그만 있는 코드보단 시맨틱 코드를 사용한 코드가 더 이해하기 쉽다. 개발자의 생산성을 높이는데 도움
  
  너무 남발하는 것 보다 div로 만들만큼 만들고 시맨틱태그로 매꾸는 것을 추천

웹 페이지에 설정하는 메타 태그 살펴보기

메타데어터는 데이터를 설명하는 데이터다. 즉 메타 태그는 HTML 데이터를 설명하는 데이터를 갖는 태그이다.
구글 검색하면 사이트 설명, 페북, 카카오 등 SNS 공유할때 링크 미리보기에도 사용된다.
살펴볼 메타 태그들은 한 번 설정하면 변경할 일이 거의 없는 것들이에요. 가볍게 이런 설정도 필요하구나 하고 넘어가자.
<meta charset="utf-8">
- HTML 문서의 문자 인코딩을 utf-8로 지정해요.
- 브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐이 없도록 해요.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
- name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있어요.
- width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정해요.
- initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정해요.
- minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막아요.
- maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막아요.
- user-scalable=no: 사용자크기변화를 no로 처리해서 크기변화를 못하게 막아요.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- 인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드에요.
어떻게 사용할까?
- <head> 안에 문서를 설명하는 <meta> 를 넣습니다. 메타 태그는 닫는 태그가 없습니다.
메타 태그의 특성은 해당 링크를 통해 확인할 수 있습니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta
그리고, 메타 태그에 name 으로 설정 가능한 값들은 해당 링크를 통해 확인할 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name

김태완

중고

이전 포스트

HTML, CSS (1)

다음 포스트

HTML, CSS (2)

테이블 스타일링

이미지

비디오

오디오

iframe

폼(form)이란?

폼만들기

체크박스 checkbox

날짜 date

파일 file

이메일 email

숫자 number

비밀번호 password

라디오 radio

범위 range

텍스트 text

옵션 선택 `<select>`

긴 글 `<textarea>`

반드시 입력해야 하는 값 required

link 태그

`<script>`태그

사이트에 대한 정보

시맨틱 태그란??

사용하는 이유는?

웹 페이지에 설정하는 메타 태그 살펴보기

HTML, CSS (1)

HTML, CSS (3)

0개의 댓글

HTML, CSS (2)

테이블 스타일링

이미지

비디오

오디오

iframe

폼(form)이란?

폼만들기

체크박스 checkbox

날짜 date

파일 file

이메일 email

숫자 number

비밀번호 password

라디오 radio

범위 range

텍스트 text

옵션 선택 <select>

긴 글 <textarea>

반드시 입력해야 하는 값 required

link 태그

<script>태그

사이트에 대한 정보

시맨틱 태그란??

사용하는 이유는?

웹 페이지에 설정하는 메타 태그 살펴보기

HTML, CSS (1)

HTML, CSS (3)

0개의 댓글

옵션 선택 `<select>`

긴 글 `<textarea>`

`<script>`태그