연결 선택자둘 이상의 선택자를 연결하여, 스타일이 적용될 요소가 어디 부분인지 지정조합 선택자, 콤비네이션 선택자, 콤비네이션 셀렉터 등으로 불림1. 하위 요소에 스타일 적용하는 하위 선택자 / 자식 선택자하위 요소란, 특정 요소를 기준으로 그 안에 포함된 요소자식 요소란, 현재 요소를 기준으로 바로 한 단계 아래에있는 요소를 뜻함상위 요소와 하위 요소는 공백으로 구분한다.(상위 요소) (하위 요소) { ... }//예시 selection p { ... }자식요소는 '>' 기호를 사용하여 구분한다.해당 기호는 자식 요소에만 스타일을 적용한다부모요소 > 자식요소//예시 selection > div {...}2. 형제 요소에 스타일을 적용하는 인접 형제 선택자 / 형제 선택자부모 요소가 같은 경우, 형제관계..

배경색과 배경 범위 지정전체 배경 뿐 아니라 텍스트나 목록 등 특정한 요소에도 배경을 지정할 수 있다.1. 배경색 지정하는 background-color배경을 넣고싶은 요소의 스타일 규칙을 만드는 ㅅ고성16진수나 rgb, 색상 이름을 사용하여 배경색 지정//배경색 지정하기background-color: #000;background-color: rgb(0, 125, 16);background-color: blue;background-color는 스타일 상속이 적용되지 않음!!2. 배경색의 적용 범위를 조절하는 background-clip박스 모델의 테두리 까지 적용할지, 패딩 범위까지 적용할지, 내용 부분에만 적용할지 고르는 속성종류설명border-box박스 모델의 가장 외곽 테두리까지 적용,기본 값pad..

CSS 박스 모델웹 문서의 내용을 박스 형태로 정의하는 방법마진, 패딩, 테두리 등 박스가 여러겹 들어있음1. 블록 레벨 요소태그를 사용해 요소를 삽입했을 때, 한 줄을 차지하는 요소대표적으로 , , 가 있음2. 인라인 레벨 요소한 줄을 차지하지 않고 콘텐츠 만큼 영역을 차지하는 요소대표적으로 , , 등이 있음박스 모델의 기본 구성웹 문서의 블록 레벨 요소는 모두 박스 형태임이런 요소를 박스 모델 요소라고 함콘텐츠 영역, 패딩, 테두리, 마진 등 여러 요소로 구성1. 콘텐츠 영역의 크기를 지정하는 방법, weight, height크기, 백분율, auto에 따라 지정되며 기본 값은 auto종류설명너비, 높이 값을 px이나 em으로 정의박스 모델을 포함하는 부모 요소를 기준으로 너비, 높이 값을 백분율로..

텍스트의 색상 지정하기글자색을 지정하는 속성으로 color가 있음color: ;웹 문서에서 color속성을 사용하는 방법은 다음과 같음1. 16진수로 표현하기#ffffff 처럼 '#' 기호 다음에 6자리의 16진수로 표현하는 방법그래픽 프로그램 등에서 색상 지정시 사용하는 가장 기본적인 방법앞에서부터 두 자리씩 묶어 #RRGGBB 식으로 표현됨예시로, #000000의 경우 Red 0, Green 0, Blue 0 해서 검은색이 됨두 자리가 모두 같은 값인 경우, #000과 같이 줄여서 표현 가능 2. hsl, hsla로 표현하기CSS3에서 표현 가능한 방법hsl은 hue(색상), saturation(채도), lightness(명도)를 나타내는 것hsla는 위에 alpha(불투명도)를 더한것olor 속성 ..