HTML, CSS

웹사이트는 웹 페이지의 모음

웹 페이지는 글, 그림, 동영상 등 여러가지 정보를 담고 있으며, 링크를 통해 다른 웹 페이지로 이동이 가능함.

즉, ***링크를 통해 여러 웹 페이지를 연결한 것***이 웹 사이트

HTML - 구조(레이아웃)

HTML + CSS - 표현(스타일링)

HTML + CSS + JS - 동작(인터렉션)

HTML?

Hyper Text Markup Language

• Hyper Text
  • 참조(하이퍼링크)를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
• Markup Language?
  • 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어
    • 대표적인 예 - HTML, Markdown

• 공부할때 봐야하는 곳 (MDN, W3SCHOOL)

HTML 기본구조

• html : 문서 치상위(root)요소
• head : 문서 메타데이터 요소
  • 문서제목, 인코딩, 스타일, 외부파일 로딩 등
  • 일반적으로 브라우저에 나타나지 않는 내용
• body : 문서 본문 요소
  • 실제 화면 구성과 관련된 내용

요소(element)

• (여는/시작)태그 contents (닫는/종료)태그
  • 태그는 컨텐츠를 감싸는 것으로 그 정보의 성격과 의미를 정의
• 내용이 없는 태그들
  • br, hr, img, input, link, meta
• 요소는 중첩(nested)될 수 있음
  • 요소의 중첩을 통해 하나의 문서를 구조화
  • 여는 태그와 닫는 태그의 쌍을 잘 확인해야함
    • 오류를 반환하는 것이 아닌 그냥 레이아웃이 깨진 상태로 출력되기 때문에, 디버깅이 힘듬

속성(attribute)

• 속성명, 속성값
  • "" 쌍따옴표 사용!/ 여는 태그 안쪽에 사용
  • 각 태그별로 사용할 수 있는 속성이 다르다.
  • 속성은 속셩명과 속성값으로 이루어져 있다.
• 속성을 통해서 태그의 부가적인 정보를 설정할 수 있음
• 요소는 속성을 가질 수 있으며, 경로나 크기와 같은 추가적인 정보를 제공
• 요소의 시작 태그에 작성하며 보통 이름과 값이 하나의 쌍으로 존재
• 태그와 상관없이 사용 가능한 속성(HTML Global Attribute)들도 있음

HTML Global Attribute

• 모든 HTML 요소가 공통으로 사용할 수 있는 대표적인 속성
  • id : 문서 전체에서 유일한 고유 식별자 지정
  • class : 공백으로 구분된 해당 요소의 클래스의 목록 (CSS, jS 에서 요소를 선택하거나 접근)
  • style : inline 스타일
• (몇몇 요소에는 아무 효과가 없을 수 있음)

    
    
    
    


     Google
     

     Naver

form

• 은 사용자의 정보(데이터)를 출력하기 위한 영역

input

• 다양한 타입을 가지는 입력 데이터 유형과 위젯이 제공됨
• 대표적인 속성
  • 나중에 ^^

<form action="/search" method="GET">
    <input type="text" name="q">
</form>

input label

• label을 클릭하여 input 자체의 초점을 맞추거나 활성화 시킬 수 있음
  • 사용자는 선택할 수 있는 영역이 늘어나 웹/모바일(터치)환경에서 편하게 사용할 수 있음
  • label과 input 입력의 관계가 시각적 뿐만 아니라 화면리더기에서도 label을 읽어 쉽게 내용을 확인 할 수 있도록 함
• 에 id 속성을, 에는 for 속성을 활용하여 상호 연관을 시킴