본문 바로가기

HTML37

HTML의 기본 구조를 알아봅시다 HTML 언어의 기본 구조 HTML은 element(요소), content(내용), tag(태그) 세가지로 구성됩니다. 이 중 태그는 opening tag(여는 태그), closing tag(닫는 태그)로 구분되구요. Hello World element : Hello World 전체를 말합니다 content : Hello World를 지칭합니다 opening tag : 를 말합니다 closing tag: 를 말합니다. 태그는 항상 꺽쇠 로 쓰고, 닫는 태그는 꺽쇠 앞에 / (슬래시)를 넣습니다. HTML의 계층 구조 HTML 언어는 계층 구조를 지닙니다. 계층구조는 쉽게 말해 줄기에서 가지가 나오는 걸 말하는데요. 아래 코드를 보면서 설명해볼께요. 제목입니다 컨텐츠입니다y 위의 코드는 아래에 가 있.. 2023. 6. 29.
HTML article 태그, 웹 페이지 구성과 시멘틱 마크업 용도 ARTICLE 태그란? 웹페이지를 만드는 건 결국 다른 사람에게 정보를 공유하기 위함이고, 이를 위해 검색엔진이 좋아하는 구조로 구성해야 합니다. article은 section, fieldset 등과 같이 컨텐츠의 구획을 정하는 태그입니다. 사용법 article은 열고 닫는 태그입니다. article은 기본적은 class, id 외에는 별다른 속성은 없습니다. 과 의 차이 언제 section 태그를 쓰고 언제 article 태그를 쓰는지 궁금하더라구요. 그래서 검색을 해보았습니다. article은 블로그, 글, 뉴스, 기사 등 게시물과 관련된 컨텐츠 블록을 감쌀 때 쓰고 section은 긴 문서를 영역별로 나눌 때 사용하는 태그입니다. 웹페이지에 단락이 세 개 있으면 section을 세 번 써서 나누는 .. 2023. 6. 21.
HTML meta viewport 반응형 웹페이지를 위한 필수 속성 지난번에 meta 태그에 대해 포스트를 작성한 적이 있었는데요. 공부를 하다보니 name="viewport'가 계속 나옵니다. 지난번 학습하면서는 몰랐던 내용이라 추가로 배운 내용을 정리해보려구요. meta name="viewport"란? 반응형 웹 디자인에서 사용되는 속성입니다. 유저들의 브라우저 창 크기가 다르고, 모바일 기기에서도 접속할 수 있기 때문에 다양한 화면 크기에 맞게 웹페이지를 조정하기 위한 목적입니다. 예시 가장 많이 쓰는 문장인 것 같아요. freecodecamp 연습할 때 항상 넣었던 것 같습니다. name 속성에 viewport를 입력합니다 content 속성에 세부사항을 넣는데요 width=device-width : 유저가 보는 창의 화면 너비에 맞게 웹 페이지를 조정하라는 뜻입.. 2023. 6. 20.
웹 폼의 구조화와 접근성을 높이는 HTML legend 태그 LEGEND 태그란? 태그는 HTML 폼 그룹의 제목을 정의하는 태그입니다. 이렇게 얘기하면 어떤 의미인지 감이 잘 안오는데요. 예시 화면을 보면 바로 이해하실 수 있을 겁니다. 사용법 개인정보 .... ... 배송정보 .... ... 태그는 열고 닫아야 하는 태그입니다 class나 id 외에 별다른 속성은 없습니다 폼 내에서 제목이 필요한 곳에 사용합니다 위치는 과 다음입니다 예시 See the Pen legend by 40's Programmer (@40sProgrammer) on CodePen. legend의 역할이 바로 보입니다. 여러개의 폼들을 묶어서 제목을 보여주네요. 2023. 6. 11.

티스토리툴바