본문 바로가기

Web/CSS19

CSS_3 다음은 가상 클래스 선택자에 대해서 알아보겠습니다. 이건 간단합니다. 우선 간단하게 코딩을 해보도록 하겠습니다. 코딩을 이런식으로 한 후에 결과화면을 보면 다음과 같이 나오게 됩니다. 왼쪽에 "Google 방문 전" 이라고 쓰여있는것은 제가 클릭하기 전 이구요 오른쪽에 "Naver 방문 후" 라고 쓰여있는건 제가 클릭하고 나서 캡쳐한 화면입니다. 따라서 클릭하기전엔 기본값으로 파란색, 클릭한 후엔 기본값으로 보라색이 나오게 됩니다. 가상 클래스 선택자에는 이런것들이 있습니다. :link – 방문한 적이 없는 링크:visited – 방문한 적이 있는 링크:hover – 마우스를 롤오버 했을 때:active – 마우스를 클릭했을 때 이런것들을 어떻게 써야 하는지 알아보도록 하겠습니다. style 태그 안에 .. 2017. 3. 6.
CSS_2 이번엔 부모,자식 선택자에 대해서 배워볼께요. 부모,자식이란 상속관계를 의미합니다. 이게 뭔지 모르는 분들도 많으시겠지만.....다른데서 찾아보시구요^^ㅎㅎ 쉽게말해서 품고있는(?)것을 의미합니다! 우선 기본적인 코딩을 해볼께요! HTML만 이용해서 만들어 보았습니다! 여기서 어떤것이 부모선택자이고 자식선택자 일까요?? 빨간색으로 네모칸 친 부분이 부모선택자, 파란부분이 자식 선택자 라고 할 수 있습니다. 대충 감이 오시는지요...?ㅎㅎ 이제 색깔을 입혀 보도록 하겠습니다. 앞에서 배웠던것처럼 태그 선택자를 이용해 글자크기와 색깔을 입힐 수 있습니다. ul 과 ol 모두 파란색과 글씨크기는 20px로 입혔습니다. 그런데 코드가 겹치지 않습니까? 그래서 ul과 ol을 한번에 쓸 수 있습니다. 이런식으로요... 2017. 3. 6.
CSS_1 오늘은 CSS에 대해서 알아보도록 하겠습니다. CSS란? Cascading Style Sheet의 약자로써 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트라고 합니다. 쉽게말해서 HTML에 색깔을 입히고 더 보기 이쁘게 꾸미는것을 의미합니다. 그렇다면 이제 문법과 사용법에 대해서 알아보도록 할께요. 우선 CSS는 이렇게 구성이 되어있답니다. Selector 는 h1 이라고 쓰여있는데 이것을 풀어서 설명하면 다음 HTML에서 쓰이는 모든 h1 태그에는 뒤에 괄호{} 부분에 해당하는것들을 입히겠다! 라고 설명할 수 있습니다. 그래서 입력을 해보면 이런 식으로 써 내려갈 수 있습니다. 태그 안에 h1이라고 쓴것은 태그에 대한것을 입힌것이므로 태그선택자 라고 할 수 있습니다. 다음 알아볼것은 ID선택자 .. 2017. 3. 6.