2월 14일 (1) HTML

요소의 형식

<태그명 [속성명="속성값" 속성명 ="속성값" .....]> 내용 </태그명>

[ ] 안의 내용은 생략가능하다. 쓸수도 있고 안 쓸 수도 있다.

공통 태그(List Item) : <li> 항목을 나타낸다.

계층 구조를 가진다.

공통속성 width : 요소의 가로 길이를 지정하는 속성

단위

px 픽셀 한 점의 크기 (내장된 고정된 크기)
% 백분율(기준 : 브라우저 창의 내부 화면 크기에 따라서 길이가 달라진다.)

세로보다 가로를 더 중요하여 여긴다.

UX적 측면에서 보조적인 측면이 더 많이 들어가 있다.

비율을 사용하는 형태로 처리

세로를 먼저 지정하고 가로길이를 지정

<hr>태그 : 수평선 표현

주요 속성 : width 가로길이 지정

size 두께 지정(1-2px 차이 없음, 3px 정도만 사용, 그 이상을 잘 사용하지 않는다.)

목록태그 : List

화면에 목록 형태로 텍스트 및 이미지 등을 출력

1. 순서목록(Ordered List) : <ol>

숫자, 알파벳 등으로 넘버링하여 출력
type 속성으로 넘버링 형태를 변경할 수 있다.
default값(기본값)은 숫자이며, 변경할 수 있는 종류는 5가지
숫자, 대문자 영어, 소문자 영어, 대문자 로마자, 소문자 로마자
style 속성으로 다른 넘버링 형태를 작성할 수 있다.
- 사용방법 style="list-style-type: 다양한 값;" 다양한 값에 원하는 값 넣기 아래 링크에서 확인가능
- start 속성으로 시작 번호를 지정할 수 있다.

  <ol style="list-style-type: cjk-ideographic;" start="8">

W3Schools CSS list-style-type demonstration

www.w3schools.com

예>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>순서 목록</title>
</head>
<body>
  <h2>순서 목록 사용 예</h2>
  <ol>
      <li>HTML5</li>
      <li>CSS3</li>
      <li>JavaScript</li>
      <li>jQuery</li>
  </ol>
  
    <h2>오늘의 점심 메뉴</h2>
  <ol style="list-style-type: armenian;">
      <li>롯데리아</li>
      <li>순대 국밥</li>
      <li>양푼 비빔밥</li>
      <li>점심 특선</li>
      <li>가정식 백반</li>
  </ol>
  
</body>
</html>

2. 비순서목록(Unordered List) : <ul>

도형을 사용해서 목록을 표현
style 속성으로 도형을 변경할 수 있다. 특수문자 입력방법 (ㅁ+한자키)
style="list-style-type: disc;" - ●
style="list-style-type: circle;" - ○
style="list-style-type: square;" - ■
style="list-style-type: none;" - 도형을 제거
- 사이트 메뉴 작성 시 디자인적 요소를 위해서 많이 사용된다.

예>

<!DOCTYPE html><!--2.14 두번째-->
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>비순서 목록</title>
</head>
<body>
  <h2>비순서 목록 사용 예</h2>
  <ul>
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
    <li>jQuery</li>
  </ul>
  <hr>
  <h2>오늘의 점심 메뉴</h2>
  <ul style="list-style-type: circle;">
    <li>자장면</li>
    <li>짬뽕</li>
    <li>탕수육</li>
    <li>깐풍기</li>
  </ul>
</body>
</html>

*하위 목록 작성하기(리스트 안에 리스트)

예제로 확인하기

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>하위 목록</title>
</head>

<body>
  <h2>웹 개발 분야</h2>
  <ul>
    <li>Front-end
      <ol type="i">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
      </ol>
    </li>
    <li>backend
      <ul type="square">
        <li>Java</li>
        <li>Database</li>
        <li>Spring</li>
      </ul>
    </li>
  </ul>
</body>

</html>

3. 사용자(개발자) 정의 목록(definition list)

<dl> 정의 목록 태그
<dt> 정의 용어 태그 definition term
<dd> 정의 설명 태그 definition description

영역을 잡아주는 태그

일종의 카테고리를 제공하고 목록화시켜서 소개할 수 있는 태그

