frontend/html 15

HTML.05.Semantic(시맨틱)

시맨틱 (Semantic) 태그semantic은 의미의,의미론적인 이란 뜻을 가진 단어이다태그의 이름을 만들때, 막 만드는것이 아니라,태그 이름을 보고 어떤 역할을 하는지(어떤 의미인지) 알 수 있는 태그를 사용ex) header, nav, main, scetion, footer 등등 시멘틱 태그의 필요성HTML의 소스 코드만 보고도 어느 부분이 어떤 내용이고 어디에 표시되는지 쉽게 알 수 있음문서 구조가 정확히 나눠지므로 다른 매체의 화면에 맞춰서 수정하기 편리함 웹 문서 구조의 주요 시맨틱 태그 header>>헤더 영역. 주로 맨 위나 왼쪽에 위치. 검색창이나 사이트 메뉴를 삽입 nav>>네비게이션 영역. 웹 문서 에서 다른 위치로 연결하는 링크를 포함 main>>메인 콘텐츠 영역.웹 문서의 가장 핵..

frontend/html 2025.03.12

HTML.04.속성

HTML 속성 (Attributes) 모든 HTML요소는 속성을 가질 수 있다>> 속성은 요소에 대한 추가 정보를 제공 속성은 항상 시작 태그에 지정속성은 일반적으로 name = "value"와 같이 이름/값의 쌍으로 지정속성은 이름 다음에 등호를 넣고, 등호 다음에 속성값을 넣음이때, 속성값은 따옴표로 감싸야 한다ex) class = "text01" 코드 작성시 권장사항요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백을 첨부하나 이상의 속성들이 있는 경우 속성과 속성 사이에 공백을 첨부속성명은 소문자 권장속성값에는 따옴표 사용 권장일반적으로 작은따옴표보다 큰따옴표를 주로 사용하지만속성 값 자체에 작은따옴표(큰따옴표)가 있는 경우 큰따옴표(작은따옴표)를 반드시 사용해야 한다 HTML 속성..

frontend/html 2025.03.12

HTML.03. Block요소와 Inline요소

블록레벨요소(Block-level elements)란?웹페이지 상에 블록(Block)을 만드는 요소:앞뒤 요소 사이에 새로운 줄(line) 생성 블록 레벨 요소는 항상 새 행에서 시작하고, 사용 가능한 전체 폭을 차지함블록 레벨 요소는 인라인 요소에 중첩될 수 없음 일반적인 블록 요소 와: HTML 문서의 문단을 정의: HTML 문서에서 분할 또는 섹션을 정의기타 블록 요소들              -               인라인 레벨 요소(Inline-level elements)항상 블록 레벨 요소 안에 포함되는 요소: 인라인 요소는 새로운 줄을 생성하지 않음 인라인 요소는 새 행에서 시작되지 않음인라인 요소는 필요한 만큼만 너비를 차지인라인 요소는 블록 수준 요소를 포함할 수 없음기타 인라인 요소들

frontend/html 2025.03.12

HTML. 02. Element

Element(요소) 란?HTML문서나 웹 페이지를 이루는 개별적인 요소를 의미하며, 문서 객체 모덱(DOM)으로 파싱 요소는 여는 태그, 닫는 태그, 내용을 통틀어 요소이다 여는 태그 (Opening tag) : 요소의 이름과 열고 닫는 꺽쇠 괄호로 구성>> 요소가 시작되고 효과가 적용되기 시작 닫는 태그 (Closing tag) : 요소의 이름 앞에 '/'가 있는 여는 태그형태>>요소의 끝, 효과가 끝남 내용(Content): 여는 태그와 닫는 태그 사이에 있는 내용 일부 HTML요소에는 내용(Content)가 없음>>이러한 요소를 빈 요소라고 한다. 빈 요소에는 끝 태그가 없음>>>>이런 경우에도 닫히는 꺽쇠'>' 앞에 슬래시 '/' 를 넣어 끝 태그를 작성하는 것이 권장된다 HTML 요소의 중첩요..

frontend/html 2025.03.07

HTML. 01. HTML...?

HTML이란?HyperText Markup Language: 웹 페이지를 만들기 위한 표준 마크업 언어(프로그래밍 언어가 아님)HyperText: 문서를 서로 '연결'해주는 링크Markup: 문서나 데이터의 텍스트 내에 특정 태그나 코드를 삽입해 그 형식, 구조, 스타일을 웹 브라우저에 지정하는 방식태그: 웹 브라우저가 각 부분을 구별하기 위한 인식표웹 문서의 확장자: .html HTML문서 기본 구조 HTML 문서의 제목 태그 HTML CSS JavaScript">HTML 문서의 제목 태그HTMLCSSJavaScripthtml요소웹 문서의 시작과 끝을 나타내는 태그태그를 만나면 까지의 소스를 읽어 화면에 표시 lang 속성: 문자에서 사용할 언어를 지정>>언어별로 다른 페이지 호출이 가능 head ..

frontend/html 2025.03.07