우선순위 css 캐스케이딩, 레이아웃 display 태그, 박스모델 속성

분류없음 RSS Icon ATOM Icon 2022/06/18 10:59 p2p사이트 순위 - 모아파일 2022 TOP12
우리가 css 디자인 코딩을 할때에 여러가지 효과를 주기 위해서 style 에 속성을 부여하게 되며 우선순위에 따라서 속성이 적용이 되므로 어떠한 속성이 우선순위로 적용되는지 알고 있어야 합니다.

1. 캐스케이딩 css 우선순위


아래의 예제를 보시면 짐작이 되겠지만 body 태그안에 직접 style 를 적용하게하면 0순위로 효과가 부여되며, head의 style 태그에서는 직접적인 태그 li 속성이 1순위,  id 선택자는 2순위, class 는 3순위로 적용이 됩니다.

사용자 삽입 이미지

사용자 삽입 이미지



2. 레이아웃 display 인라운, 블럭 효과


특정한 텍스트등의 레이아웃을 표현하기 위해서 display 태그를 사용하게 되며 속성으로 inline 를 부여하게되면 컨텐츠만큼만 효과를  부여하게 되고 display block 속성을 사용하게되면 화면 전체를 쓰게 됩니다.

사용자 삽입 이미지

사용자 삽입 이미지


3. 박스모델 속성들


레이아웃을 만드는데 중요하게 사용되는 박스모델로 padding 태그는 컨텐츠의 여백의 간격을 조절할수가 있으며, margin 태그는 컨텐츠 간의 간격을 주게되며 width 는 컨텐츠의 넓이를 조절할수가 있습니다.

사용자 삽입 이미지

사용자 삽입 이미지


지금까지 우선 순위로 적용되는 css 속성, 레이아웃 display inline 속성과 block 속성의 효과, 박스모델에서의 padding 속성과 margin 속성에 대해서 알아보았습니다. 중요도가 매우 높은 속성들인만큼 꼭 기억해 두는것이 좋습니다.

2022/06/18 10:59 2022/06/18 10:59
받은 트랙백이 없고, 댓글이 없습니다.

댓글+트랙백 RSS :: http://www.weddingamor.co.kr/rss/response/9

댓글+트랙백 ATOM :: http://www.weddingamor.co.kr/atom/response/9