HTML & CSS 기본 정리

HTML

HTML 구성

• html 태그: html 문서 전체를 감싸는 태그

• head 태그: html head 부분을 나타내는 태그

• body 태그: html body 부분을 나타내는 태그

• 기타 semantic tag: 부분을 나누되 확실한 목적을 띄도록 구분한 태그

• 자주 쓰이는 태그

• a tag: 링크

• img tag: 이미지

• form tag(매우 중요)

  • input
    • 다양한 타입으로 사용자의 입력 데이터를 받아 백엔드 서버로 전달하는 태그(HTTP Method: POST)
    • button과 같이 자주 쓰는 타입은 아예 태그로 만들어져 있음.

• list tag

  • ol, ul: 리스트 생성 태그; 순서의 유무에 따른 구분
  • li: 항목 태그

• table tag

  • table: 테이블 생성 태그
  • tr: table row 태그
  • th: table row 중 table head를 입력하는 태그
  • td: table row 중 table data를 입력하는 태그

• 공간 분할 tag

  • span
  • div
  • block 형식과 inline 형식이 존재

CSS

CSS 적용

• 외부 스타일 시트 : 외부 파일을 생성하고 이를 import하여 적용
• 내부 스타일 시트 : html 문서에 CSS 스타일 코드를 만들어서 적용
• 인라인 스타일 : html 태그 내부에 속성으로 사용하여 적용
• CSS 적용이 중복될 경우, 우선 순위에 따라 적용된다. (인라인 - 내부 - 외부)

CSS 구성

- 선택자 : 특정 element를 선택할 수 있도록 도움
- 선언 : 선택자에 적용할 속성과 값
- 속성 : 선택자에서 바꾸고 싶은 요소
- 값 : 속성에 적용할 값
- 여러 선택자에 동일한 스타일 적용 => comma(,)로 구분
- 한 선택자에 여러 선언하기 => semi-colon(;)으로 구분
- 주석 : /**/

CSS 선택자 지정 방식

• # : id
• . : class
• > : 자식
• + : 형제
• 특정 CSS 선택자를 지정하는 방식. 스페이스로 구분한다.

CSS 알아둘 것.

• 디자인을 만드는 것이 굉장히 까다롭고 오래걸린다. 디자이너의 일이라곤 하나, 보통 프로젝트 할 땐 프론트가 하니까 재촉하지말고 기다리거나 도와줄 것
• 실제로 CSS 그대로 다 작성하진 않고 다양한 템플릿, 프레임워크를 사용(예. BootStrap)