[HTML] position 예제

개념 - position은 레이아웃을 배치하거나, 객체를 위치시킬 때 사용하는 CSS속성이다. - 상속되지 않으며 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right)의 위치를 같이 설정할 수 있다. * static (기본값) - 위치를 지정하지 않을 때 사용 * ralative - 위치를 계산할 때 static의 원래 위치부터 계산한다. * absolute - 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정된다. * fixed - 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다. 예제 1 ..

[HTML] font 예제

예제 1 Lorem ipsum dolor amet 2013.12.09 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada felis id massa adipiscing eget pellentesque ipsum lacinia. In orci massa, venenatis quis ultrices ac, accumsan vitae nunc. Sed eget pellentesque enim. Maecenas eros risus, hendrerit eget lacinia nec, mollis nec velit. Mauris sem mi, molestie sed bibendum eu, blandit et ante. Pellentesq..

[HTML] 예제

Responsive Web Design Demo Resize this responsive page! London London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Paris Paris is the capital of France. The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants. Tokyo Tokyo is the capital of Japan. It is the c..

[HTML] 태그 선택자 모음

HTML 태그 모음 글자 크기 태그 첫 번째로 큰 제목 글자 태그 두 번째로 큰 제목 글자 태그 세 번째로 큰 제목 글자 태그 네 번째로 큰 제목 글자 태그 다섯 번째로 큰 제목 글자 태그 여섯 번째로 큰 제목 글자 태그 본문 글자 단락 태그 paragraph(단락) 태그의 줄임말. p태그를 사용하면 하나의 단락을 만들 수 있다. 개행 태그 & 수평 줄 태그 - 개행 태그 - 수평 줄 태그 웹 페이지 이동 앵커 태그 - 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그 빈 링크 태그는 본래 가지고 있는 하이퍼링크 기능을 제거하고 사용하는 경우도 있다. 하지만 기능을 제거해도 웹 표준을 따르려면 a 태그에 href 속성을 반드시 입력해줘야 한다. 웹 표준을 ..

[HTML] HTML 요소의 크기 (height & width)

CSS를 이용하면 HTML 요소의 크기를 마음대로 설정할 수 있다. height & width 속성 - height와 width 속성은 HTML 요소의 높이와 너비를 각각 설정한다. - 기본 값은 auto, 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이와 너비를 설정해준다. max - width 속성 - HTML 요소가 가질 수 있는 최대 너비를 설정한다. - 기본 값은 none이며, 너비에 제한을 두지 않겠다는 의미이다. - 설정된 너비 이하로 줄어들게 되면 웹 브라우저의 크기에 맞춰 HTML 요소의 너비도 자동으로 줄어든다. min - width 속성 - HTML 요소가 가질 수 있는 최소 너비를 설정한다. - 기본 값은 0이며, 너비에 제한을 두지 않겠다는 의미이다. - 설정된 너비 이하로 ..

[HTML] em과 rem

em 타이포그래피의 단위로서 'font-size'와 동일하다. 선택자의 font-size가 20px이라면 1em은 20px이 된다. html의 font-size가 16px로 설정되어 있기 때문에 별다른 설정이 없을 경우 이를 상속받는 h1이 있다고 가정할 때, h1의 font-size가 2em이라면 이는 32px로 계산된다. html { font-size: 100%;} h1 { font-size: 2em; } em은 font-size 외에 다른 프로퍼티들을 위한 값으로 사용할 수도 있다. margin과 padding이 보통 em 단위로 사이징하는 대표적인 프로터피들이다. h1 { font-size: 2em; margin-bottom: 1em; } p { font-size: 1em; margin-botto..

[HTML] float 속성 & clear 속성 & overflow 속성

float 속성 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어준다. 레이아웃 작성 시 자주 사용된다. clear 속성 float 속성이 적용된 이후 나타나는 요소들의 동작 조절. 컨테이너 요소에 float 속성이 적요되면 그 이후 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들다. 따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 float 속성에 영향을 받지 않도록 설정해줘야 한다. overflow 속성 float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다. 이 때 overflow 속성값을 auto로 설정하면, 컨테이너 요..

[HTML] 부정 선택자

개념 :not 선택자를 반대로 적용 예제 1

[HTML] 링크 선택자

개념 :link href 속성을 가지고 있는 a 태그 선택 :visited 방문했던 링크를 가지고 있는 a 태그 선택 예제 1 Nothing Hanbit Media W3C Github

[HTML]문자 선택자

개념 문자 가상 선택자 - 태그 내 특정한 조건의 문자를 선택하는 선택자(Pseudo-Element Selector) - :: 기호를 사용하는 것이 표준이지만 : 기호를 사용해도 정상 작동 ::first-letter 첫 번째 글자 선택 ::first-line 첫 번째 줄 선택 ::after 태그 뒤 위치하는 공간 선택 ::before 태그 앞 위치하는 공간 선택 ::selection 사용자가 드래그한 글자 선택 예제 1 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac erat et massa vehicula laoreet consequat et sem. 예제 2 Lorem ipsum d..