1️⃣ HTML


  1. HTML(HyperText Markup Language)

    • 웹을 표현하는 가장 중요한 기초적인 언어
    • 웹의 구조를 만든다.
  1. HTML 기본 태그

  • 헤딩 태그

    <head></head>
    - 문서의 기본정보
  • 바디 태그

    <body></body>
    - 출력되는 문서 내용
  • 목록 태그

    • 부모 태그(상위 태그)
      <ul></ul>
      <ol></ol>
    • 자식 태그(하위 태그)
      <li></li>
      💡ul ,ol 태그는 하위 태그로 li 만 가질 수 있음.
    • 부모 태그(상위 태그)
      <dl></dl>
    • 자식 태그(하위 태그)
      <dt></dt>
      <dd></dd>
      💡 dd 태그 안에 목록 태그 올 수 있음.
  • 앵커 태그

    <a href="" target="_blank"></a>
    - 하이퍼링크 연결 태그
    • 속성
      1) href="연결할 페이지 경로"

      2) target=“연결된 페이지가 열릴 창”

      • “_blank” ( 새 창으로 열기)
      • “_self”(디폴트값, 현채 창에서 열기)
  • 이미지 태그

    <img src="" alt="">
    • 이미지 삽입 태그
      • 단독태그(닫는 태그 없음)
      • 속성
        1) src="이미지 경로"
        2) alt=대체텍스트(이미지 설명) ⭐️ 필수!
        • (요소적인)의미 없는 이미지에는 빈 alt(alt="") 쓰기도 함

2️⃣ CSS


  1. CSS(Cascading Style Sheet)
  • 웹 문서의 스타일을 꾸미는 언어
  1. 작성법
    1) Inline 태그

    • lnline 태그 요소로 작성
    • style=“속성:값;속성:값...”
    • 속성:값 사이는 세미콜론(;)으로 구분

    2) Internal 내부

    • <head><style>선택자{속성:값;속성:값;속성:값…}</style></head>

    3) External 외부

  1. 선택자
  • 선택자=호출할 수 있는 이름
    • 유형
      1) 태그명
      2) class
      - 여러 요소에 같은 스타일 적용 가능
      - 호출방법 : class명 앞에 .
      3) id
      - 하나의 요소에만 적용 가능
      - 호출방법 : id명 앞에 #
  1. Box model ⭐️ 참고링크
    • margin : 요소와 요소 사이의 여백
    • border : padding의 외곽선
    • padding : 요소가 가지고 있는 여백(“width, height 바깥 쪽에” 들어가는 여백)
profile
걸음마 개발 분투기

0개의 댓글