Text 가 길어서 Div 영역 오른쪽으로 벗어나는 경우가 있다. 화면이 작은 경우 불필요하게 가로 스크롤이 보이게 된다.



아래 속성을 추가하여 적용 해 보자.


element {word-break: break-all;}


Div 영역에 맞게 수정 된 것을 볼 수 있다.


'Css' 카테고리의 다른 글

IE7 CSS 속성 적용에 대해서  (0) 2013.04.21
CSS 중복된 속성이 있을 경우 우선 순위 결정 하기  (3) 2013.02.17
CSS 선택자의 이용  (0) 2012.12.10
그러데이션 효과 관련 사이트  (0) 2012.12.06


개발 도중 문제점이 발견 됬었다.


문제점

  -  유일하게 IE7 에서는 CSS 속성을 작성하지 않는 것에 대해서 default 값을 적용해 버린다.


해결방법

  -  CSS 속성을 줄 때 하나하나 명시하자.

 

IE7 도 제외가 됬으면....


'Css' 카테고리의 다른 글

CSS 로 Div 영역에 Text 맞추는 방법  (0) 2014.10.30
CSS 중복된 속성이 있을 경우 우선 순위 결정 하기  (3) 2013.02.17
CSS 선택자의 이용  (0) 2012.12.10
그러데이션 효과 관련 사이트  (0) 2012.12.06


CSS가 중첩 되어 적용 되는 경우가 있다. 흔히 이런 경우 간단한 옵션을 주더라도 적용이 되지 않는다.



Debug을 하면 위와 같은 모습을 확인 할 수 있다.



width: 100% !important;



!important; 옵션을 적용 하면 우선 순위 대상이 된다.


'Css' 카테고리의 다른 글

CSS 로 Div 영역에 Text 맞추는 방법  (0) 2014.10.30
IE7 CSS 속성 적용에 대해서  (0) 2013.04.21
CSS 선택자의 이용  (0) 2012.12.10
그러데이션 효과 관련 사이트  (0) 2012.12.06


CSS 작업 방법 중 제일 먼저 해야 할 일은 jQuery의 Selector 처럼 선택자의 활용 이다.


1. 공통 선택하기

* 는 모든 HTML 태그에 대한 속성 선택

* { color: green; }


2. 태그 선택하기

div, p, h1, h2, h3, h4, h5, h6, span ... 여러가지 태그에 대한 속성 선택

div { color: green; border: 1px solid blue; }


3. 자식 태그 선택 하기

div 태그에 하위로 p 태그 선택

<div>

<p>이 부분이 선택 된다.</p>

</div>


div > p { color: green; }


4. ID 선택 하기

첫 번째로 ID만 선택 하는 방법이 있다. #header 이고, 활용 하자면 div 태그이며 ID가 header를 찾는 경우 div#header 로 좀더 정교하게 이용 할 수 있다.

<div id=header>

header

</div>


#header { border: 1px solid blue; height: 100px; width: 100% }

div#header { border: 1px solid blue; height: 100px; width: 100% }


5. Class 선택 하기

위의 방법 ID는 한 페이지에 한번 밖에 이용하지 못하고 개발자들이 자바스크립트로 작업을 할 때 ID를 많이 이용하기 때문에 최소한의 ID만 사용하고 Class로 작업하며, 하나의 영역 Div에서 자식태그로 접근 하는 방식을 많이 활용 해야 한다.

Class는 .area 이와 같은 방법으로 접근 할 수 있다. 좀 더 활용 하자면 div 태그이며 class가 header를 찾는 경우 div.area 로 이용 할 수 있다.

<div class="area">

area

</div>


.area { color: green; }

div.area { color: green; }


간단하게 대표적인 선택 방법을 알아 보았다.


'Css' 카테고리의 다른 글

CSS 로 Div 영역에 Text 맞추는 방법  (0) 2014.10.30
IE7 CSS 속성 적용에 대해서  (0) 2013.04.21
CSS 중복된 속성이 있을 경우 우선 순위 결정 하기  (3) 2013.02.17
그러데이션 효과 관련 사이트  (0) 2012.12.06

+ Recent posts

티스토리툴바