기초부터 시작하는 코딩/HTML 11

사이트를 만들어 봅시다. - CardType(01)

- 사이트는 여러장의 페이지들이 합쳐져서 만들어집니다. - 사이트를 구성하는 페이지들은 여러가지 타입이 있는데 대표적으로 imageType, cardType, textType, bannerType,footerType등이 있습니다. - 오늘은 그 중에서 cardType을 한번 만들어 보겠습니다. cardType 페이지란 - 보통 3-4개의 카드들로 구성된 페이지를 말합니다. - 위의 모양처럼 생긴 페이지가 cardType의 대표적인 예 입니다. HTML 삽입 미리보기할 수 없는 소스 - 위의 페이지를 만들어 보겠습니다. 식물을 키울 때 주의해야 할 것들 식물을 키우는 방법에 대해서는 다양한 팁과 지침이 있지만 기본적인 것들에 대해서 이야기를 나누어 보려고 합니다. 다음에 설명할 내용과 같은 기본적인 방법들..

04. 섹션과 관련된 태그들

섹션이란 - , , 등과 같이 구조를 잡는데 보편적으로 많이 쓰이는 시멘트 태그들을 말합니다. 1. - html5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택 등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역입니다. 2. - 문서의 본문 영역을 표시합니다. - 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어집니다. - 또한 body요소는 브라우저가 렌더링해야 할 범위를 알려줍니다. 3. - HTML5에 새롭게 추가된 요소로서, 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역입니다. 4. - 해당 문서의 요소의 주 콘텐츠(main content)를 정..

03. 텍스트와 관련된 태그들

텍스트 관련 요소 01. 블록형태로 처리하는 태그 요소 유형 태그 명 태그의 의미 블록 레벨 요소 제목 표시하기 // h1~h6까지 사용가능하며 h1이 가장 크게 표시되고, h6이 가장 작게 표시된다. 단락 만들기 줄 바꾸기 수평선 긋기 02. 인라인형태로 처리하는 태그 요소 유형 태그 명 태그의 의미 인라인 요소 강조할 텍스트 기울임체로 표시하기 강조할 텍스트 굵게 표시하기 형광펜 효과 내기 텍스트 굵게 표시하기 텍스트 작게 표시하기 아래첨자 표시하기 위 첨자 표시하기 밑줄 취소선 오늘은 텍스트와 관련된 태그들을 모아봤습니다!! 텍스트와 관련된 태그들이 참 많은데 적재적소에 잘 사용하면 더욱 보기 좋은 페이지를 만들 수 있지 않을까 하네요. 제가 텍스트와 관련된 모든 태그들을 아는 것은 아니라서 여러분..

02. 시멘틱 마크업과 논리적인 순서 마크업

마크업(Mark up)이란? - 마크업(mark up)은 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. - 주요 마크업 언어에는 HTML,Markdown등이 있다. - 간단하게 말해 문서의 골격에 해당하는 부분을 작성하는데 사용된다. 시멘틱 마크업(Semantic markup) 시멘틱(Semantic)의 사전적인 뜻은 "의미론적인" 정도로 해석할 수 있다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 되는데 시멘틱 하게 마크업을 하는 것이 중요한 이유는 HTML 문서는 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만 , 모든 사람이 정보를 동일하게 받아들일 수 있는 환경이 아닐 수도 있기 때문이다. 사용자가 보편적인 방법으로 정보전달을 받지 못하는 상황에서 시멘틱한..

01. 인라인(Inline)구조와 블록 레벨(Block-level)구조

이미지 출처 블록 레벨 요소(Block-level Elements) - 마크업을 할 때 줄이 바뀌는 특성을 가지고 있다. - 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있다. - 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함할 수 있는 요소와 없는 요소가 있다. - 블록 레벨 요소는 하나의 박스라고 생각하면 된다. - 하나의 박스(영역)이기 때문에 margin 값과 padding 값을 적용할 수 있다. ex). , , 같은 요소들은 대표적인 블록 레벨 요소로 화면상 줄 바꿈 현상이 일어난다. 블록 레벨 요소 블록 레벨 요소 성질 줄 바꿈이 생깁니다. 인라인 요소(Inline Elements) - 마크업을 할 때 가로로 정렬이 된다. 즉 줄이 바뀌는 특성이 없고 한..