▪️ 마크업 언어(XML,HTML,JSON…)

: 텍스트 문서나 데이터의 구조와 의미를 정의하고 표현

장점: 데이터 구조화, 표준화,SEO 및 접근성 향상 등등

항목  HTML  XML  JSON
풀 네임 HyperText Markup Language Extensible Markup Language JavaScript Object Notation
역할 웹 페이지의 구조와 콘텐츠를 정의 데이터의 구조와 계층적 표현 데이터 교환 및 표현을 간결하게 표현
용도 웹 브라우저에서 문서의 표시 및 렌더링 데이터 저장 및 전송, 계층적 데이터 구조 정의 클라이언트-서버 간 간단한 데이터 교환

 

🧩 XML JSON 비교 

특징  XML  JSON
가독성 태그 기반, 사람이 읽기 쉬움 더 간결하고 쉽게 읽힘
검증 XML Schema 및 DTD를 통한 검증 가능 JSON Schema 사용 가능
확장성 사용자 정의 태그로 매우 확장 가능 제한적 (객체와 배열 중심)
데이터 표현 계층적, 복잡한 데이터 표현 가능 단순하고 간결한 데이터 표현
크기 태그로 인해 파일 크기가 커질 수 있음 비교적 크기가 작음

HTML

🔹HTML5 - 기본 구조

<!DOCTYPE html>
<html>
    <!--브라우저에 전달할 내용 head-->
    <head>
        <title>문서의 제목</title>
    </head>
    <!--보여주고자 하는 내용 body-->
    <body>
        문서의 내용
    </body>
</html>

 

HTML5 문서는 첫 번째 줄에 <!DOCTYPE html>가 있어야 한다.

 

🔹공간 분할 태그

  • div : block 형식으로 공간을 분할
  • span : inline형식으로 공간을 분할

 

💡HTML의 모든 요소는 기본적으로 블록 레벨 요소 또는 인라인 요소(Inline element) 중 하나로 동작

 

🔹블록 레벨 요소

  • 한 줄을 차지하는 요소로, 자신만의 공간을 가지며 다른 요소와 줄을 나눔
  • 기본적으로 너비(width)는 부모 요소(컨테이너)의 100%를 차지.
  • 높이(height)는 요소 내부 콘텐츠에 따라 자동으로 결정.

🔹인 라인 요소

  • 같은 줄에 다른 콘텐츠와 함께 배치.블록 요소와는 다르게 줄바꿈을 하지 않는 요소를 의미
  • width와 height 속성은 인라인 요소에는 기본적으로 적용되지 않음
    • 콘텐츠의 크기(텍스트나 이미지의 크기)에 따라 자동으로 너비와 높이가 결정

 

🔹주요 시맨틱 태그

<header> 페이지나 섹션의 헤더로, 제목, 로고, 네비게이션 등을 포함.
<nav> 내비게이션 링크 모음으로, 사이트나 문서의 주요 탐색 링크를 제공.
<main> 문서의 주요 콘텐츠를 나타냄. 다른 반복되는 요소(header, footer 등)와 구분.
<article> 독립적으로 배포하거나 재사용 가능한 콘텐츠(블로그 글, 뉴스 기사 등).
<section> 주제별로 그룹화된 콘텐츠 블록으로, 일반적으로 제목(<h1> ~ <h6>)을 포함.
<aside> 부가적인 정보나 사이드바 콘텐츠.
<footer> 페이지나 섹션의 하단 콘텐츠(저작권, 링크, 연락처 등).
<figure> 이미지, 차트 등 독립적인 콘텐츠를 설명.
<figcaption> <figure>에 대한 설명을 제공.
<mark> 하이라이트나 중요한 텍스트 강조.

 

📌HTML5의 태그는 단순히 글자를 꾸미는 것이 아니라, 문서의 의미를 명확히 정의하고 검색 엔진 최적화(SEO)에 도움

 

CSS

🔹CSS 선택자

  • * 모든 요소 선택
