본문 바로가기

Front-end/CSS

(9)
[CSS] float 속성과 clear 속성 float는 요소를 붕 띄워서 왼쪽으로 정렬하게끔 해주는 속성이다. 예를 들어 과 같은 화면을 만들고자 할 때 html 코드가 이고 CSS 코드를 .container_wrapper { width: 800px; } .header { width: 100%; height: 50px; background: aquamarine; } .left_container { width: 20%; height: 400px; background: cornflowerblue; } .right_container { width: 80%; height: 400px; background: coral; } .footer { width: 100%; height: 100px; background-color: grey; } 이렇게만 쳤을 때 ..
[CSS] 글자 스타일링 방법 1. 자간 조절 - letter-spacing: 1px; 2. 스타일이 겹칠 경우 - html 코드 안의 style 속성 > id > class > tag 순으로 적용됨
시멘틱구조 태그 내비게이션 메뉴 : 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼
Flex, Justify Content flex-direction : row; > 왼쪽에서 오른쪽으로 : row-reverse; > 오른쪽에서 왼쪽으로 : column > 위에서 아래로 : column-reverse; > 아래에서 위로 flex-wrap: nowrap; > 화면이 줄어들어도 줄바꿈 x flex-wrap: wrap; > 아이템이 한 줄에 꽉 차게 되면 자동적으로 다음 라인으로 넘어감 flex-wrap: wrap-reverse; > 공간이 없을 때 위로 올림 flex-flow: column nowrap > flex-direction을 한 번에 작성할 수 있음 justyfy-content : flex-start; (아이템을 어떻게 배치할 건지를 결정해 줌) > 처음부터 왼쪽에서 오른쪽으로 : flex-end; 오른쪽 축으로 아이템들..
CSS 선택자 CSS Selectors Reference (w3schools.com)
margin auto auto; 와 text-align: center;의 차이점 margin auto auto; 와 text-align: center; 의 차이가 뭔가요?? | 코드잇 (codeit.kr)
ul li 태그 목록 가로 정렬 코드 ul li {list-style-type: none;}
블록 / 인라인 / 인라인-블록 레벨 요소 (계속 업데이트) 1. 블록 요소 - div, ul, li, h1-h6 태그 - block은 margin, padding, height 모두 적용 가능하나 기본적으로 width(폭, 너비 간격)이 100%로 줄바꿈이 일어난다. 2. 인라인 요소 - width, height속성은 먹히지 않고 margin, padding은 좌우 간격만 반영되며, 상하 간격은 반영이 되지 않는다. - a, button, span 태그 3. 인라인-블록 레벨 요소 - inline-block은 inline처럼 줄 바꿈 없이 한 줄로 나타나며 inline태그랑 다른 점은 width, height, margin, padding이 먹히며 레이아웃을 꾸밀 때 많이 사용이 된다. but 기본값은 언제든지 명령을 통해 바꿀 수 있다.
CSS 선택자 1. 전체 선택자 : 모든 HTML 문서를 선택해 스타일을 적용해 줌, * 기호 사용 *{ } * { } 2. 아이디 선택자 : 모든 태그 요소 중 특정 아이디 하나를 선택할 때 사용, 중복되면 안 됨 텍스트 CSS 적용시 아이디 앞에 # 붙임 #아이디명 { } #아이디명 { } 3. 클래스 선택자 : 아이디와 비슷하지만 모든 태그에 사용 가능하거나 중복 가능 .클래스명{ } .클래스명 { } 4. 복합 선택자