primavera

상대 위치(relative position) 화면상에 어디에 위치할 것인가. 각 요소의 위치 결정. 이렇게 만들어둔 상태에서 me를 왼쪽, 오른쪽으로 이동해보자. left, right, top, bottom으로 위치를 이동시킬 수 있다. 라인 10이 중요하다. position: relative가 없으면 left, top 값이 무시된다. css의 각 요소는 기본적으로 static이기 때문이다. 절대 위치(absolute position) left, right, top, bottom을 써주지 않으면 기본값에 위치한다. absolute일 때의 기본값은 해당 요소가 있을거라 기대되는 곳이다. absolute를 지정하면 me는 더이상 parent의 자식으로 보지 않는다. 따라서 컨텐츠 크기도 줄어든 것이다. 자식..

h1 2개의 마진이 겹친다. 만약 둘의 마진이 다르다면 큰 값이 두 태그 사이의 거리가 된다. * 부모, 자식 요소 사이의 마진 겹침 현상 부모 시각적 요소가 없으면, 부모의 마진값과 자식 마진값 중 큰 것이 자식의 마진값이 된다. * 태그의 시각적 요소가 없으면, 그 태그의 margin-top과 margin-bottom 중 최대값이 전체 margin이 된다..

태그의 부피감을 결정한다. 태그는 박스에 둘러싸여 있다. padding은 테두리와 컨텐츠 사이의 간격을 말하고, margin은 태그와 다른 태그 사이의 간격이다. padding과 margin을 각각 (20, 20) (40, 20) (20, 40) (40, 40) 으로 설정했을 때의 결과이다.(단위는 px) 블럭모델은 보통 화면 전체를 사용한다. 화면 전체를 사용하지 않게 하려면 width 값을 주면 된다. 근데 이 박스 모델이 inline element에서는 좀 다르게 동작한다. padding과 margin은 적용되는데, width 값은 무시한다. box-sizing div 태그에 width를 150px로 똑같이 줬는데 위와 아래의 크기가 달라보인다. width는 컨텐트 영역의 크기를 말하는거기 때문이다..

상속 부모의 스타일을 자식들이 물려받는 것 -> 코드를 효율적으로 짤 수 있다. css의 모든 속성이 상속되는건 아니다. 예를 들어서, color 상속됨. border는 상속되지 않음. 전자는 상속되는 편이 좋고, 후자는 상속되지 않는 것이 좋아서 그렇게 설정됨. css의 설명서를 봐야 알 수 있음. 8줄에서 html에 적용한 color 속성이 모든 자식들에게 적용된다. 하지만 10줄에 설정한 border는 body에만 나타나고 body의 아래에 있는 자식들에 대해 border가 그려지지 않는다. cascading css는 cascading style sheet의 약자. cascading이 css에서 중요하다! 우선순위가 필요하다. 기본규칙: 웹브라우저 < 사용자 < 저자 하나에 태그에 css가 중첩되어..

font-size 글꼴의 사이즈를 설정하는 속성 단위가 중요하다. px, em, rem가 있는데 현재는 거의 대부분 rem을 사용한다 px와 rem의 차이점은 사용자의 설정에 따라서 글꼴 사이즈가 바뀌는지의 여부이다. 사용자가 브라우저 글꼴 크기를 바꿨을 때, rem로 설정하면 글꼴 크기가 따라서 바뀌지만, px로 설정하면 바뀌지 않는다. color 글꼴의 색은 3가지로 표현할 수 있다. 1. 색 이름 2. 16진수 3. RGB h1{color:aliceblue} h2{color:#00FF00} h3{color:rgb(244, 101, 161)} CSS Colors W3Schools offers free online tutorials, references and exercises in all the ma..