유니의 코딩공부

둘 이상의 선택자를 연결해서 특정한 요소를 선택하는 방법 id값이 containter인 요소와 이 요소를 부모로 하는 하위의 모든 p요소 자식 요소 : 자식에만 적용 시킴 컨테이너 밑에 있는 자식p에만 적용됨 형제 선택자 h1 ~ p h1다음 첫번째p 태그에만 적용시키고 싶은 경우 인접 형제 선택자 : h1 + p 속성 선택자 href가 있는 속성에만 스타일을 지정하고 싶은 경우 href="#"인 경우에 cursor를 마우스로 하고 싶은 경우 가상 클래스 링크에 많이 사용 됨 :link :visited :hover :active 순서를 지켜주어야 한다. 순서를 지키지 않으면 적용되지 않는 경우가 있음 link와 visited를 똑같이 묶어서 지정 hover 마우스를 올렸을때 마우스 오버하면 배경은 짙은색..

float 속성: 왼쪽, 오른쪽으로 떠 있게 할 수 있음 float 속성: 왼쪽, 오른쪽으로 떠 있게 할 수 있음 사이드 바를 이용해서 왼쪽, 오른쪽에 배치할 때 많이 사용 해지하고 싶은경우 clear box4는 float영향을 받지 않게 됨 position : 요소 위치 지정할때 사용 margin : 20px auto(좌우를 auto로 주면 화면의 중앙에 둘 수 있); static : 기본. 웹 소스가 나열된 순서대로 화면에 나열 relative : 소스 작성 순서대로 배치 & 위치 값 지정 가능 absolute : 부모, 상위 요소에서 postion:relative가 기준점이 됨. 소스 위치와 상관 없이 위치 값 지정 fixed : 위치값 고정

블록 레벨 요소 : 자체가 브라우저 화면에서 한 줄을 차지 인라인 레벨 요소 : 필요한 영역만 차지 box-sizing : box모델의 넓이 계산할때 보더박스까지 계산을 포함해서 넓이가 200px이라는 의미 첫번째 박스 크기 : 260 (200+양쪽20+양쪽10) 두번째 박스 : box-sizing 200으로 설정했기 때문에 padding과 border까지 포함해서 200인 것을 알 수 있음 각각 따로 지정할 때 가장먼저 border-style지정 필요. 없으면 테두리 그려지지 않음 한꺼번에 지정하는 border속성인 경우는 순서 상관 없음. border-width : 5px(top,bottom) 10px(right, left)