soju 스터디 2주차 - html

thousand_yj·2023년 1월 3일
html
0

soju 스터디

목록 보기
2/7

HTML

  • 웹 브라우저 환경의 베이스가 되는 HTML
  • 문서의 구조, 정보 위계가 명확하게 보이는 아름다운 HTML 코드를 작성하자 -> semantic markup
  • HTML은 프로그래밍 언어다? (X)
  • HTML은 웹 페이지의 구조를 나타내는 마크업 언어다

태그

HTML에서는 웹 문서에 정보를 정의해주는 방식

  • <tag> </tag> 형식으로 데이터를 감싸서 데이터의 형식, 의미를 브라우저에게 전달
  • 2가지 방식으로 표시
    • <tag> element <tag/> : 많은 태그가 속함
    • <tag element > : 내용이 비어있는 태그(빈 태그)로 속성을 통해 화면에 나타나는 경우가 많다. input, img, link 등이 해당

속성

태그만으로는 다 정보를 표현 못하는 경우가 있어, 추가로 정보를 넘겨줄 때 사용

  • <tag attr="value"> </tag> 형태로 속성이름="속성값"을 넘겨준다
  • 한 태그에 여러 속성을 선언할 수 있으며 각 속성은 공백으로 구분한다

중첩된 요소

ul 태그 안에 li 태그가 무조건 자식으로 와야하는 규칙이 있는데 이처럼 태그가 중첩되는 경우 부모-자식의 형태를 띈다.

HTML 태그의 종류

제목, 단락요소

  • h1 ~ h6 : 제목
  • p : 문단 (block 타입)
  • br : 줄바꿈

텍스트를 꾸며주는 요소

  • b : 글자 굵게, 볼드처리
  • i : 이탤릭 처리
  • u : 밑줄
  • s : 중간선(취소선)
  • 웹 문서의 구조와 표현이 분리되며 표현용 태그가 많이 사라졌다.

앵커 요소

  • a: 현 위치에서 다른 위치로 이동할 때 사용.
    • href : 목적지 주소값을 반드시 href 속성으로 넘겨줘야 한다. (주소값은 외부 url 뿐만 아니라 html 내부의 element로 이동 역시 가능하다. 내부 element로 이동하고자 할 때는 #를 쓰고 이동하고자 하는 id의 속성값을 적어주면 된다.)
    • target : 링크된 리소스를 어디에 표시할지 나타내는 속성
      • _self : 현재 화면에 표시. 디폴트 값
      • _blank : 새로운 창에 표시.
      • _parent, _top : 프레임 조건 내에서 동작하나 최근 잘 사용하지 않음

의미가 없는 컨테이너 요소

단순히 요소를 묶기 위해 쓰는 태그로 의미가 없다. 주로 스타일링에 사용된다.

  • div : block 타입의 태그
  • span : inline 타입의 태그

리스트 요소

  • ul : 순서가 없는 리스트. 불렛으로 표현
  • ol : 순서가 있는 리스트. 자동으로 넘버링
  • 리스트의 아이템은 li 태그로 감싸 자식 요소로 넣어준다.
  • dl : definition/description list로 용어와 그에 대한 정의를 표현할 때 사용.
  • ul, ol 태그와 달리 용어(<dt>) & 설명(<dd>) 의 형태로 한 항목을 이룬다. 하나의 용어(dt)에 여러 정의(dd)가 필요한 경우 여러 번의 dd를 사용해도 괜찮다.

이미지 요소

  • img : 문서에 이미지를 삽입하는 태그. 닫는 태그가 없는 형태
    • src : 필수 속성. 이미지의 경로를 나타냄 (상대경로, 절대경로 모두 OK)
    • alt : 필수 속성. 이미지를 대체할 수 있는 이미지에 대한 설명을 작성해주면 된다. 웹 접근성 측면에서 중요한 속성
    • width, height : 단위 필요X. 값을 입력하면 자동으로 픽셀단위로 계산. 이미지의 크기가 고정적이라면 해당 속성을 선언해주는 것이 성능적인 측면에서 좋다. 해당 속성이 없으면 이미지는 원본 크기를 따른다. 하나만 선언하는 경우 다른 속성은 자동으로 비율에 맞게 변경된다.

테이블 요소

  • table : 표. 행 단위로 작성되는 요소를 모두 감싼다,
  • tr : 각 행
  • th : 제목 (제목 셀)
  • td : 내용 (셀)

표의 구조와 관련된 태그

  • caption : 표의 제목
  • thead: 제목 행을 그룹화
  • tfoot: 바닥 행을 그룹화
  • tbody: 본문 행을 그룹화

유저의 입력을 처리하는 form 요소

  • input : 유저로부터 입력을 받을 수 있는 요소

    • type="text" : 디폴트 값. 한 줄의 텍스트 입력 가능
    • type="password" : 암호화되어 입력값이 보이지 않음
    • type="radio" : 동일한 name 속성을 부여. 여러 값 중 하나만 선택이 가능
    • type="checkbox" : 동일한 name 속성을 부여. 중복 선택이 가능
    • type="file" : 파일을 선택하여 업로드할 수 있음
    • type="submit" : form 값 전송
    • type="reset" : form의 값을 초기화
    • type="image" : 이미지 삽입(submit과 동작이 동일)
    • type="button" : 아무 기능X 단순 버튼

  • select : 드롭다운메뉴와 같이 몇개의 선택지를 리스트 형태로 노출. option 태그를 사용하여 선택지를 나타낸다.

  • textarea : 여러 줄의 텍스트 입력 가능

    • rols : 화면에 표시되는 줄 수
    • cols : 가로 크기 조절하는 속성 (한 줄에 들어가는 글자의 수. 정확한 글자 수는 아님에 유의)

  • button : 버튼을 만들 때 사용

    • type="submit | reset | button" : input요소에서 사용했던 것과 동작이 동일하다. 다만 빈 태그가 아니라 내용을 직접 넣을 수 있어 스타일링이 보다 다양하게 적용 가능하다.

  • label : form의 요소를 명시적으로 연결시켜줄 수 있다. label의 for<->form 요소의 id를 매치시켜 사용한다

  • fieldset : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용

  • legend : 폼 요소의 제목으로 <fieldset> 내부에 작성

  • form : 폼 요소를 감싸는 태그로 데이터를 묶어 실제 서버로 전송하는 역할

    • action : 데이터를 처리할 서버의 주소
    • method : get(데이터 url창에 노출) / post(노출X) 중 데이터를 전송할 방법

콘텐츠 모델

  1. Metadata : 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함. 메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 <head>내에 들어감

  2. Flow : 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함. Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함.

  3. Sectioning : 문서의 구조와 관련된 요소들이 포함.
    HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향

  1. Heading : h1, h2, h3, h4, h5, h6 각 section의 header를 정의
  1. Phrasing : 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함
  1. Embedded : 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당
  1. Interactive : 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당.

시멘틱 마크업

컴퓨터, 브라우저가 잘 이해할 수 있도록 의미에 맞는 태그, 요소를 사용하는 것이고 문서를 표현할 때는 구조화를 잘 해주는 것

profile
thousand_yj
함께 일하고 싶은 개발자가 되기 위해 노력합니다. 코딩테스트 관련 공부 및 이야기는 티스토리에도 업로드되어 있습니다.
이전 포스트

soju study 1주차

다음 포스트

soju 스터디 2주차 - css

0개의 댓글