akjfal

1. HTML&&CSS 기초 - 1 본문

boostcourse/웹 UI개발

1. HTML&&CSS 기초 - 1

akjfal 2021. 1. 14. 00:57
더보기

강의를 들으면서 중요하다 생각한부분과 연관되어서 생각한부분을 작성했습니다.

강의 보러가기

1) HTML 이해하기

HTML코드 - captor 1 ~ 2

HTML문법

  • 태그(tag) : <>
  • 요소(element) : <>내용</> : 내용을 포함한 태그 전체 → 태그와 요소를 같은의미로 사용하는 사람이 많아 주의
  • 속성(Attribute) :이름, 값 → 이름="속성값" or '속성값', 순서는 상관 없으며, 공백으로 구분
  • 자식태그는 부모태그를 벗어나서는 안된다.
  • 빈태그 : 내용이없어 종료태그가 필요하지 않음 → 브라우저가 화면에 직접 내영을 그려줘야하는 경우
  • 공백 : " " 경우 2개 이상일 시 무시, 줄바꿈 무시
  • 주석 : <!— ...—>

문서의 기본 구조

  • <!doctype> : 이 문서가 어떤 버전으로 작성되었는지 알려주는 선언문 - 반드시 최상단에 선언 웹표준과 관련 → html은 HTML5에 대한 선언으로 XHTML, HTML4.0등도 사용가능하다.

  • <html> 1. lang : 어느 언어로 작성되었는지 —> 브라우저들이 참고하는데 사용

  • <head> : meta, title, link, style 문서의 기본정보설정, 외부 스타일시트, 자바스크립트파일 → 화면에 표시안됨

    • <meta> : charset - 문자의 속성설정 → 대체적으로 utf-8사용 → string을 불러와 서버에 보내면서 정규화 문제로 에러가 나는 경우가 있는데 이는 서버에서 처리해줘야하는 현상
    • <title> :  접근성, 검색엔진등에 사용되니 주의

  • <body> : 내용들이 들어가는 태그

    • heading tag : <h1 ~h6>
    • p tag : 내용 태그
    • br : 개행 → break
    • b : 글자를 굵개
    • I : italic 기울임 태그
    • u : underline
    • s : strike 중간선 태그
    • a : href=실제로 이동하게될 url
      • target : _self : 현재화면에 표시-default, _blank : 새로운 창에 표시
      • 내부링크 : #id
    • div : block level
    • span : inline level
    • ul : unordered list - 앞에 점이 나옴 - li를 안에 사용
    • ol : ordered list → 숫자가 앞에 나옴
    • dl : description list → 용어와 설명이 세트 + 하나의 항목
      • dl: 용어 리스트로 설명, dt: 용어에 구분, dd: 용어의 정의 → 탭처럼 나옴
    • 중첩시 li태그안에 넣기
    • img : 닫는 태그가 없음,
      • src : 이미지 경로
      • alt : 대체 텍스트, 읽어주는 텍스트
      • width : height : 가로 세로 → 자동으로 픽셀단위 계산, 없으면 이미지 원본대로, 하나만 선언하면 비율맞게
      • gif : 투명과 애니메이션 지원, jpg : 투명 지원x, png : 투명과 반투명 모두 지원
    • table : 가로. : row 세로 : column →<table> <tr> <td></td> <td></td>... </tr> → 1row </table>
      • td, th : 데이터셀 → 제목에는 th
      • tr : 행
      • table : 표
      • caption : 표의 제목
      • thead : 제목행 / tfoot : 바닥행 / tbody : 본문행 → html버전에따라 tfoot위치가 다른데 5.1에서는 tbody뒤로 고정
      • colspan : 가로 방향으로 병합, rowspan: 세로 방향으로 병합 → 개발자가 계산해서 알아서 작성해야함
      • colgroup : table의 width, background를 미리 지정 가능 → 내부는 col태그를 사용해 설정
      • scope : 장애니용 리더기의 읽는 방향 설정
      • headers속성 : td의 headers속성은 해당 데이터 셀과 연관된 하나이상의 헤더셀을 명시
    • form 관련 → action
      • input
        • type=text, password→input가림,
        • type=radio : 체크 버튼→상호배타적, name을 같게해주면 상호배타적이됨
        • type=checkbox : radio와 비슷하지만 중복 체크 가능
        • type=file : 파일 넣기
        • type=submit : 제출 value→ 버튼 안에 값 변경
        • type=reset : 초기화 value→ 버튼 안에 값 변경
        • type=button : 버튼이 나옴 value→ 버튼 안에 값 변경
        • type=image: src, alt, width, height
      • select → option : drop바 나옴
      • textarea : 여러줄을 쓸수있는 박스 → 크기를 col과 row를 통해서 박스 사이즈 조절
      • button: input 타입과 차이점 → 빈태그가 아니다, 안에 내용을 직접 넣을 수 있다, 좀 더 스타일하게 가능하다 → type=submit|reset|button가능
      • label : 연결 시켜주고하자는거 꾸며줌 → 접근성 향상 → label의 for와 맞출거 id를 맞춰줘야한다.
      • fieldset : form요소를 그룹화 → form 안에서 이걸로 묶어줌
      • legend : fieldset요소로 묶인걸 제목으로 달아줌 → 맨 위에 선언해주어야함
      • form : 폼 데이터를 그룹화하여 서버에 전송한다
        • action : 주소, method : get, post

'boostcourse > 웹 UI개발' 카테고리의 다른 글

1. HTML&&CSS 기초 - 3  (0) 2021.01.15
1. HTML&&CSS 기초 - 2  (0) 2021.01.15
'boostcourse/웹 UI개발' Related Articles more
Comments