지지나

HTML/CSS 공부에서 박스모델을 잘 이해하는 것이 중요하다. MS사에서 발표한 가장 많이 쓰는 css속성 중 70%를 요 박스모델 관련한 속성이 차지하고 있는 만큼, 이번 기회로 잘 알고가자! 블록 태그인 태그에 h1{border: 5px solid red;}로 5픽셀의 빨간 테두리를 줬다. 지금은 테두리랑 '대파라면'사이에 간격이 아예 없다. 그래서 요렇게 padding을 이용해서 20픽셀만큼 간격을 줬다. '대파라면' 양옆, 위아래에 간격이 보이는 것을 알 수 있다. 즉, 박스모델 안쪽에 여백이 생기는 것이 padding 이다. 여기에 또다른 h1 태그를 하나 더 추가해 보았다. 적용한 css 속성은 당연히 같다^^ 여기서 margin에 대해서 알고 갈 건데 margin: 0; 과 margin: ..

지난 포스팅에 html 부모자식 태그와 css 자식, 자손 선택자와 형제 선택자, 이미지 적용하기에 대해서 다루었다. 이번에는 형제 선택자에 대해 조금 더 깊이 알아보려고 한다. 형제가 여럿일 경우 각각 따른 css를 적용하려면 어떻게 해야 할까? 맨 첫번째 형제는 first-child{속성:속성값;} 두번째 ~ 끝에서 바로 윗 형제까지는 nth-child(n번째){속성:속성값;} 마지막 형제는 last-child{속성:속성값;} 를 해주면 된다. 그렇다면 그 위에 태그와 태그도 서로 형제들인데, 셋째인 bro2에다가만 노랑색 배경을 해주고 싶다면 어떻게 해야 할까? 두 가지 방법으로 할 수 있는데, 태그의 셋째인 p:nth-child(3) 으로 지정해서 바로 속성을 입힐 수도 있고, 아니면 두 번째 태..

html을 보다 보면 태그안에 태그가 들어 있는 것을 눈치 챌 수 있다. 이를 부모-자식 관계라고 하는데, 예컨데 위에 내용에서 보면 아래와 같은 족보를 파악할 수 있다. ▷ 부모 ▷ 자식 ▷ 자손 CSS는 부모에게 준 속성이 자식과 자손에게도 영행을 미치기 때문에, 만일 내가 부모인 태그에 회색 배경을 적용했다면, 그 자식인 태그와 자손인 태그에게도 동일한 속성이 적용된다. 그렇다면 자손인 에게만 적용하고 싶은 속성이 있다면 이를 따로 써주어야 한다. 나는 'ul의 자손 a에게 초록색 배경을 적용하세요' 라고 작성 해 보았다. 작성법은 부모 태그 띄어쓰기 자손 태그{속성:속성값;} ul a{background-color: green;} 그렇다면 자식에게 적용하고 싶은 속성은 어떻게 될까? 작성법은 부모..