[CSS]기초강좌 3

Posted by 나눔인생 내브티
2018.07.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
이 댓글을 비밀 댓글로

[CSS] 기초강좌 2

Posted by 나눔인생 내브티
2018.07.26 23:17 웹 프로그래밍/CSS
http://richest2yh.tistory.com/44 - CSS 기초강좌 1

복습 한번 시작하겠습니다.

기본 CSS위치는 아래와 같습니다.




태그 선택자는 : div라는 선택자를 사용하여
div 에 포함된 모든 부분의 backgroud 부분을 red로 지정하였습니다


이번엔 div 태그에 name을 지정하여 속성변경시 관리하기 쉽도록 해보겠습니다.



위와 같이 div 태그 안에 div 태그가 2개가 존재합니다.
위에서 배운것 처럼 div태그를 css로 설정을 하면
div 태그가 전체 다 바뀌어 버리게 됩니다. 아래 사진 같이..



만약에 "h2 자리입니다 "만 바꾸려면
div에 이름을 설정하여 그 부분만 선택하여 바꾸시면 됩니다.





#first로 특정 위치를 지정하여 변경하였습니다.

다음은 class를 이용하여 변경해보겠습니다.




위에 캡쳐와같이 list 태그들을 red로 전체 변환하였습니다.

하지만 특정 리스트에만 색을 주기 위해 .list1 이라는 클래스명으로 선택하여 변경하였습니다.

#은 ID를 붙인다
.은 class 명을 붙인다가 핵심입니다.


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

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