특정 문단에만 및 태그에만 속성이나 스크립트를 적용하려면 클래스를 사용하면 된다.
정의하는 방법은 .class_name 같이 .으로 정의한다.
클래스는 모든 엘리먼트 태그에 여러개, 다중으로 사용이 가능하다.

<style type="text/css">
span.red {color:red}
</style>
<div class="red">class를 정의한 곳에만 red 효과 부여</div>
<div><span class="red">red</span>효과 부여 테스트</div>

span 태그에 red라는 클래스가 정의가 되면, red가 정의된 엘리먼트에는 스타일이 적용이 된다.
하지만 div에 적용된 red 클래스는 적용되지 않는다.

또한 특정 HTML 요소에 적용시키지 않고 독립적으로 클래스를 사용해도 된다.
이럴 경우 red class가 지정되어있는 모든 엘리먼트 태그에 스타일이 적용이 된다.
<style type="text/css">
.color_red{color:red}
</style>
<div class="color_red">class를 정의한 곳에만 red 효과 부여</div>
<div><span class="color_red">red</span>효과 부여 테스트</div>

이와 같이 클래스를 독립적으로 지정하는 방법이 편리하므로 더 많이 사용된다.

아이디(id) 선택자
아이디는 클래스와 구분을 지어놔야하기 때문에 #을 이용하여 정의한다.
클래스와 다르게 아이디 같은 경우에는 고유성을 가지고 있기 때문에 한 html 파일에 하나의 id만 정의가 가능하다.
<style type="text/css">
#id_red {color:red}
</style>
<div class="id_red">id를 정의한 곳에만 red 효과 부여</div>
<div><span id="id_red">red</span>효과 부여 테스트</div>


홈페이지를 비슷하게 만들고 똑같은 레이아웃이 있을 경우에는 class를 사용하는게 통상적이다.

그리고 클래스가 정의되고 사용할 때 스타일 적용 순서는 css에서 제일 나중에 선언된 것이 적용된다.

,

<style type="text/css">
.red {color:red}
.blue {color:blue}
</style>
<div class="red blue">클래스 정의 값에 따른 CSS 적용 순서</div>
<div class="blue red">클래스 정의 값에 따른 CSS 적용 순서</div>

이렇게 넣었을 경우에 blue가 제일 나중에 적용된 css 이기 때문에 위 아래 div에 둘다
color: blue 값이 적용되게 되는 것이다.


정책상 특정 부분에 밑줄을 넣어라! 라고 하는 부분에는 class로 text-decoration을 주면 되는 것이다.

'WEB > HTML' 카테고리의 다른 글

[HTML] 메타(meta) 태그  (0) 2017.12.12
[HTML] 주석 및 띄어쓰기, 선긋기(hr 태그)  (0) 2017.12.05
[HTML] 모바일 확대 방지  (0) 2017.11.29
[HTML] <table> 태그  (0) 2017.11.27
[HTML] <select> 태그  (0) 2017.11.27



$fullCode = "아리랑 아라리요"
$code = "아리랑";

if(strpos($fullCode, $code) !== false){
    echo "아리랑 문자열이 있습니다.";
}else{
    echo "아리랑 문자열이 없습니다.";
}




PHP에서 MySQL에 연결할때 사용하는 함수는 mysql_connect와 mysqli_connect가 있다.

이 두가지의 차이는 mysql가 php5버전 이후로 지원되는 것으로 mysql에 비해서
속도가 빠르고 보안이 훨씬 잘되어 있다는 점이다.

mysql은
mysql_fetch_array(mysql_query($query));
이런 형식으로 사용이 가능하지만

mysqli는
$result = mysqli_query($db_connect, $query);
mysqli_fetch_array($result);
이런 형식으로 따로따로 써준다.

그리고 query문을 써줄 때 꼭 앞에 데이터 베이스를 connect한 변수명이 들어가야한다.






$str = "a891b120adq2031a012";
$num = preg_replace("/[^0-9]*/s", "", $str); 

결과
8911202031012




text-decoration속성을 통해서 밑줄, 취소선, 윗줄 주기

text-decoration속성은 CSS를 사용해 텍스트에 밑줄, 윗줄 또는 취소선(가운데선)등을 사용하는 방법입니다. 
text-decoration 속성을 사용할 경우 이와 같은 스타일 구현이 가능합니다. 
이 속성은 다음과 같은 값을 지정할 수 있습니다.

text-decoration : underline(밑줄)
text-decoration : overline(윗줄)

text-decoration : line-through(취소선)
text-decoration : none(숨기기)

a링크를 걸때 밑줄이 있을 경우 밑줄을 제거하려면
a{
    text-decoration: none;
}
을 하게 되면 밑줄이 없어진다.



'WEB > CSS' 카테고리의 다른 글

[CSS] px, pt, em, %의 크기 비교  (0) 2017.12.06
[CSS] <ul> <li>로 테이블 만들기  (0) 2017.11.27
[CSS] 구글 웹폰트 사용하기  (0) 2017.11.27
[CSS] width에 padding과 margin을 포함시키기  (0) 2017.11.27
[CSS] 자간 설정  (0) 2017.11.27

+ Recent posts