[CSS]기초강좌 3

Posted by 나눔인생 내브티
2018. 7. 27. 19:00 웹 프로그래밍/CSS
http://richest2yh.tistory.com/45 CSS 기초강좌 2


이번에는 좀 저번 강좌의 심화를 해보겠습니다.



ul, ol태그를 사용하여 리스트를 나타냈습니다.

저번 포스팅과 마찬가지로 특정 리스트 "리스트6" 글자크기를 변경 해보겠습니다.


보시는 바와 같이 ol li.list3 으로 선택하여 글자 크기를 조절해 보았습니다.
각 부분이 어디를 가르키는가를 유의하며 확인하시면 쉽습니다.

다음으로 속성 선택자를 선택하여 CSS속성을 변경 해보겠습니다.


form 태그를 넣어 사용자에게 정보를 받을수 있도록 박스를 만들었습니다.



input 의 컬러를 레드로 지정하여 사용자가 입력시 글자색이 레드로 나오게 변경하였습니다.


타입의 속성값을 지정하여 변경해보았습니다.

패스워드는 따로 변경하지 않았기에 맨 처음 속성을 그대로 가져가는 것입니다.



이번에는 반응 선택자를 알아보겠습니다.



특별할 것이 없는 리스트 입니다.



위와 같이 코드를 넣고 마우스를 갖다 대봅니다.
색이 red로 지정한거 같이 변경이 됩니다.

상태선택자인 hover로 인하여 마우스를 올리면 색이 변경됩니다.


이번에는 링크 선택자에 대해 알아보겠습니다.
<a><href = '주소"></a>
링크를 달기위해 위와같은 방식으로 링크를 달게 되는데

네이버 - http://naver.com

  이렇게 같이 표시가 될수 있도록 속성을 설정할 수 있습니다.
코드를 직접 보는게 빠르니 코드로 확인하겠습니다.


보통 이렇게 네이버에 밑줄 상태로 링크가 걸립니다 하지만 


위와 같이 코드를 작성하면 네이버 옆에 링크가 다시 달립니다.

많이 쓰이진 않지만 필요할때 쓰면 코드가 재활용 될 수 있죠.


'웹 프로그래밍 > CSS' 카테고리의 다른 글

[CSS]기초강좌 3  (0) 2018.07.27
[CSS] 기초강좌 2  (0) 2018.07.26
[CSS] 기초강좌 1  (0) 2018.07.24
이 댓글을 비밀 댓글로