[CSS] 가운데 정렬 (text-align, margin)
·
Web/FrontEnd
text-align : center는 자손뿐 아니라 후손까지 모두 center라서 블록 모양뿐 아니라 속에 담긴 글짜까지 모두 가운데 정렬된다. 따라서 보통의 경우 margin: 0 auto 를 사용한다. 상->우->하->좌 시계방향 순서대로 숫자 4개가 나열되나 0은 상하 0, 좌우 auto 로 마진을 두어 가운데 정렬이 되게하는 방법이다. 매우 자주사용. 0 auto=> 상단, 하단 여백 X auto => 좌측과 우측의 여백을 자동으로(auto) 부여 text-align: center margin: 0 auto
Bootstrap 시작하기.
·
Web/FrontEnd
1. What's bootstrap? 트위치 홈페이지의 프론트엔드 디자이너들이 만들어 놓은 웹 개발 디자인 프레임워크 2. 구성 HTML CSS 대표적인 예로 자주쓰이는 것이 navbar (네비게이션 바) 3. 적용하기 위해 필요한 파일들 bootstrap.css jquery popper.js ※ bootstrap 4.0 버전부터 popper.js 포함이 필수가 되었다. 파일을 직접 로컬에 다운받아서 포함시켜도 되고 외부링크를 걸어도 좋다. ※ min이 붙으면 Minified version 으로 파일 용량을 최소하 하기위해 압축한 파일이란 뜻. 붙지 않으면 당연 Uncompressed file [외부 링크 사용 예시] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Hello, world! H..
스타일 적용 우선순위 & n-th selector
·
Web
[CSS] 적용 우선 순위 Inline > Internal > external style 순 Inline IDs Internal external style="color: #ffffff;" #id { color: #ffffff } a:hover { color: #ffffff } div, h1, :before, :after 두 가지 같은 등급시 가장 마지막으로 적용한 것이 우선순위 高 특정도 계산식 존재 specify 특정도가 높을 수록 우선순위 高 nth-child() 특정 n번째 있는 요소 선택자 :nth-child(an + o) o: offset 상수 n의 시작점은 0, 1, 2 ... a, o 는 정수만 가능. [Reference] https://www.w3schools.com/cssref/sel_n..
[CSS] position 설정시 유의점
·
Web
[문제 상황] 부모태그가 공간을 차지하지 못하고 자식이 부모 공간을 무시. text-align.html Button CSS 노가다 리얼루다가 홍콩가버려 얘는 정렬 되는데 ? H2 터줏대감 df ㅇㄹ ㄹㅇ ㅁㄴ H2 아래대감 text-align.css .font_big{ font-size : 2em; } .font_italic{ font-style: italic; } .font_bold{ font-weight: bold; } .font_center{ text-align: center; font-family: 'Malgun Gothic'; } /* css에 먼저 정의된 순서중 가장 먼저 선언된 것이 나옴. */ .box{ width: 100px; height: 100px; position: absolute;..