jerry

전역속성

특정 태그에서만이 아니라, 전체 태그에서 사용할 수 있는 속성

1. id

• 고유 식별자
• HTML 문서 전체에서 고유한 값을 가져야 함
• 공백 불가, 숫자나 특수문자로 시작할 수 없음!
  

2. class

• 식별자
• HTML 문서 전체에서 고유값을 가질 필요 없음 → 같은 class가질 수 있음
• 공백 사용 가능 : class를 여러개 가질 때 사용
  

3. style

• 하나의 요소에만 style 적용할 때 사용
• style sheet에서 작성한 style보다 최우선되어 적용됨
  

4. title

• 하나의 태그에 추가적인 설명을 툴팁으로 적용(마우스 올리면 말풍선이 보여짐)
• 개행과 스페이스 모두 인식
  

5. lang

• 웹 접근성을 높이기 위한 수단
• html태그에서 lang 속성은 전체 문서가 어떤 언어로 이루어져 있는지 나타냄
• 상속 됨
• 부분적으로 특정 태그에서 다른 언어를 사용하게되면 명시해줘야 함
  

6. data

• 속성의 이름을 정해줄 수 있음 : data-*속성로 정의
• data-columns : 실제 존재하는 속성이 아님(속성을 만든 사람이 붙여준 것)
• 자바스크립트 적용시에 사용
  • 태그에 대한 정보가 필요할 때 사용(html 요소가 가지고 있어야 하는 정보를 넣는 속성) : 화면을 보는 사람들의 눈에는 보이지 않지만 자바스크립트가 해당 태그에 대한 정보를 이해하길 원할때 사용

    <article
        id="electric"
        data-columns="3"
        data-index-number="12314"
        data-parent="cars"
    >    
    </article>

  • 몇개의 columns을 갖고 있는지, index-number가 몇개인지 등
    

7. draggable

• 드래그가 가능한지 여부를 나타내는 속성
• true, false를 반드시 명시(boolean속성은 아님 → boolean속성인 경우 기본값은 true로 기재하지 않아도 됨)
• 자바스크립트와 관계가 있는 속성 → 이벤트에 따른 행동을 적용할 수 있음
  

8. hidden

• boolean
• 시각적으로도 스크린리더 등 다른 모든 표시 방식에서 숨겨짐
• 사용자에게 보이지 않길 원하는 요소를 hidden으로 처리
  • 그러나, 보안상의 정보를 숨기고 싶을때는 hidden 사용금지
  • 개발자 도구에서는 태그의 내용을 모두 볼수 있음

1. 구조를 나타내는 요소

div

정의

• division, section을 의미
• HTML 요소의 구역을 나누는 역할
• display:block 속성을 가짐
  • 폭(width)만큼 길이를 차지하는 속성을 가짐

사용목적

• 일단 div 태그로 구역을 나누어서 웹페이지를 구성
• 유지보수, 협업 용이

2. 텍스트 요소

figure

독립적인 콘텐츠를 표현

• pre, blockquote와 같은 태그는 그 자체로 독립적인 내용을 담고 있지 않음
  • 이런 태그들을 묶어서 위 혹은 아래에 설명을 추가하는 태그
• 이미지, 비디오, 도표 등을 묶어서 설명하기도 하는 태그
• 연관성이 있는 컨텐츠를 묶어줌

3. 임베디드 요소

1) img

• 빈요소 → 내용을 작성하는 태그가 아님

• 어떤 이미지를 가져오고 어떻게 띄울지를 속성으로 정함

• 속성

  • src속성에 경로를 넣어줌

  • width, height: 사이즈 정해줌

  • srcset : 작은 화면에서 접속한 사람은 작은 이미지를, 큰화면에 접속한 사람들은 큰 이미지를 제공

    • 여러개의 경로를 입력할 수 있음
    • 반응형 이미지를 만들기 위함(사용자의 viewport 기준)
    • 2개 이상의 이미지 파일을 쉼표로 구분하고 너비서술자, 픽셀미도서술자 사용

      <img
        src="images/large.png"
        srcset="image/small.png 300w,
                image/medium.png 450w,
                image/large.png 600w"
      >

    • srcset속성은 지원이 안되는 브라우저가 존재함 → 반드시 src 속성이 필요함, 그래야 srcset 속성이 지원되지 않는 브라우저에 기본값으로 이미지를 띄워줄 수 있음
    • srcset 속성의 경우 작은화면(300)에서 접속한 사용자의 브라우저에는 medium이나 large 이미지를 미리 다운 받지 않음 → 300을 넘어갈때 medium 이미지를 다운 받아서 보여줌

  • size : 특정 조건에 따라서 다른 이미지를 지정된 사이즈로 보여줌

      <img 
      src="images/large.png"
      srcset="image/small.png 300w,
              image/medium.png 450w,
              image/large.png 600w"
      size="(min-width: 600px) 600px,
            (min-width: 450px) 450px,
            300px"
      >

    • 조건에서 많이 사용하는 것 : min-width, max-width

