본문 바로가기
기타

HTML, CSS

by Bhinney 2022. 7. 22.

1. HTML (Hyper Text Markup Language)

  • 웹 페이지의 틀을 만드는 마크업 언어
  • <body>와 같이 부등호로 묶인 tag들의 집합
  • self-closing tag (예 : <br> <p> 등)
  • 트리 구조(Tree Structure)
  • 자주 사용하는 HTML 요소
    • <div>, <span>, <img>, <a>, <ul>,  <ol>, <li>, <input>, <textarea>, <button> 등
  • HTML 글쓰기 
<!DCTYPE html> 

<html>
  <head>
     <meta charset="UTF-8"/>
     <title> 제목 </title>
  </head>

  <body>
     <h1> Nice to Meet You. </head>
     <div> Blah Blah Blah </div>
     <span> ABC </span>
 
     <img src="링크 주소.jpg"/>
    
     <a href="링크 주소" target="_blank"> 가나다 </a>

     <ol>
        <li> 옷을 입는다. </li>
        <li> 신발을 신는다. </li>
        <li> 나간다. </li>
      </ol>
  </body>
</html>

2. CSS (Cascading Style Sheet)

  • 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어
  • UI : User Interface
  • UX : User Experience
  • CSS 스타일링
body {
      color : yellow;
      font-size : 25px;
      background : white;
      }
  • css 연결하기 <link> 
<link rel="stylesheet" href="저장명.css"/>
  • #id와 .class

3.  박스 모델(Box Model)

  • 웹 페이지 고유의 직사각형 영역을 박스라고 부른다.
  • block : <div>, <p>
  • inline : <span>
  • border
  • padding : 위px 우px 아래px 좌px;
  • margin : 위px 우px 아래px 좌px;
    • 수값을 지정하여 겹치거나 사라지게 할 수 있다.

'기타' 카테고리의 다른 글

[GitHub] Git branch  (0) 2022.10.23
[GitHub] Issues, Milestone, Projects  (0) 2022.10.23
StringBuffer VS StringBuilder  (0) 2022.07.27
JSON  (0) 2022.07.22
컴퓨터와 프로그래밍  (0) 2022.07.22

댓글