📒HTML구조

• HTML구조는 크게 head,body로 나뉘고 head밑은 title, body밑은 h,p태그로 나뉜다고 볼 수 있다.

• html : hypertext markup language의 약자

• 프로그래밍 언어: 연산을 통해 프로그램을 만드는 언어

• 마크업 언어: 문서나 데이터의 구조를 표시하는 언어

• DOCTYPE : 이 문서가 html을 명시

• html : html 시작 태그로 전체 틀을 구성

• 요소의 구조:

• 조금 더 자세하게
  

🖊️ //키보드만으로 복붙하기. shift + end

✍️ //공백없이 이동하기 cntr키 누르고 방향키

html태그는 열린태그, 닫힌태그가 존재하는데, <>,</>사이에 콘텐츠를 위치시켜 문서 구조 표현가능

태그 종류에 따른 역할

• 1. h1태그: 문서의 제목을 표시하는데 사용.
• 2. p태그: 단락 지정가능 문장 앞뒤로 여백 생성
• 3.img태그: 닫힌 태그 없이도 사용가능
• 4. input태그 : 쉽게 말해 placeholder 사용 가능. 사용자의 정보 입력에 사용. 버튼 태그 사용 가능
• 5. ul태그: ul(unordered list). 순서가 없는 불릿형태로 작성된 리스트
• 6. ol태그: ol(ordered list). 순서가 있는 리스트
• 7. li태그: 리스트에 위치하는 항목들은 대부분 li태그로 사용
• 8. div태그: 페이지 영역 분리할 때 사용. 쉽게 말해 단락 하나하나를 크게 나눌 때 사용
• 9. span태그: 그냥 텍스트와 같이 줄 바꿈 없이 한 줄로 나열할 수 있게 할 때 사용

• 10. semantic태그: 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그.(header,nav,article,section,footer,main존재)
      10-1. header: 페이지 상단에 로고나 메뉴바 등이 담긴 영역을 구분할 때 사용
      10-2. nav: navigation의 약자로 여러 링크들을 모아놓은 영역 구분
      10-3. main: 제목/본문처럼 페이지의 중요한 영역 구분
      10-4. aside: 사이드에 위치한 영역 구분
      10-5. footer: 페이지 하단 구분
      10-6. section: div를 쓰기엔 조금 작은 범위에서 사용. 한 영역에서 구분이 필요한 경우에 사용 태그를 시작으로 브라우저에 해당 문서가 HTML임을 명시

css

🖊️css는 cascading Style Sheets의 약자로 html을 디자인하는 역할

버튼에 마우스를 올리거나 버튼을 클릭했을 때 색상이 변하는 등 다양한 디자인 가능
크게 셀렉터와 선언 블록으로 나뉜다. {}안에 지정하는 것이 대부분이며 각각의 속성은 ;로 구분
body라는 큰 셀렉터가 있으면 그 안에 color,font-size등 지정. 이것이 선언 블록
html태그 이외에도 #을 이용하거나 .을 이용해 class를 공유하는 특정 요소 스타일 지정 가능
//만약 특정 요소에 id,clss모두 지정되어 있다면 tag<class<id순으로 우선순위가 매겨진다.
html에 css적용하기

• 인라인 스타일. 스타일 태그를 이용해서 css지정이 가능하다.
• 내부 스타일시트. 헤드 태그내에 스타일 태그 삽입하고 css문법 작성. 해당 html문서에만 스타일 적용된다.
• 외부 스타일시트. 외부에 css를 작성한 경우 link rel="stylesheet" href=""형식으로 적용.