본문 바로가기
728x90

HTML8

HTML 블록(block)& 인라인(inline) BLOCK level 한 줄에 하나의 요소 div, h1~h6, p, ul, li, table 등 INLINE level 한 줄에 여러개 요소 (블록 레벨의 자식 요소) span, i , img, em, strong 등 -> inline 요소는 block레벨을 감쌀 수 없지만 예외로 a태그가 있다 2021. 1. 10.
HTML) 시멘틱 웹, 시멘틱 마크업 시멘틱 의미론적인 컴퓨터(브라우저)가 잘 이해할 수 있는 코드 -> 의미에 맞는 요소를 사용 -> 문서의 구조화 -> 인간과 기계 모두 잘 이해할 수 있는 코드 외부에서 보여지는 효과는 같을 수 있지만 각 태그가 갖는 의미는 다르다 그렇기 때문에 용도에 맞게 사용해주는 것이 시멘틱한 코드를 작성했다고 할 수 있다 s와 u로 원가와 할인가를 작성하게 되면 컴퓨터는 2개의 가격이 있는 것으로 인식하지만 del과 ins로 작성하였을 경우 할인가만 가격으로 인식하게된다 -> strong, em, del, ins 등의 태그가 시멘틱 태그 html5에서 추가된 semantic 요소들 2021. 1. 10.
HTML 콘덴츠 모델 -> 콘텐츠의 표현, 동작을 설정하거나 다른 문서와의 관계 등의 정보를 포함하는 요소 -> head태그 내에 들어감 -> base, link, meta, script, style, title 등 FLOW 모델 -> 대부분의 태그가 플로우 모델에 속한다 -> 일부 메타 데이터 태그 들은 제외 SECTIONING 모델 -> 헤딩과 푸터의 범위를 결정하는 요소 -> article, aside, nav, section HEADIDING -> h1~h6까지의 제목 태그들 PHRASING -> 문서의 텍스트나 텍스트를 꾸며주는 태그, 문단 내부 레벨 -> 많은 태그들이 이쪽에도 해당된다 EMBEDDED -> 이미지 비디오 등의 콘텐츠를 표현하는 요소 -> audio, video, image 등 -> 모두 PHRAS.. 2021. 1. 10.
HTML 레이블(label)요소 label -> form 요소와 연결시켜주기 위함 -> 웹 접근성 향상에 도움이 된다 (필수적) 연결하고자 하는 form속성의 id의 값과 label의 for속성의 값이 일치해야함 label로 연결된 form속성은 label의 글씨 영역을 클릭해도 연결된 form 속성이 작동한다 -> input 타입 하나당 label 하나씩 연결해야함 2021. 1. 8.
728x90