2) iframe

• 현재 문서 안에 다른 HTML 페이지를 삽입
• 일방적으로 사용자들에게 정보를 전달

4. 폼관련 요소

• 사용자들에게 정보를 입력할 수 있는 장치를 마련해줌

1) form 태그

단독으로 사용하면 눈에 보이는 화면은 없음 → 그자체로 요소인 태그가 아님

• action 속성 : form 데이터를 모아 전송할때 전송할 주소 / 목적지의 주소
  • 사용자가 정보를 제출 → 어디로 요청을 보내야할지에 관한 정보를 가짐
• method 속성 : 양식을 제출할 때 사용할 HTTP 매서드(form 태그가 제출되었을때 어떤 방식으로 정보를 전달할지 방식을 결정
  • get
    • url로 어떤 페이지에 접속했는지 표현(경로)
    • ?를 기준으로 정보를 url에 표현
    • &를 통해 정보가 2개이상일 때 정보를 나열(사용자가 입력한 데이터를 주소창에 나열)
    • input태그의 name의 값과 사용자가 입력한 정보의 형태로 전달해줌(name=사용자가 입력한정보)
  • post
    • 사용자가 어떠한 정보를 입력했는지 url로 보여주지 않음
    • 서버에다가 action의 값인 url에 정보를 요청

2) input 태그

사용자가 정보를 입력하는 영역

• type 속성 : input의 유형을 정함

  • text, email, password, button, checkbox 등
  • type에 따라 사용할 수 있는 속성이 달라짐input type이 submit 🆚 button
    • input type이 submit인 경우 : form으로 제출 가능
    • input type이 button인 경우 : 버튼을 눌렀을때 form으로 제출 불가
      ⇒ input 태그는 type이 submit일때만 form 제출 가능
    • button type이 submit인 경우 : 제출 가능
    • button의 type이 없는 경우 : 제출 가능
      ⇒ button태그는 type에 상관 없이 form 제출 가능

  <form action="./result.html" method="get"> 
    <div>ID : <input name="id" type="text" /></div> 
    <div>PW : <input name="password" type="password" /></div> 
    <input type="submit" value="로그인"/> 
    <input type="button" value="로그인" /> 
    <button type="submit">로그인</button> 
    <button>로그인</button> 
  </form>

• name 속성 : 서버에 사용자 정보를 전송할때 전체 form 데이터를 구분하기 위함

  • 전체 form 데이터 중 해당 필드가 어떤 데이터를 가지고 있는지 구별
  • form태그를 통해 전달되는 정보를 담고 있는 역할(form 데이터 상에서 구분 가능)

• id 속성 : 하나의 form에서 중복 불가

• minlength 속성 : 글자수를 제한하여 최소글자보다 많이 입력하도록 처리

• autocomplete : 자동완성으로 값은 on 또는 off

• required 속성 : 필수 속성 지정 시 사용

• disabled 속성 : 입력 불가하도록 처리 → form 제출에 해당 input이 포함되지 않음

• readonly 속성 : 수정만 불가 → form 제출시 제출 가능(value 속성으로 값 지정도 가능)

3. label 태그

input에 labeling을 해줌

• for 속성 : 어떤 input을 가리키는지 명시

  • input 태그의 id 속성과 동일한 값 지정

    <label for="foodname">음식이름 : </label>
    <input type="text" name="food" id="foodname">

• input 태그를 label의 자식 요소로 작성하면 for 속성을 사용하지 않아도 됨

4. fieldset & legend 태그

<fieldset>
      <legend>FOOD</legend>
      <label for="foodname">음식이름 : </label>
      <input type="text" name="food" id="foodname" />
</fieldset>

• fieldset : 여러 컨트롤과 레이블을 묶을 때 사용
  • 첫번째 자식이 반드시 legend 태그여야 함
  • disabled 속성 : 사용시 모든 자손 input태그 전체가 disabled 처리됨
• legend: 부모 fieldset 콘텐츠의 설명을 나타냄

5. button 태그

자식 요소를 가질 수 있음

• type 속성 : reset, button, submitinput태그의 type속성 button 🆚 button
  • input 태그 : value 속성으로 button의 이름을 설정
  • button 태그 : 내용에 text입력으로 button 이름을 설정
  • 차이점
    • input의 value는 문자열만 가능
    • button 태그는 내부적으로 스타일링 가능 : 제출하기

6. select & option 태그

