YoonStudyNote

문체가 다른 글자의 범위를 설정(Bring Attention) 특별한 의미를 가지지 않음. 일기 흐름에 도움을 주는 용도로 사용. 다른 태그가 적합하지 않은 경우 마지막 수단으로 사용. 기본적으로 글자가 두껍게(Bold) 표시됨. b {display : inline;} 사용자의 관심을 끌기 위해 하이라이팅할 때 사용. (Mark Text, 형광펜을 사용하여 관심있는 부분을 표시하는 것과 같은 의미) 기본적으로 형광펜을 사용한 것처럼 글자 배경이 노란색(Yellow)으로 표시됨. mark {display : inline;} 단순한 의미 강조를 표시. (Emphasis) 중첩이 가능. 중첩될수록 강조 의미가 강해짐. 정보통신보조기기 등에서 구두 강조로 발음됨. 기본적으로 이탤릭체(Italic type)로 표..

약어를 지정(Abbreviation) 보통 title 속성을 사용하여 전체 글자나 설명을 제공한다. c abbr {display : inline;} Using HTML is fun and easy! 이렇게 작성을 한다면, 마우스 커서를 HTML글자 위에 올리면 다음과 같이 설명이 나온다.

Google README.md Image download a { font-weight: bold; width: 100px; line-height: 40px; height: 40px; border: 1px solid black; border-radius: 6px; display : block; text-align: center; } a:hover{ background: orange; } a 태그를 스타일링하고 기능을 추가하였다. class와 id는 사용방식은 비슷하지만 뜻이 다르다. class는 별칭이고 별명이고 id도 마찬가지로 별칭이고 별명이다. 하지만 고유해야한다. 예를들어 밑에 코드를 보면된다. 제목1 제목2 제목3 제목1 제목2 제목3 해당 아이디로 클릭시 이동하는 방법 제목1 제목2 제목1 제목..

다른페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정한다. (Anchor, 외부로 내보내기) 속성 의미 값 기본값 특징 download 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미 Boolean href 링크 URL URL 생략 가능 hreflang 링크 ULR(페이지) 언어 ko, en ... rel 현재 문서와 링크 URL의 관계(Link Types) license, prev, next... target 링크 URL의 표시(브라우저 탭) 위치 _self, _blank _self type 링크 URL의 MIME 타입 text/html... a {display : inline;} * href, target을 가장 많이..

일반적인 인용문을 설정. (Block Quotation) 속성 의미 값 cite 인용된 정보의 URL URL blockquote {display : block;} 길이가 긴 인용문을 사용하는데 많이 쓰인다. Avian carriers can provide high delay, low throughput, and low altitude service. The connection topology is limited to a single point-to-point path for each carrier, used with standard carriers, but many carriers can be used without significant interference with each other, outside..

서식이 미리 지정된 텍스트를 설정한다. (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 :..