속성 선택자 : 특정속성, 속성값을 가지고 있는 html요소를 선택하는 방법 ex) [속성명] 선택자 [속성명="속성값"] 선택자 1. 문자열 속성 선택자 [속성명~="속성값"] : 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택 속성값에 -이 들어가 있으면 선택되지 않는다 속성값이 정확하게 일치하거나 띄어쓰기를 기준으로 속성값과 동일한 단어인 요소를 선택한다 [속성명|="속성값"] : 특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택 속성값이 정확하게 일치하거나 속성값 다음 -으로 시작하는 요소만을 선택 [속성명^="속성값"] : 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택 [속성명$="속성값"] : 특정 속성의..
선택자(selector) : 스타일을 적용할 대상을 선택하는 방법 1. 전체 셀렉터 - html 문서 내부의 모든 요소를 선택하여 스타일을 적용시킬 때 사용 2. 요소 셀렉터 - 스타일을 적용할 대상으로 html 요소명을 직접 입력 3. 아이디 셀렉터 - 특정한 아이디 이름을 가지는 요소만을 선택한다 - 2개 이상은 사용하지 않는것이 좋다 - html/css에서는 하나의 웹 페이지에 여러 요소에 같은 아이디 이름을 사용해도 별다른 문제없이 동작 하지만 Javascript로 이벤트를 제어하려고 하면 에러가 발생하기 때문에 ID는 중복을 피해서 쓰는것이 좋다 4. 클래스 셀렉터 - 특정한 집단의 여러 요소들을 한번에 선택할 때 5. 그룹 셀렉터 - id, 클래스도 그룹으로 묶을 수 있다 6. 자손 셀렉터(e..
의사 클래스 : 선택하고자 하는 html요소의 특별한 상태를 명시할 때 1. 동적 의사 클래스(a 태그 상태) - link - visited - active - focus - hover 2. 상태 의사 클래스 - checked : 체크된 상태의 input요소 선택 - enabled : 사용할 수 있는 input요소 - disabled : 사용할 수 없는 input요소 3. 구조 의사 클래스 - first-child : 모든 자식요소 중 맨 앞에 위치하는 자식요소를 모두 선택 - last-child : 모든 자식요소 중 맨 마지막에 위치하는 자식요소를 모두 선택 - ★nth-child : 모든 자식요소 중 n번째에 위치하는 자식요소를 모두 선택 - first-of-type : 모든 자식요소 중 맨 처음으로..
position : html 요소가 위치를 결정하는 방식을 설정 1. 정적 위치 지정 방식(static) - 모든 html 요소의 기본적 위치 지정 방식 2. 상대 위치 지정 방식(relative) - 기본 위치(정적위치)를 기준으로 좌표를 사용해 위치를 이동시키는 속성 3. 고정 위치 지정 방식(fixed) - 화면을 기준으로 위치를 지정하는 방식 (웹 페이지가 스크롤되어도 고정된 위치에 요소를 둔다) 4. 절대 위치 지정 방식(absolute) - 상위 요소를 기준으로 좌표를 사용하여 위치를 이동시키는 속성 단 상위요소가 존재하지 않는다면 body를 기준으로 위치를 설정(relative와 비슷하게 움직인다) - 만약 부모요소가 static이라면 body를 기준으로 위치를 조정한다 - 안정적으로 사용하..
float - 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어주는 속성 - 과거에는 레이아웃 작성 시 가장 많이 쓰임 - 최근에는 플렉서블박스, grid의 등장으로 float의 본 의미에 맞게 자주 사용된다
css속성에서 자주 사용되는 단위 % : 기본크기 100%를 기준으로 두고 그에대한 상대적 크기를 지정 px : 스크린의 픽셀을 기준으로 하는 절대적 크기 지정 em : 기본크기를 1em으로 두고 그에대한 상대적인 크기를 지정 rem : 기본크기를 1rem으로 두고 그에대한 상대적 크기를 지정 ※ em vs rem em (상위요소의 영향을 받기 때문에 개발자의 의도와 다른 사이즈로 출력되는 경우가 있음) rem (body/html의 기본 사이즈를 기준으로 크기를 부여)
박스모델 - html의 요소들은 box 형태의 영역을 가지고있는데 이것을 박스모델이라고한다. - 이 box는 *컨텐츠 패딩 테두리 마진* 으로 구성된다. - 브라우저는 박스모델의 크기와 프로퍼티의 위치를 근거로하여 view(렌더링)를 실행한다. ※ content : 요소의 텍스트(실질적 내용/이미지)가 위치하는 영역 padding : 테두리 안쪽에 위치하는 영역 border : 요소의 기준선 margin : 테두리 바깥족에 위치하는 외부영역 ※ 마진 패딩 사용 시 주의사항 - 마진과 패딩은 전체 높이와 너비 계산에 일반적으로는 포함된다 - 설정에 따라 마진 패딩크기를 포함하지 않도록 바꿀 수 있음 ※ box-sizing: border-box; - 마진과 패딩의 전체 넓이와 높이 계산의 기준을 바꾸는 속성..