[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..

[HTML] 동위 선택자

개념 - 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자 - 태그를 기준으로 할 때 모든 태그는 동일한 위치에 있는 동위 상태임 - 선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택 - 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택 예제 1 Header - 1 Header - 2 Header - 2 Header - 2 Header - 2 예제 2 Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[HTML] 문자열 속성 선택자

개념 1. 기본 속성 선택자 - [속성이름] 선택자 - [속성이름="속성값"]선택자 2. [속성이름] 선택자 - [속성이름] 선택자는 특정 속성을 가지고 있는 요소를 모두 선택한다. 3.[속성이름="속성값"]선택자 - [속성이름="속성값"] 선택자는 특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택한다. 4. 문자열 속성 선택자 (1) [속성이름~="속성값"] 선택자 - 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택 (2) [속성이름|="속성값"] 선택자 - 특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택 (3) [속성이름^="속성값"] 선택자 - 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 ..