* {
margin: 0;
padding: 0;
}

 

브라우저마다 마진이랑 패딩 초기 값이 다르기 때문에 처음부터 전체 초기화를 시켜 놓음

  • # 아이디
#container {
   width: 960px;
   margin: auto;
}

 

id는 같은 Page에서 중복되지 않게 사용 해야 함

  • . 클래스
.error {
  color: red;
}

 

class는 여러 개의 요소 가능, id는 하나

  • 요소
a { color: red; }
ul { margin-left: 0; }

 

한 페이지에 있는 모든 요소를 대상으로 삼음

 

 💡우선순위: 아이디>클래스>요소

  • X Y
li a {
   text-decoration: none;
}

 

하위 요소 전체

  • X > Y

일반 X Y와 X > Y의 차이점은 후자가 직계 자식만을 선택한다는 것

div#container > ul {
   border: 1px solid black;
}

<div id="container">
   <ul>
      <li> List Item
        <ul>
          <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

 

id가 container인 div의 직계 자손인 ul만 대상으로 삼는다.

첫 번째 li의 자식인 ul은 대상이 되지 않는다

  • X:visited와 X:link
a:link { color: red; } /*클릭하기전*/
a:visted { color: purple; } /*방문한 페이지*/

 

link ,visted 는 가상 클래스

  • X + Y
ul + p {
   color: red;
}

 

인접 선택자, 앞의 요소 바로 뒤에 있는 요소만 선택

  • X ~ Y
ul ~ p {
   color: red;
}

 

X + Y와 유사하지만 덜 엄격

ul 아래 있는 모든 p 요소를 선택

  • X[title]
a[title] {
   color: green;
}

 

title 속성이 있는 앵커 태그만을 선택

  • X:nth-child(n)
li:nth-child(3) {
   color: red;
}/*li의 세번째 자식*/

 

🔹display 

none 태그를 화면에서 보이지 않게 만든다.
block 태그를 block 형식으로 지정한다.
inline 태그를 inline 형식으로 지정한다.
inline-block 태그를 inline-block형식으로 지정한다

 

💡visibility: hidden 요소가 보이지 않음. 그러나 요소가 차지하는 공간은 유지됨.

     display: none 요소가 화면에서 완전히 제거되며, 공간도 사라짐.

🔹oipacity 

  • 태그의 투명도를 조절
  • 0.0은 투명한 상태를 나타내고 1.0은 불투명한 상태

🔹박스 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Model 예제</title>
  <style>
    .box {
      width: 200px; /* 콘텐츠 너비 */
      height: 150px; /* 콘텐츠 높이 */
      padding: 20px; /* 안쪽 여백 */
      border: 5px solid blue; /* 테두리 */
      margin: 10px auto; /* 바깥 여백 */
      background-color: lightgray; /* 배경색 */
    }
  </style>
</head>
<body>
  <div class="box">이것은 박스입니다.</div>
</body>
</html>

 

  • 마진 설정
div {
  margin: 20px;         /* 상, 하, 좌, 우 모두 20px */
  margin-top: 10px;     /* 위쪽만 10px */
  margin-right: 15px;   /* 오른쪽만 15px */
  margin-bottom: 20px;  /* 아래쪽만 20px */
  margin-left: 5px;     /* 왼쪽만 5px */
}

/* 단축 속성 사용법 */
margin: 10px;            /* 모든 방향에 10px */
margin: 10px 20px;       /* 상하 10px, 좌우 20px */
margin: 10px 20px 30px;  /* 위 10px, 좌우 20px, 아래 30px */
margin: 10px 20px 30px 40px; /* 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px */

'TIL' 카테고리의 다른 글

250106-07 TIL  (1) 2025.01.07
250103 TIL  (2) 2025.01.03
241231 TIL  (2) 2024.12.31
241230 TIL  (3) 2024.12.30
241227 TIL  (1) 2024.12.27

티스토리툴바