공학도의 잡다한 시선

[css] 링크(link) 클릭했을 때, 마우스올렸을 때 (visited, hover, active)이번 글에서는 css에서 링크를 꾸며주는 속성을 알아보도록하겠습니다.원래 html에서는 a태그를 사용해서 속성을 주게되면 링크를 걸 수 있었습니다.a에 href에 주소를 입력해서 말이죠. target을 통해서 클릭시액션도 지정할 수 있었습니다. 하지만 css에서는 링크의 기본색상 그리고 클릭했을 때 색상클릭을 할 때 그 순간색상, 이미 방문한 링크일 때 색상을 설정할 수 있습니다.이것을 해보도록 하겠습니다.저 같은 경우는 위와 같이 코드를 짯습니다.첫번째 a:link 선택자를 사용하면 기본 링크의 스타일을 지정할 수 있습니다.색상은 파란색을 주었고요. 원래 링크에는 기본으로 밑줄이 생기는데text-deco..

[css] 글자 굵게 기울기 속성 (font-style, -weight) 아작내버리기 이번 글에서는 css를 사용해서 글자의 스타일과 두께(굵기)를 지정해버리도록 하겠습니다. 사실 스타일이라고하면 글자를 기울게 하는 것이 있고 두께라고 하면 굵게하는 것이 답니다. 그런데 글을 쓸 때 굵게하는 효과를 아마 좀 많이 사용하지 않을까 생각되네요. 요즘은 그냥 글을 쓸 때 웹프로그래머가 만들어 놓은 에디터를 사용하지만.. 지금 제가 쓰고 있는 이것도 티스토리용 에디터죠. 그래도 무슨 코드가 먹히면 이런 스타일이 적용되는지 궁금하지 않나요? 전 궁금하던데 html을 사용하는 것이 아니라 css를 사용해 볼게요. 위와같이 h3을 선택자로 지정하고 font-style 속성을 사용했습니다. 이 속성은 기울임꼴의 글꼴이..

[css] 글자에 그림자 넣기 text-shadow (+글꼴, 크기 : font-family-size)css를 사용하면 글자에 그림자도 넣을 수 있습니다.원래는 css3 전에는 그림자효과가 없었다고합니다.그런데 업그레이드되어서 이제 text-shadow속성을 사용하면무려 그림자를 나타낼 수 있게됩니다.. 신기하네요!사용 방법은 위와 같습니다.css스타일 시트에서 속성으로 text-shadow를 주면됩니다.그런데 왜 값이 4개나 될까요?왜냐하면 각각 나타내는 값이 있기 때문입니다.첫 번째로 오는 녀석은 오른쪽그림자길이두 번째로 오는 놈은 아래쪽그림자길이세 번째로 오는 녀석은 흐린정도그리고 마지막은 그림자 색상을 나타냅니다. 위 와 같이 코드를 작성하고 실행해주게되면,결과는 이렇게 나오게됩니다.저는 h3선택..

[html-css] 줄간격 정렬, 밑줄 (text-align-decoration,line-height)웹프로그래밍 입니다.CSS는 캐스케이딩 스타일 시트의 약자로 HTML과 함께 사용되어페이지를 더 효율적으로 꾸밀 수 있게 해줍니다.이를 활용하면 더 풍부한 디자인가 사이트 유지보수가 가능합니다.위와 같이 작성된 CSS는 라인 8번에서 17번까지 작성되어있습니다.style태그로 감싸서 설정해 주면되고이때 사용 방법은 선택자{ 속성 : 값; . . .} 이런 식으로 적용하면됩니다.위에작성된 방식은 내부스타일시트 방식입니다.내부스타일 시트는 html문서의 head태그 안에 스타일시트가 삽입된 것을 뜻합니다.추가적으로 바디태그 안에서 속성 에서 바로 style을 적용시켜주는 것과외부스타일 시트로 CSS를 삽입하..