HTML, CSS 기초

1. HTML 기초

HTML이란?

Hypertext Markup Language: 웹사이트의 뼈대를 구헝하는 마크업 언어

HTML 기본 구조

• html: 최상위 root
• head
  • 웹사이트 정보(제목, 설명, 썸네일 등): SNS에 링크를 공유하거나 구글 검색했을 때 나오는 정보들
  • 화면에 보이지 않음
• body
  • 이 안에 주요 코드 작성
  • 화면에 보이는 부분

HTML의 모든 태그 목록

https://developer.mozilla.org/ko/docs/Web/HTML/Element

자주 사용하는 태그

• div: division(만능태그), 공간의 좌우 전체를 차지(block 요소)
• h1, h2, h3, h4, h5, h6: 제목
• p: paragraph(문단)의 약자, 긴 텍스트를 넣을 때 주로 사용
• span: 작성한 글자 공간만큼만 차지(Inline 요소), 짧은 텍스트를 감쌀 때 주로 사용
• img: 이미지, src 속성에 이미지 파일 주소를 넣어야 함
• a: 다른 페이지로 이동하는 링크, href 속성에 이동할 페이지 링크를 넣어야 함(target="_blank" 속성을 넣으면 새창으로 열림)
• button: 버튼(클릭하면 어떤 동작이 일어나게 하고 싶을 때 사용)
• input: 입력창(text, number, email, password, file, checkbox 등 다양한 type이 있음), form 안에 label & input을 쌍으로 배치하는 구조를 자주 사용
• ul: unordered list(순서가 없는 리스트)의 약자, 여러 항목을 나열할 때 사용(ul 안에 li를 여러개 나열하는 형태)

---

2. CSS 기초

CSS란?

Cascading Style Sheets: 웹사이트를 스타일링하는 코드

CSS 셀렉터 종류

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors

CSS의 모든 속성 목록

https://developer.mozilla.org/ko/docs/Web/CSS/Reference#%ED%82%A4%EC%9B%8C%EB%93%9C_%EC%83%89%EC%9D%B8

자주 사용하는 속성

• width : 너비
• height : 높이
• margin : 테두리(border) 바깥쪽 여백
• border : 테두리
• padding : 테두리(border)와 내부 컨텐츠 사이의 공간
• font-size : 글자 크기
• font-weight : 글자 굵기
• color : “글자” 색깔
• background-color : 배경 색깔
• border-radius : 모서리 둥글게
• position
  • 요소를 특별한 위치에 배치할 수 있음
  • 예: 상단 고정 내비게이션바, sticky 사이드바, floating 버튼 등
• display
  • 레이아웃을 조정하는 역할
  • block, none : 화면에 보이기, 숨기기
  • flex, grid : 배치 & 정렬
  • display: flex
    • justify-content : 메인축(기본 가로축) 정렬
    • align-items : 반대축(기본 세로축) 정렬
    • flex-direction: column : 메인축을 세로축으로 변경(세로 정렬할 때 사용)