• select : 드롭다운 메뉴를 만들어주는 태그
• option : select의 후보군을 넣어주는 태그
  • value 속성 : 서버로 보내질때 사용
    • value 속성을 사용하지 않으면 내용요소를 value값으로 사용
    • value를 사용하지 않으려면 value=""처럼 빈문자열로 처리해야함
      → option 태그의 내용은 한글로 작성하고, 서버로 보낼때 영어로 보내고 싶을 때는토이스토리
    • option태그의 내용은 UI적 요소만을 담당

7. datalist 태그

드롭다운 형태로 값을 추천하고 수정할 수 있는 태그

• option 속성 사용

8. textarea태그

여러줄의 text를 입력 받음

• rows 속성 : 여러 행을 보여줄 때 사용
• cols 속성 : 가로 폭 사이즈를 조정

3. meta 데이터 요소

데이터를 설명하는 데이터(HTML문서를 설명하는 데이터)

head

• 페이지에 표시되지 않고, 문서에 대한 정보를 제공
• 메타 데이터들은 head안에 들어있음
• 검색엔진이 검색결과를 노출시키기 위해 문서의 내용을 확인하고, 그때 메타데이터를 사용해 정보를 분류

1) title

• 하나의 head에는 하나의 title만 존재
• 결과 페이지의 순서를 결정하는 구성 요소 중 하나

2**) meta**

• 빈요소이기 때문에 요소를 가질 수 없고, 속성을 사용해야 함
• 웹페이지들의 정보를 포함
• 사용자가 볼수 없음
• 부가적인 설명이 포함되어, 검색엔진이 웹페이지가 어떤 종류의 사이트인지 판단하는데 도움을 줌

3) link

• 현재문서와 외부 리소스를 연결할 때 사용(외부파일) - css연결, 아이콘
• 여러개의 파일 연결 가능 -> 여러개의 링크 태그 사용

4) MIME 타입

• 오디오, 비디오 등을 링크태그를 사용해서 불러올 때, 경로를 문자열 형탱로 입력

  • HTML은 어떤 파일인지 해석할 수 없음
  • 단순히 기재된 경로를 문서로 불러올 뿐임

• 파일이 어떤 파일인지 인지하기 위해 타입을 명시해주는 것

5) style

• HTML 내부에서 스타일 태그를 사용해 스타일 지정 가능

6) script

• 대부분 자바스크립트 코드를 연결하기 위해 사용
• 외부의 자바스크립트 파일을 연결할 때, HTML 내부에서 직접 자바스크립트를 작성할 수 있게해줌
• script태그는 head에서도 body에서도 작성 가능
  • HTML문서는 위에서부터 순서대로 문서를 읽어나감
  • 문서를 읽다가 script 태그를 만나면 안에 내용을 확인 → 내용에 자바스크립트가 있으면 잠시 멈추고 자바스크립트 코드를 해석
    • 지연발생 → body태그는 head태그보다 뒤에 작성되어 있기 때문
    • body태그의 첫번째에 script태그를 사용한 경우에도 지연 발생!
  • 자바스크립트 코드가 포함된 script 태그는 body태그의 제일 마지막에 작성하는 것을 권장

1. HTML과 웹브라우저

1) html로 작성된 파일의 확장자 : .html

• html을 작성하는 주체 : 개발자(사람)

2) 웹브라우저 : .html파일을 구동할 수 있는 프로그램

• html을 이해하는 주체 : 웹브라우저(사람이 아님)
  .html파일을 일거 사용자에게 보여주는 역할

HTML은 웹브라우저가 이해할 수 있도록 작성된 언어

2. HTML

1) HyperTextMarkupLanguage

• 프로그래밍 언어 : 데이터를 가공해 명령을 내림
• 마크업 언어 : 데이터를 그 자체로 어떤 방식으로 어디에 어떻게 표현할지 정의

ㄱ) 웹브라우저가 HTML언어를 이해해 화면에 그려냄(웹페이지를 구성)
ㄴ) 개발자가 사용자에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만든 문서

2) HTML, CSS, JavaScript

HTML : 웹문서의 기본적인 골격을 담당
CSS : 각 요소들의 레이아웃, 스타일링 담당
JavaScript : 동적인 요소 담당

3.웹표준, 웹접근성, 웹호환성

같은 html 코드라도 브라우저마다 해석하는 방법이 다를 수 있음 → 브라우저에 그려진 화면이 개발자의 의도와 달라질 수 있음

• 웹표준 : 웹표준을 준수하여 작성하면 브라우저마다 의도한대로 보여지는 웹페이지 작성이 가능
• 웹접근성 : 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식
• 웹호환성 : 웹표준 준수를 통한 브라우저 호환성 확보