본문 바로가기

FrontEnd/CSS3

[css] css적용 우선순위 우선순위 1. 가장 중요(!important) 모든 선언을 무시하고 가장 우선으로 적용 됨 점수: ♾pt div{ color:red !important; /*가장 우선*/ 2. 인라인 선언 방식(Style Attribute) 인라인 선언(HTML style 속성을 사용) 점수: 1000pt HELLO WORLD 3. 아이디(ID Selector) 아이디 선택자 점수: 100pt #color_yellow { color:yellow; } 4. 클래스(Class Selector) 클래스 선택자 점수: 10pt #color_green { color:green; } 5. 태그(Type Selector) 태그 선택자 점수: 1pt span { color: blue; } 6. 전체(Universal Selector).. 2021. 6. 2.
01. [CSS] 블록 요소, 인라인 요소 ▪ 블록 요소 종류 : DIV, H1, P 사용 가능한 최대 가로 너비를 사용 크기를 지정할 수 있다. 생성 시 시작 사이즈 : width: 100%; height: 0; 수직으로 쌓임 ⬇ margin, padding 위, 아래, 좌, 우 사용 가능하다. 레이아웃을 잡는 용도로 활용 ▪ 인라인 요소 종류 : SPAN, IMG 안에 내용이 없으면 영역이 생성되지 않음 (필요한 만큼의 너비만 사용 한다.) 크기를 지정할 수 없다. 수평으로 쌓임 ➡ 생성 시 시작 사이즈 : width: 0; height: 0; margin, padding 위, 아래는 사용 할 수 없다. 텍스트를 작업하는 용도로 활용 줄 바꿈시 띄어 쓰기가 생김 SPANSPANSPAN SPAN SPAN 블럭요소 ↔ 인라인 요소 변경 /* 블록.. 2021. 4. 22.
[CSS] flex속성 flex?🤑🚗💰💲🛫💶 flex는 html의 요소중 한 줄에 들어갈 수 없는 요소들을 한 줄에 들어갈 수 있게 해주는 속성 중 하나이다. display의 속성이 block으로 설정된 요소는 한줄에 들어갈 수 없다. 사용법 한줄로 만들고 싶은 요소에게 속성을 부여하는 게 아니고 그 요소를 품고 있는 부모에게 속성을 부여하는 것이다. 즉 div에게 flex의 효과를 주고 싶으면 div를 품고 있는 부모 body에 속성을 추가해주어야 한다. flex는 몇가지 속성으로 또 수정이 가능하다 속성 기능 justify-content 주축( ㅡ )의 정렬 속성 align-itmes 교차축( | )의 정렬 속성 flex-direction 요소들을 가로로 나열 할지 세로로 나열 할지 결정 하는 속성 flex-wrap 브라우.. 2021. 1. 20.

티스토리툴바