본문 바로가기

Front-End/CSS

[CSS] display 속성(none / block / inline / inline-block) display 속성 종류1. none2. block3. inline4. inline-block1. display : nonedisplay 속성을 none으로 설정하면, 태그 자체가 보이지 않게 된다. visibility 속성을 hidden 으로 설정한 것과는 달리, 영역 자체를 차지하지 않는다.2. blockwidth는 기본적으로 화면의 100% 전부를 차지하며, width와 height 속성을 지정할 수 있다.ex) , 3. inlineblock 태그와 달리 width는 기본적으로 화면의 100% 전부를 차지하지 않으며, width와 height 속성을 지정할 수 없다.ex) 4. inline-blockblock과 inline의 중간 형태이다. width는 기본적으로 화면의 100% 전부를 차지하지 않.. 더보기
[CSS] Position(static / relative / absolute / fixed / sticky) Position 종류1. static2. relative3. absolute4. fixed5. sticky Position 속성은 도큐먼트(document) 에 요소를 배치하는 방법을 지정하고, top, right, bottom, left 속성들은 요소가 최종적으로 배치될 위치를 지정한다.1. staticstatic은 position 속성 기본값으로, document의 일반적인 흐름을 따라 배치된다. top, bottom, left, right, z-index 속성들은 static에서 아무런 효과를 주지 못한다.2. relativerelative은 상대적인 위치를 계산한다. top과 bottom 속성은 기본 위치로부터 수직 방향으로 얼만큼 떨어진 곳에 위치할 것인가를 설정하고, left와 right 속성.. 더보기
[CSS] 선택자 우선순위 CSS 선택자 우선순위특정 태그에 스타일 속성이 중복될 경우, 어떤 속성이 적용될까? CSS 선택자 우선순위에 대해 알아보자. - 1순위. 속성 값 뒤에 !important를 붙인 속성- 2순위. HTML에서 style을 지정한 속성- 3순위. id로 지정된 속성- 4순위. class로 지정된 속성- 5순위. 태그 이름으로 지정된 속성- 6순위. 상위 객체에 상속된 속성예시예시1)에서는, div 태그에 class를 주고, css 파일에서 class 선택자로 선택하여 배경을 노란색으로 설정했다. 예시2)에서는 기존 에서 id 선택자를 추가한 것이다. css 파일에서 id 선택자로 선택 후, 배경 색을 빨간색으로 설정했다. class 선택자보다 id 선택자가 더 우선순위에 있으므로 id 선택자가 설정한 배경.. 더보기

티스토리툴바