HTML코딩을 하다보면 배경을 반투명 하게 해야 할 경우가 생깁니다. 흔히 많이 사용하시는 방법이 CSS의 opacity를 이용해서 투명도를 설정해주시죠? Opacity는 해당 객체의 투명도를 설정할 수 있으며 0 부터 1 까지 소수점으로 설정합니다. 예를 들어 투명도를 50% 정도 주고 싶다 한다면 opacity:0.5; 라고 사용하시면 됩니다. 하지만 opacity를 사용해서 할 경우 아주 환장하는 문제가 생깁니다. 바로 자식요소까지 모두 투명도를 설정해버리는 문제가 있습니다.
안녕하세요! 디벨로드 입니다~ 스타일의 적용 우선순위에 대해서 알아보겠습니다. 스타일의 우선순위는 단계적으로 우선순위가 정해집니다. 예를 들면 <style> p { color:red; } p { color:blue; } </style> <p>스타일은 단계적으로 적용됩니다.</p> 이렇게 하면, p태그의 글자는 blue 색상으로 적용이 됩니다. 스타일은 단계적으로 적용됩니다. 나중에 쓴 스타일이 적용되는거죠! 하지만 예외가 있습니다. !important 이걸 써주게 되면 상황이 바뀝니다. !important 를 써준 스타일이 우선 적용 됩니다. <style> p { color:red !important; } p { color:blue; } </style> <p>스타일은 단계적으로 적용됩니다.</p> 이렇게 작성해주면, p태그의 글자는 red가 우선순위로 적용이 됩니다. 스타일은 단계적으로 적용됩니다. 그리고 !important 보다도 우선순위로 적용할수 있는방법이 있습니다. 그건..바로 <style> p { color:red !important; } p { color:blue; } </style> <p style="color:green;">스타일은 단계적으로 적용됩니다.</p> 태그 안에 직접 넣어주는 것이지요!!! 하지만 저는 태그안에 직접 스타일을 넣는것은 권하지 않습니다. 물론 코딩할때 스타일을 어쩔수 없이 강제로 변경하기 위해 직접 넣어서 사용하는 경우가 있지만 그런 경우가 아니라면 사용 안하시는게 좋아요^^
댓글
댓글 쓰기