[bootstrap] margin, padding 관련 클래스

Box model 박스모델 bootstrap의 공백의 자세한 클래스들을 알아가기 전에, 먼저 박스 모델부터 잠깐 살펴보도록 하자! 박스 모델은 HTML의 엘리먼트들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는 것을 말한다. 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다. margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음 border : 박스의 테두리 padding : 테두리와 content간의 간격 content : 엘리먼트 안에 포함되는 컨텐츠 M / P M : Margin P : Padding t , b , l , r ,x , y t : top b : bottom l : left r : right x : x축 -> left , right y : y..

2022.11.28

SEO (Search Engin Optimization)

SEO 검색엔진최적화 HTML 삽입 미리보기할 수 없는 소스

2022.05.10

HTML 웹페이지 Structure & Layout (with semantic tag)

[드림코딩 semantic tag] 공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, (과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나) 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. 그런데 div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이다. (다만, IE에서 작동하지 않아 주의 필요) tag Description header 헤더를 의미한다 nav 내비게이션을 의미한다 aside 사이드에 위치하는 공간을 의미한다 section 본문의 여러 내용(article)을 포함하는 공간을 의미한다 article 분문의 주내용이 들어가는 공간을 의미한다 fo..

2022.04.29

HTML 컨텐츠 그룹 태그 : 목록(List) / 표(Table)

1. 목록 (List) 순서가 있는 목록 태그 (Ordered List): 순서가 없는 목록 태그 (Unordered List) : 순서가 있는, 없는 목록 에서 아이템 역할의 태그: type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다. start 어트리뷰트로 리스트의 시작값을 지정할 수 있다. reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현한다. 정의 목록 태그: 정의할 용어 태그: 용어 설명 태그: 레이아웃을 나눌때 사용하는 태그: a b a b html css JavaScript HTML Hyper Text Markup Language CSS Style Sheet 블록 레벨 인라인 레벨: 부분적으로 디자인요소를 넣어주고 싶을 때 2. 테이블 표(table)를 만..

2022.04.29

HTML Hyperlink, 절대경로/상대경로 등

HyperText의 Hyper는 컴퓨터 용어로서, 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성으이 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능을 하이퍼링크(hyper link)라 한다. HTML link는 hyperlink를 의미하며 a(anchor / 닻) tag가 그 역할을 담당한다. 1. href 어트리뷰트 href 어트리뷰터는 이동하고자 하는 파일의 경로를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다. 1.1 디..

2022.04.29

HTML의 기본 태그 (DTD, html, head, body tag)

1. 문서 형식 정의 tag (Document Type Definition, DTD) 문서 형식 정의 태그는 출력할 웹페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 한다. 2. tag html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. (단, 은 예외) 3. tag head 요소는 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재한다. 메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다. head 요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다. : title 요소는 문..

2022.04.29