반응형
이 글은 w3school과 MDN의 내용을 공부하여 개인적인 해석을 한 내용입니다.틀린 부분이 있다면 댓글로 남겨주세요 😆 시맨틱 요소(Semantic Element)란?시맨틱(Semantic)이라는 단어에서 알 수 있 듯, 의미를 담고 있는 요소들을 말합니다. 이 개념은 HTML 뿐만 아니라 CSS, JavaScript에서도 적용되는 개념이며, 이번 글은 HTML 위주로 다룹니다. W3School에서 소개하는 정의는 "A semantic element clearly describes its meaning to both the browser and the developer."브라우저에서 보여지는 단계와 개발 단계에서 모두 의미를 명확히 알 수 있는 요소 쉽게 말하면, 사용자가 보는 화면과 개발..
2023.03.19 - [WEB/HTML] - HTML(2) - 요소(Element) HTML(2) - 요소(Element) 이전 글과 내용이 이어집니다! HTML(1) - 기본 구조 HTML의 개념을 잡았으니 자세히 알아보자! 개념이 궁금하시면 이전 글을 추천드립니다! HTML이란?(개념 이해) 개발자 농담 중엔 이런 글이 있다. A: l1m3kun.tistory.com 이전 글과 이어집니다! HTML을 이용하여 블로그나 Notion같은 프로그램을 쓰다보면, 부분부분 색을 바꾸거나 하이퍼 링크를 넣는 등 다양한 기능들이 포함되어있는 것을 볼 수 있다. 이런 기능들을 사용할 수 있는 것이 바로 속성이다! 속성 속성을 통해 태그의 부가적인 정보를 설정할 수 있음 요소는 속성을 가질 수 있으며, 경로나 크기..
이전 글과 내용이 이어집니다! HTML(1) - 기본 구조 HTML의 개념을 잡았으니 자세히 알아보자! 개념이 궁금하시면 이전 글을 추천드립니다! HTML이란?(개념 이해) 개발자 농담 중엔 이런 글이 있다. A: 어떤 걸로 코딩하는 걸 좋아하세요? B: 저는 HTML로 l1m3kun.tistory.com 요소(Element) 시작 태그와 종료 태그 그리고 태그 사이에 위치한 내용으로 구성 컨텐츠(내용)를 감싸는 것으로 그 정보의 성격과 의미를 정의 내용이 없는 없는 태그 닫는 태그 없이 사용 태그(요소) 용도 줄 바꿈 구분선 이미지 삽입, scr 속성을 활용하여 이미지 표현 입력창 head 태그에 나타내며 외부 리소스 연결 검색 엔진을 위한 키워드, 웹페이지 설명, 저자 정의 등 메타데이터를 정의할 때..
HTML의 개념을 잡았으니 자세히 알아보자! 개념이 궁금하시면 이전 글을 추천드립니다! HTML이란?(개념 이해) 개발자 농담 중엔 이런 글이 있다. A: 어떤 걸로 코딩하는 걸 좋아하세요? B: 저는 HTML로 코딩하는 걸 좋아합니다! A: 아.. 네.. 이 이야기가 농담인 이유는 HTML은 코딩 언어가 아니라 Markup언어이기 l1m3kun.tistory.com 기본 구조 1. html 2. head 3. body html 문서 최상위(root) 태그 "여기는 HTML이야! " 라고 말해주는 태그 head 문서 제목, 인코딩, 스타일, 외부 파일 로딩 등 메타데이터 요소를 포함하는 태그 예시 body 문서의 본문 내용(글, 그림, 입력창, 버튼 등등) 실제 화면 구성과 관련된 내용
개발자 농담 중엔 이런 글이 있다. A: 어떤 걸로 코딩하는 걸 좋아하세요? B: 저는 HTML로 코딩하는 걸 좋아합니다! A: 아.. 네.. 이 이야기가 농담인 이유는 HTML은 코딩 언어가 아니라 Markup언어이기 때문이다. 그럼 HTML이란 무엇일까? HTML - Hyper Text Markup Language의 약자 - 웹 페이지를 작성(구조화)하기 위한 언어 - `.html` 확장자 사용 Hyper Text? 참조(하이퍼 링크)를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 다시 말하면, 여러 페이지를 한 페이지 안에서 연결할 수 있는 글씨! Markup Language? 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어 ex - HTML, Markdown, ....