지지나

수업시간에 배운 것을 생활코딩 영상을 보면서 복습하면 도움이 참 많이 된다. 가뜩이나 짧은 수업시간에 여러 내용을 전달하려면 강사님의 개념설명은 더더 간단해지기 때문이다. 그래서 수업때 잘 이해가 안 간 것을 생활코딩을 보면서 개념을 잘 잡고 가려고 한다. HTML 태그에서 블록과 인라인 태그의 차이를 아는 것이 중요한데, 이번에 함께 알아가도록 하자. 예제를 만들어 보았는데, 태그 안에 태그와 태그를 사용했다. 똑같이 한 줄에 썼으나 h1 태그로 담긴 '대파라면'은 줄바꿈이 되어있고, 화면 전체를 사용하는 것을 볼 수 있다. 반면 하이퍼링크가 담긴 '인스턴트 라면'의 a 태그는 줄바꿈이 이루어지지 않는다. 제목인 h1 태그는 내용의 핵심적인 것을 담고 있이게 줄바꿈을 해서 화면 전체를 쓰는 것이 더 간..

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

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