[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
이 댓글을 비밀 댓글로

[CSS] 기초강좌 1

Posted by 나눔인생 내브티
2018.07.24 16:38 웹 프로그래밍/CSS
CSS란 HTML, XML과 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다.

HTML으로 문서의 뼈대를 만들고 CSS로 꾸민다고 생각하시면 쉬울거 같습니다.

레이아웃, 글꼴, 배경화면등을 변경할 수 있습니다.


1. 선택자란?

특정 태그를 선택하여, 해당 태그의 속성을 변경하는 목적으로 사용되는 것을 선택자라고 합니다.

HTML 문서구조는 아래와 같습니다.



CSS 의 위치는 <head>  </head>사이에 위치하게 되며
<style> </sytle>로 시작합니다.

아래의 간단한 예시를 보겠습니다.



위사진과 아래사진 차이는 <head></head>사이에 
CSS언어가 들어간 것 입니다.




<style></style>태그에 사이에 있는 div태그를 선택한 후
 속성과 속성값을 넣어서 배경이 바뀐것 입니다.

이번엔 태그 선택자에 대해 보겠습니다.


<style>태그를 살펴보시면 특정 태그를 선택하여
각각 다른색을 표시해줬습니다.


위 캡쳐를 보시면 h1태그는 배경, li태그는 글꼴색, P태그는 글꼴을 변경해보았습니다.


이번에는 *를 사용하여 전체 글 색을 변경하였습니다.



이번에는 혼합하여 사용해 보았습니다.

바로 전에 *는 전체를 의미한다고 했으나 중간에는 글자의 색이 다른것이 보이실텐데요
프로그래밍 특성때문에 그렇습니다.

프로그래밍은 위에서 아래로 코드를 순차적으로 읽으며 실행되기 때문에
전체색이 설정이 된 후 

li {
                color: #9aa5ea;
            }

위에 코드를 만나고 li에 해당되는 색이 변경되는 것입니다.



눈으로 코딩을 하면 쉽습니다
 
하지만 막상 코딩을 할때에 해보지 않았다면 손이 얼어버리는걸 느끼실겁니다.
(저도 반성중..)

위에 소스를 연습삼아 한번씩 해보는 것을 추천드립니다.







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

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