본문 바로가기

분류 전체보기131

CSS_Fontsize 오늘은 Font size에 대해서 포스팅을 해볼려고 해요 제가 HTML 폴더에 HTML글씨체(http://jsfootprint.tistory.com/13) 라고 포스팅 해놨던 것이기도 한데요 좀 자세히 풀어서 써볼까 해요ㅎㅎ 먼저 Font-size에는 Px 와 Rem으로 나눌 수 있어요. 둘의 차이점을 알아 보도록 할께요! 크게 둘의 차이점은 상대적이냐 절대적이냐 라고 볼 수 있는데요. 이는 폰트 사이즈를 조정할 수 있는 사용자의 권리를 존중하기 위함이라고 해요. 사용자가 브라우저의 글꼴 크기를 변경했을때 Px는 바뀌지 않고 (절대적) Rem은 바뀐다고 해요! (상대적) 요즘에는 rem을 많이 쓴다고 해요! 2017. 3. 7.
CSS_cascading 오늘은 Cascading 이라는 것에 대해 포스팅 할려구 하는데요~ Cascading이란 적용 우선순위 라고 할 수 있어요. 우선순위가 어떻게 적용되는지 한번 알아볼게요~ 우선 기본 코딩을 해볼께요! 태그에만 색깔을 입혀보았습니다. 이제 id값과 class값, style 속성값을 넣고 우선순위를 비교해 보도록 하겠습니다. 화면을 보시는 바와 같이 id값,class값,style속성값, tag값 이렇게 4가지가 겹쳐있는경우, 우선순위는 Style Attribute > Id selector > Class Selector > Tag Selector 순서로 우선순위가 정해집니다! 2017. 3. 7.
CSS_3 다음은 가상 클래스 선택자에 대해서 알아보겠습니다. 이건 간단합니다. 우선 간단하게 코딩을 해보도록 하겠습니다. 코딩을 이런식으로 한 후에 결과화면을 보면 다음과 같이 나오게 됩니다. 왼쪽에 "Google 방문 전" 이라고 쓰여있는것은 제가 클릭하기 전 이구요 오른쪽에 "Naver 방문 후" 라고 쓰여있는건 제가 클릭하고 나서 캡쳐한 화면입니다. 따라서 클릭하기전엔 기본값으로 파란색, 클릭한 후엔 기본값으로 보라색이 나오게 됩니다. 가상 클래스 선택자에는 이런것들이 있습니다. :link – 방문한 적이 없는 링크:visited – 방문한 적이 있는 링크:hover – 마우스를 롤오버 했을 때:active – 마우스를 클릭했을 때 이런것들을 어떻게 써야 하는지 알아보도록 하겠습니다. style 태그 안에 .. 2017. 3. 6.
CSS_2 이번엔 부모,자식 선택자에 대해서 배워볼께요. 부모,자식이란 상속관계를 의미합니다. 이게 뭔지 모르는 분들도 많으시겠지만.....다른데서 찾아보시구요^^ㅎㅎ 쉽게말해서 품고있는(?)것을 의미합니다! 우선 기본적인 코딩을 해볼께요! HTML만 이용해서 만들어 보았습니다! 여기서 어떤것이 부모선택자이고 자식선택자 일까요?? 빨간색으로 네모칸 친 부분이 부모선택자, 파란부분이 자식 선택자 라고 할 수 있습니다. 대충 감이 오시는지요...?ㅎㅎ 이제 색깔을 입혀 보도록 하겠습니다. 앞에서 배웠던것처럼 태그 선택자를 이용해 글자크기와 색깔을 입힐 수 있습니다. ul 과 ol 모두 파란색과 글씨크기는 20px로 입혔습니다. 그런데 코드가 겹치지 않습니까? 그래서 ul과 ol을 한번에 쓸 수 있습니다. 이런식으로요... 2017. 3. 6.

티스토리툴바