1. UI 요소 상태에 따른 가상 클래스 웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 UI 요소 상태에 따른 가상 클래스를 사용합니다. :enabled 와 :disabled 가상 클래스 선택자 해당 요소가 사용 가능한 상태일 때의 스타일을 지정하려면 :enabled 클래스를 사용하고 해당 요소가 사용 불가능한 상태일 때의 스타일을 지정하려면 :disabled 클래스를 사용합니다. 예를 들어 여러 줄의 텍스트를 입력할 수 있는 텍스트 영역 필드를 게시판 입력 화면으로 사용할 때는 enabled 상태이지만 회원 약관 등을 보여 줄 때는 사용자가 내용을 보기만 해야 하므로 disabled 상태로 만들어야 합니다. :checked 가상 클래스 선택자 라디오 박스나 체크 박스..
구조 가상 클래스 구조 가상 클래스란 말 그대로 웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자입니다. 1. :root 가상 클래스 선택자 문서 안의 루트(root)요소에 스타일을 적용합니다. HTML 문서에서는 루트(최상위) 요소가 HTML이므로 HTML 요소에 스타일이 적용됩니다. 전체적으로 문서 안에 똑같이 적용할 스타일이 있을 경우 :root 선택자를 이용해 지정합니다. 2. :nth-child(n)와 :nth-last-child(n) 가상 클래스 선택자 웹 문서에서 특정 부분에 스타일을 적용하려면 class 나 id 선택자를 이용해 이름을 붙여주고 스타일을 정의하면 되지만 여러 개의 항목이 일렬로 나열되어 있는 경우 스티일을 지정할 항목이 ..
사용자 동작에 반응하는 가상 클래스 사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용합니다. 메뉴에서 몇 번째 항목이라든가 단락의 첫 번째 글자 등을 선택하고 싶은 경우 클래스 이름 앞에 콜론(:)을 붙여 ㅍ표시하는 가상 클래스와 클래스 이름 앞에 콜론 두개(::)를 붙여 표시하는 가상 요소를 사용합니다. :link 가상 클래스 선택자 - 방문하지 않은 링크에 스타일 적용 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용합니다. 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시되는데 링크의 밑줄을 없애거나 색상을 바꾸려고 할 때 :link 선택자를 사용합니다. :visited 가상 클래스 ..
표 스타일 CSS - vertical-align vertical-align 속성은 수직 정렬 방법을 지정하는 속성이기 때문에 inline이나 inline-block으로 배치한 요소의 세로 정렬 방법으로 지정합니다. 기본형 : vertical-align : baseline / top / bottom / middle / sub / super / text-top / text-bottom / / 속성 값 설명 baseline 인라인 요소의 기준선을 부모 요소의 기준선(baseline)에 맞춥니다. sub 인라인 요소의 기준선을 부모 요소의 아래 첨자 위치에 맞춥니다. super 인라인 요소의 기준선을 부모 요소의 위 첨자 위치에 맞춥니다. top 인라인 요소의 윗부분을 부모 요..
표 스타일 CSS - table-layout table-layout 속성을 이용하면 셀 안의 내용 양에 따라 셀 안의 내용 양에 따라 셀 너비를 변하게 할지, 고정시킬지를 결정할 수 있습니다. 기본형 : table-layout : fixed / auto table-layout : fixed로 설정해 너비를 고정하면 셀 너비보다 긴 내용은 셀 밖으로 밀려나가 버립니다. 각 셀의 너비를 고정 상태에서 셀 너비 안에 셀 내용을 표시하려면 word-break : break-all 속성을 추가해야 합니다. 또한 예상하지 못했던 셀의 줄 바꿈이 생기면 높이 값(height)도 예측하기 쉽지 않기 때문에 셀의 height 속성도 auto로 지정해야 합니다. 속성 값 설명 fixed 셀 너비를 고정합니다. 즉, 셀 내..
표 스타일 CSS - empty-cells border-collapse : separate를 사용해 셀들을 분리했을 경우, empty-cells 속성을 사용해 내용이 없는 빈 셀들의 표시 여부를 지정합니다. 기본형 : empty-cells : show / hide 속성 값 설명 show 빈 셀 주위에 테두리를 그려 빈셀을 표시합니다. (기본 값) hide 빈 셀에 테두리를 그리지 않고 비워 둡니다. 표 스타일 CSS - width, height 표와 셀의 형태를 꾸리기 위해 CSS의 width와 height를 사용합니다. 표와 셀의 너비와 높이를 특별히 지정하지 않는다면 셀 안의 내용이 표시될 만큼만 표시됩니다. 이때 사용할 수 있는 값은 실제 크기를 나타내는 px나 부모 요소를 기준으로 한 %입니다. ..
표 스타일 CSS - border-collapse 태그와 태그에서 border 속성을 사용하면 두줄로 표시되는데 이때 border-collapse 속성을 이용하면 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘 것인지, 두 테두리를 하나로 합칠 것인지 결정할 수 있습니다. 기본형 : border-collapse : collapse / separate 표의 바깥 테두리와 안쪽 테두리에 서로 다른 테두리 스타일을 사용할 수 있는데 여기에 border-collapse 속성을 사용하면 두 가지 스타일을 하나로 합칠 수 있습니다. 속성 값 설명 collapse 테두리를 하나로 합쳐 표시합니다. separate 테두리를 따로 표시합니다. (기본 값) 표 스타일 CSS ..
표 스타일 관련 CSS - caption-side / border caption 태그를 이용해 표 제목을 캡션으로 표시합니다. 기본적으로 캡션은 표의 위쪽에 표시되지만 caption-side 속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있습니다. 속성 값 설명 top 캡션을 표의 윗부분에 표시합니다. (기본 값) bottom 캡션을 표의 아래부분에 표시합니다. 표 스타일 CSS - border 표를 삽입할 때 태그의 border 속성을 이용해 테두리의 색상이나 형태, 너비 등을 지정할 수 있습니다. 태그에서 border 속성을 이용해 >처럼 테두리를 표시했을 경우, 표의 바깥 테두리와 셀의 테두리를 따로 지정해야 합니다.
포지셔닝 관련 CSS - visibility / z-index visibility 속성은 특정 요소를 화면에 보이게 하거나 보이지 않게 또는 겹치게 설정하는 속성입니다. 기본형 : visibility : visible / hidden / collapse 속성 값 설명 visible 화면에 요소를 표시합니다. (기본 값) hidden 화면에서 요소를 감춥니다. 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 미칩니다. collapse 표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절합니다. 그 외의 영역에서 사용하면 'hidden'처럼 처리합니다. 포지셔닝 관련 CSS - z-index z-index 속성은 요소 위에 요소를 쌓을 때 쌓는 순서를 지정하기 위해 사용합니다. 기본형 ..