예>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>정의 목록</title>
</head>
<body>
  <h2>Web Front-end</h2>
  <dl>
    <dt>HTML</dt>
    <dd>웹 애플리케이션 화면의 뼈대를 구성</dd>
    <dd>페이지에서 보여질 내용을 작성</dd>
    <dt>CSS</dt>
    <dd>HTML을 보다 세련되게 표현</dd>
    <dt>JavaScript</dt>
    <dd>HTML의 동적인 기능을 구현</dd>
  </dl>
</body>
</html>

CSS 속성으로 대체가 가능하다.

이미지 삽입 태그 <img>

이미지 하나 준비해서 html 파일과 같은 폴더 안에 준비하기!

이미지 파일을 문서에 추가하기 위한 태그, 속성을 사용

empty 태그, 시작태그만 존재하고 닫는 태그(종료태그)가 없다.

내용만 있는 태그

src : 필수속성, 삽입할 이미지 파일의 경로와 파일명을 작성
alt : 이미지가 출력되지 않을 경우(이미지 엑스 박스) 대신 출력할 문장을 작성
- 정상적으로 나오는 경우 출력되지 않는다. 한 칸 띄고 작성
title : 이미지 위에 마우스가 오버(이미지와 마우스의 중첩)되었을 경우 출력할 문장을 작성,
- 부연설명을 달아줄 때 사용
width : 이미지의 출력 너비 값을 지정
- 값만 넣을 경우 자연적으로 px로 지정된다.
- %로 지정할 경우 이미지의 원래 크기의 비율에 따라서 지정된다.
- 가로만 정해도 세로는 비율에 맞춰서 결정된다.
height : 이미지의 출력 높이 값을 지정
- 지정하지 않을 경우 너비 값의 비율에 따라 결정된다.
- 크기에 맞춰 높이를 지정할 일이 있을 때만 지정하면 된다.

예>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지가 있는 문서</title>
</head>
<body>
    <h2>에클레어입니다!</h2><!--기본값 원래 이미지 크기대로 출력-->
    <img src="eclair2.jpg" 
        alt="딸기 에클레어" 
        title="맛있는 딸기 에클레어"
        width="300">
</body>
</html>

인터넷 자원(Resource)

1. 텍스트(글자)

2. 이미지 - 확장자

jpg(jepg) - 투명이 안 됨
png - 투명도를 처리할 수 있음
gif - 애니메이션 사용가능, 용량이 제일 작음

3. 음성 - wav, mp3 등

4. 영상 - avi, mp4 등

5. 객체 - flash, 파일 등 (졸라맨, 마시마로, 엽기토끼 등 애니)

픽셀 - px, pictures Element의 줄임말

화소, 화면을 구성하는 최소 단위이자 기본 단위

위치정보(x, y)와 색상(RGB) 정보로 구성 Bitmap(bmp)

각 색상별로 0~255의 수치를 사용하여 색을 표현한다.(총 256단계)

압축기술 mpeg

mp3, mp4, jpg 등을 압축함

빛의 삼원색을 최대치로 합치면 투명한 색(흰색)

RGB - Red, Green, Blue

화면을 구성하는 점 pixel

해상도 kilo단위 총 들어가는 pixel

모니터의 좌표계 좌측 상단 위치 (0,0)부터 시작

스크롤만 움직여도 좌표 계산이 시작된다.

목록 작성 시 <ul>인지 <ol> 확인하기

목록에 따라서 작성할 수 있는 type이 다르다!

항상 오타확인하기!

* 사이트 따라서 만들어 보기!

저작자표시 비영리 변경금지

'공부기록 > HTTP' 카테고리의 다른 글

2월 15일 (2) HTML - 하이퍼 링크 (0)	2023.02.15
2월 15일 (1) HTML - 멀티미디어 (0)	2023.02.15
2월 14일 (2) HTML - table (0)	2023.02.14
2월 13일 (2) HTML - 웹 문서 만들기 (0)	2023.02.13
2월 13일 (1) HTML - 웹 개발 시작하기 (0)	2023.02.13

새롭게 공부시작하기

2월 14일 (1) HTML - 목록

목록태그 : List

이미지 삽입 태그 <img>

'공부기록 > HTTP' 카테고리의 다른 글

티스토리툴바

2월 14일 (1) HTML - 목록

목록태그 : List

이미지 삽입 태그 <img>

'공부기록 > HTTP' 카테고리의 다른 글

관련글

티스토리툴바