Frontend/HTML
-
HTML(3) 콘텐츠모델, 시멘틱마크업,블록인라인Frontend/HTML 2023. 7. 11. 23:43
1. 콘텐츠모델 Metadata: style, script, 다른 문서와의 관계 및 정보. 대부분 내에 들어간다는 것이 특징 Flow: html 요소 대부분이 Flow에 포함 Sectioning: 문서의 구조와 관련된 요소들이 포함. 아웃라인이 있음 Heading: 제목, header Phrasing: 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소 Embedded: 외부 콘텐츠 Interactive: 사용자와 상호작용 2. 시멘틱 마크업 시멘틱: 기계(브라우저)가 잘 이해할 수 있도록 하는 것 3. 블록&인라인 블록 레벨 요소: 부모 영역의 가로를 꽉 채워 표현하는 요소. 앞 뒤로 자동 줄바꿈 ex) , , 등 인라인 레벨 요소: 내용만큼의 박스로 표현. 줄바꿈 효과 없음. 블록 ..
-
HTML(2) TagFrontend/HTML 2023. 6. 1. 22:51
1)HTML Tag 소개 신뢰도 높은 사이트 3개 https://developer.mozilla.org/en-US/docs/Web/HTML/Element http://html5doctor.com/element-index/ https://www.w3schools.com/tags/default.asp 2)제목과 단락요소 h1 ~ h6 : Heading Tag. 제목 Tag. 문서 내 제목을 표현, 숫자가 클수록 작은 크기. 일반 텍스트보다 크고 굵게 표시되어 강조 효과를 볼 수 있다. : Paragraph Tag. 단락 Tag. p Tag 단락을 표현. p Tag로 묶인 각 단락은 자동 개행되어 표시된다. : Linebreak. 개행을 표현할 때 사용하는 빈 Tag. 특히 p Tag 내부에서 개행이 필요할 ..
-
HTML(1) HTML 이해하기Frontend/HTML 2023. 5. 29. 11:42
1) HTML 소개 https://www.boostcourse.org/cs120/lecture/92869/?isDesc=false Hyper Text Markup Language 웹 페이지를 만드는 언어 Hyper Test = Link Markup Language : 정보를 **구조적(계층적)**으로 표현 가능하다는 특징이 있는 프로그래밍 언어들. 확장자 : html 초기 개발 목적 : 팀원들 간 문서를 빠르게 공유하기 위해 2) 태그 (Tag) https://www.boostcourse.org/cs120/lecture/253418?isDesc=false 사전적 의미 : 무언가를 인식하기 위해 달아놓는 꼬리표, 이름표 실질적 의미 : 브라우저가 내용을 이해하기 쉽도록 달아놓은 꼬리표 역할. Hello, ..