YoonStudyNote

서식이 미리 지정된 텍스트를 설정한다. (Preformatted Text) 텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있다. 기본적으로 Monospace 글꼴 계열로 표시된다. pre {display : block;} 만약에 pre태그를 사용하지 않는다면, 다음과 같이 출력이 된다. 동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려 강산 대한 사람, 대한으로 길이 보전하세. 출력된 값에서 볼 수 있듯이, 동해물과 사이에 띄어쓰기 10칸도 적용이 하나도 되어있지 않고, 닳도로고가 만세 등드에서 앤터한 부분도 적용이 하나도 안된것을 볼 수 있다. 하지만 pre태그를 사용한다면, 동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려 강산..

하나의 문단을 설정. (Paragraph) 일반적으로 정보통신보조기기 등은 다음 문단(p)으로 넘어갈 수 있는 단축키를 제공한다. p {display : block;} 문단의 분리(주제에 의한)를 위해 설정. (Horizontal Rule) 대부분의 경우 수평선(border)으로 표시(표현적 관점)되나 의미적 관점으로만 사용해야 한다. hr {display : block;} 동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려 강산 대한 사람, 대한으로 길이 보전하세. 남산 위에 저 소나무, 철갑을 두른 듯 바람 서리 불변함은 우리 기상일세. 무궁화 삼천리 화려 강산 대한 사람, 대한으로 길이 보전하세. 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일..

용어(dt)와 정의(dd) 쌍들의 영역(dl)을 설정. Description List, Definition Details, Definition Term dl은 dd, dt만을 포함해야 함. key/value 형태를 표시할 때 유용. coffee Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffee species. Milk Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals. dl, dt, dd {display : block;} 하지만 이것을 묶어서 스타일링 하기도 어렵고(div로..

각 항목(li)의 정렬된 목록(ol)이나 정렬되지 않는 목록(ul)을 설정. ol과 ul은 자식으로 li만 포함 가능 li는 단독으로 사용할 수 없으며, ol이나 ul에 자식으로 파함되어야 함. 정렬된 목록 ol의 항목 순서는 중요도를 의미할 수 있다. ol, ul {display : block;} li {display : list-item;} 1. li 목록 안에 또다시 ul 태그를 넣어서 목록을 추가 할 수 있다. apple apple banana orange banana orange 그럼 다음과 같이 소제목으로 나온다. 또한 ol도 가능하다. 2. type으로 정렬 방식을 정할 수 있다. apple apple banana orange banana orange 속성 의미 값 start 항목에 매겨지는..

html에서 구조를 잡은 후에 css에서 html과 같은 구조로 틀을 만든후에, 사용하지 않는 css 태그를 하나씩 지우면 된다. 그것이 나중에 정리할 때 편하다. ctrl + shift + p 를 누르면 emmt abbreviation이 나오는데 거기에 원하는 태그이름을 넣으면 wrapping이 된다. 메뉴1 메뉴2 메뉴3 Section Article1 Contents... Article2 Contents... Article3 Contents... Aside asldkfjsladkf@gmail.com 010-1234-5678 header{ background : tomato; margin : 10px; padding : 20px; } header nav{ } header nav ul{ display :..

본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정. (Division, 꾸미는 목적으로 사용) 블록요소이다. CSS나 JAVASCRIPT를 삽입해서 DIV가 존재하는 특정한 영역을 찾고 그 찾은 영역에 CSS를 통해 스타일링하거나 JAVASCRIPT를 통해서 제어를 할 수 있다. 그러한 영역을 설정할때 DIV를 많이 사용한다.

, , 등에서 연락처 정보를 제공하기 위해 포함하여 사용. 블록요소로 설정되어 있다. jim@rock.com (311) 555-2368 다음과 같이 anker태그를 사용하며, address태그는 1개 이상의 연락처를 기입해야한다.

다른 페이지 링크를 제공하는 영역을 설정. (Navigation, 보통 메뉴(Home, About, Contact), 목차, 색인 등을 설정) nav의 소스코드는 이러하다. 이것을 사용하는 방법은 헤더의 메뉴바 부분에서 링크 연결해주는 역할을 할때 주로 사용이 된다. 많은 경우 nav안에는 ol 태그와 ul 태그를 사용한다. Shots Designers Teams Community Jobs Hiring

문서의 별도 콘텐츠를 설정. (보통 광고나 기타 링크 등의 사이드바(Side bar)를 설정) 블럭 요소이다. ASIDE의 영역은 다음과 같다. 전체적인 컨텐츠와는 구분되어져 있으며, 보통 오른쪽에 위치하고 특별한 경우는 왼쪽에 위치할 수 있다. cf. section과 article의 구역은 뒤바뀔 수 있다.

문서의 일반적인 영역을 설정 일반적으로 h1~h6를 포함하여 식별 How to Fish Introduction People have been catching fish for food since before recorded history… Equipment The first thing you’ll need is a fishing rod or pole that you find comfortable and is strong enough for the kind of fish you’re expecting to land… section은 문서의 구역을 설정하는것인데, 그 영역의 제목으로 h1~h6를 사용해서 구분한다. div section 영역구분 영역구분 의미 X 의미 O (제목을 포함)