지지나

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

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

어느 수업이든 마찬가지이겠지만, 1시간짜리 강의를 들었을때 나에게 필요한 복습 시간은 최소 1시간인것 같다. 뒤돌아서면 나의 뇌는 LTE급으로 기억력 감퇴를 시작하기 때문에, 지난주 토요일에 들은 웹페이지 제작 CSS 파트를 4일째에서야 본격적으로 복습을 하려니 참 힘들다ㅋㅋㅋ 이제부터 꼭 주말 내에 1회 복습을 끝내야겠다. HTML 수업 한번 들었다면 다 아는 제목 태그를 이대로 구현하면 색깔도 검정이고 참 재미가 없다. 색 입히는 역할은 CSS인데, 한번 살펴보자! CSS에서 선택자란 '디자인을 적용하고 싶은 HTML 영역' 이다. 크게 Type, Id, Class 세 가지로 구분된다. Type 선택자 {속성:속성값;속성:속성값; 등등등} 사진에서 ,..과 같은 html 태그를 기준으로 디자인을 적용..