[html/css] 다양한 표현 방식

2024. 8. 3. 18:58·HTML|CSS

20240731수업

1
이문세
붉은 노을
50
2
아이유
붉은 노을
26
3
빅뱅
붉은 노을
27

 
위와 같은 형식을 한국인이 보면 이문세가 나이가50이고 노래제목이 붉은 노을, 아이유라는 가수의 나이가 26이고 노래제목이 붉은 노을, 빅뱅이라는 가수의 나이가 27세이고 노래제목이 붉은 노을이라는 것을 단번에 파악할 수 있지만, 한글을 모르는 외국인은 각 항목이 무엇을 의미하는지 단번에 파악하기 힘들다 
그래서 다음과 같은 방식들을 통하여 표현할 수 있다.
 

[XML]
(eXtensible Markup Language)

<?xml> version="1.0" encoding="utf-8 ?>
<연예인들>
 <연예인>
  <번호>1</번호>
  <이름>이문세</이름>
  <제목>붉은노을</제목>
  <나이>50</나이>
 </연예인>
 <연예인>
  <번호>2</번호>
  <이름>아이유</이름>
  <제목>붉은노을</제목>
  <나이>26</나이>
 </연예인>
 <연예인>
  <번호>3</번호>
  <이름>빅뱅</이름>
  <제목>붉은노을</제목>
  <나이>27</나이>
 </연예인>
</연예인들>

 

결과
파일을 크롬 브라우저에 적용 시킨 결과

마크업 언어(markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 근래에 다루고 있는 html도 마크업 언어이다.
 

[CSV]
(Comma Separated Values)

num,name,title,age
1,이문세,붉은 노을,50
2,아이유,붉은 노을, 26
3,빅뱅,붉은 노을,27

CSV(영어: comma-separated values)는 몇 가지 필드를콤마(comma)(,)로 구분한 텍스트 데이터 및 텍스트 파일이다

csv로 저장할떄 인코딩방식을 ANSI로 변경해주어야 한글이 깨지지않고 엑셀에서 출력된다.
결과

 
[JSON]
(JavaScript Object Notation)

{
  "data":
  {
    "num":1,
    "name": "이문세",
    "title": "붉은노을",
    "age": 50,
  },
  {
    "num":2,
    "name": "아이유",
    "title": "붉은노을",
    "age": 26,
  },
  {
    "num":3,
    "name": "빅뱅",
    "title": "붉은노을",
    "age": 27,
  },
}

 
JSON(JavaScript Object Notation)은 속성-값 쌍(attribute–value pairs), 배열 자료형(array data types) 또는 기타 모든 시리얼화 가능한 값(serializable value) 또는 키-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.

파일을 크롬브라우저에 적용시킨 결과
참조 : https://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:%EB%8C%80%EB%AC%B8

위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 위키백과 우리 모두가 만들어가는 자유 백과사전문서 679,553개와 최근 기여자 1,765명 사랑방 다른 분들과 의견을 교환해봐요! 질문방 지침으로 해소되지 않는

ko.wikipedia.org

 

'HTML|CSS' 카테고리의 다른 글

[html/css]favicon 사용, map태그, area태그, 이미지 좌표 확인 방법, 다각형 링크  (0) 2024.08.04
[html/css]링크 버튼 만들기,vertical align  (0) 2024.08.03
[html/css] 로그인/회원가입 창 구현  (0) 2024.08.02
[html/css] Input type  (0) 2024.08.02
[html/css] table태그 (표 만들기), reset css(스타일 시트 초기화)  (0) 2024.08.01
'HTML|CSS' 카테고리의 다른 글
  • [html/css]favicon 사용, map태그, area태그, 이미지 좌표 확인 방법, 다각형 링크
  • [html/css]링크 버튼 만들기,vertical align
  • [html/css] 로그인/회원가입 창 구현
  • [html/css] Input type
라텐느
라텐느
이제 막 개발을 시작한 초보가 개인공부를 하는 공간입니다.
  • 라텐느
    괴발개발
    라텐느
    • 개발자 (153)
      • HTML|CSS (14)
      • JAVA (29)
      • JAVACSCRIPT (15)
      • SQL (16)
      • 기타 (5)
      • JSP (2)
      • SPRING (13)
      • SPRING BOOT (6)
      • Git&GitHub (1)
      • 시행착오 (2)
      • 개발일지 (35)
        • GreenMiniProject1 (12)
        • GreenMiniProject2 (9)
        • GreenFinalProject (14)
      • Flutter (5)
      • 자격증 (0)
        • SQLD (1)
      • AWS (2)
      • Linux (1)
      • 자료구조&알고리즘 (4)
  • 블로그 메뉴

    • 홈
    • 방명록
    • 태그
  • 링크

    • GitHub
  • 공지사항

  • 인기 글

  • 태그

    링크
    태그
    SQL
    CSS
    link
    tag
    input
    JS
    일지
    티스토리챌린지
    자기계발
    부트캠프
    javascript
    오블완
    개발자
    JQuery
    AJAX
    db
    java
    HTML
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
라텐느
[html/css] 다양한 표현 방식

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.