IT/CSS4 Selector section ul{color:blue} header ~p{color:blue} asection은 parent element이며 ul은 자손 요소(자식, 손자 등을 포함한 section안에 있는 모든 자손)이다. header의 경우 p가 형제 element(모든 형제 요소)이다. 반면에 아래와 같은 경우는 seclection > ul{color:blue;} header +p{color:blue;} selection이 부모요소인것은 같지만 ul은 자손요소가 아닌 자식에게 만 해당되는 자식 요소가 된다. p가 근접한 형제에만 해당되는 형제요소가 된다. ul{color:blue;}→ ul,p {color:blue;} p{color:blue;} 이와 같이 한줄에 줄이는 것도 가능하다. 셀렉터의 부모와 자손 se.. 2019. 6. 15. Layout Layout 2가지 요소 block레벨요소 : 항상 새로운 라인에서 시작. 폭 전체를 차지한다 - , ~, , , , , inline 요소 : 새로운 라인에서 시작하지 않고, 필요한 만큼의 영역만 차지 -, , display : 속성을 none으로 하면 보이지 않고 영역이 유지되지 않는다. visibility : hidden으로 사용지 보이지 않으며 영역은 유지된다. position 4가지 속성 static : 고정 위치. 위치관련 속성의 영향을 받지 않는다.(HTML 요소 기본값) relative : 상대위치. 위치관련 속성으로 원래 위치에서 이동가능 fixed : 고정위치. 브라우져의 크기 변경이라 스크롤에도 같은 위치를 유지 absolute : 가장 가까운 위치의 static이 아닌 조상으로 부터 .. 2019. 6. 15. Text Text : 텍스트에 형식을 다양하게 지정할 수 있는 속성을 제공한다. color : 텍스트 색 text-align : 정렬 text-decoration : 텍스트에 줄긋기 letter-spacing : 자간 (음수면 글자가 겹쳐진다) line-height : 줄간(0.8과 같은 식으로 설정) word-spacing : 단어간 간격 vertical-align : 수직정렬 Fonts : 글시체의 종류, 굵기, 크기, 스타일을 지정 font-familly : 폰트 종류 font-weight : 굵기 font-style : italic등 스타일 지정 font-size : 크기지정 font-variant : 제곱 같은거 만들때 주로 사용 Icons : font의 일종이며 size, color 설정이 가능하다. .. 2019. 6. 15. CSS3 CSS를 HTML에 적용하는 방법 3가지 외부문서(*.css)를 HTML문서에 포함시키는 방법 HTML문서에 태그안에 스타일을 정의 태그안에 스타일을 정의 This is a heading Style의 우선순위 : 상위에 있는 모델의 CSS의 영향을 받지만, 중복되는 경우에는 하위의 모델일수록 우선순위가 높다. HELLO h1{color:red} => h1{color:red !important} //important를 통해서 우선순위를 설정하는 것이 가능하다. Style의 상속 (inherit & initial) 자손의 태그는 조상태그의 속성을 물려받는다.(inherit) Hello 속성의 값을 initial로 지정하면, 속성의 기본값이 적용된다. Hello Style의 기본값 : 태그마다 기본적인 속성값.. 2019. 6. 15. 이전 1 다음
