20250324 - 프론트 엔드 1

1. 전체 리뷰

오늘부터 본격적으로 강의를 시작했다.
HTML에 대해 배웠는데 아직은 전에 배웠던 것과 크게 다르지 않아 복습한다 생각하며 들었다.
이 강사님도 디테일한 것을 외우려 하기보단 프로젝트를 직접 진행하며 체화하는 것이 중요하다 말씀하셨다. 프로젝트.. 할 아이디어가 없는데 하나 고민해서 진행하면 좋을 것 같다.

2. HTML

1. 기본 구조

• Hyper Text Markup Language의 약자
• 페이지에서 눈에 보이는 요소들을 다루는 것
• 태그 + 속성으로 구성
• w3school에서 다양한 태그와 속성 연습 가능
• 의 형태가 기본 구조로 태그를 열고 닫아야 함

2. 텍스트 관련 태그

• 제목 h1-h6
• 문장 p / 단어 span
• 줄바꿈 br / 띄어쓰기  
• 테이블 table / 행 tr / 열 td / 합치기 row/colspan
• 리스트 ul/ol, 각 리스트 아래에는 li 요소가 있어야 함
• 링크 연결 a href=""로 연결
  • 링크가 삽입되는 태그들 : a, img, video, audio, iframe
  • 링크 이용 시 경로 작성이 중요
  • 절대경로 : 절대적인 주소를 입력
  • 상대경로 : 내 위치를 기반하여 상대적인 경로

3. Class와 Id

• class
  • HTML 요소를 특정하기 위한 명칭으로 사용
  • 하나의 요소에 여러 class, 한 class를 여러 요소에 사용 가능
• id
  • HTML 요소에 고유 명칭을 지정하는데 사용
  • 한 문서 내에서 중복되는 id 사용 불가

4. form 태그

• 정의
  • 데이터를 전달하기 위한 컨테이너
• action과 method
  • action : 사용자가 입력한 내용을 제출할 서버 위치
  • method : 사용자가 입력한 내용을 제출할 때 사용할 메소드
    • GET
    • POST
• 그 외 태그
  • input / select / button 등이 있음
  • 이 태그들 사용시 각 태그에 name 값을 부여해야 함