[CSS] 부트스트랩(Bootstrap) 활용
CSS의 간단한 문법을 복습해보고 CSS 꾸미기의 유용한 도구인 부트스트랩에 대해서 공부해보고자 합니다.
- <body> : 내 눈에 보이는 부분입니다.
- <div> : 구역을 나누는 태그로, 여러가지 태그들을 한번에 옮길때 묶어서 옮길 수 있습니다.
- <p> : 문단을 뜻합니다.
- <span> : 문장 중에서 특정 글자에만 무언가를 효과주고싶을때 사용합니다.
- <a> : 하이퍼링크를 사용할 수 있습니다. <a href="주소"/>
- <hr> : 가로선을 주는 태그
- CSS 주석처리 : <head>태그에서 /* 텍스트 */
- HTML 주석처리 : <body> 태그에서 <!-- 텍스트 -->
1. div 태그
<div>
<Button>
</Button>
</div>
>> Button의 부모태그는 div태그라고 한다.
>> 부모태그의 내용을 상속받는 것이다.
2. image 태그
이미지를 넣을때는
background-image:url("링크");
background-size:cover;
background-position:center;
3. margin 속성
margin : 5px 10px 10px 10px
속성은 위쪽, 오른쪽, 밑, 왼쪽 순이다.
(= 상 우 하 좌) (= ^ > v <) (=12시기준 시계방향)
4. 태그 한번에 옮기기, 태그 한번에 스타일 적용
ex) 전체 태그 모두 중앙 정렬
1. div로 묶어서 그 div를 옮기는 것
2. .wrap 클래스로 묶은 후
3. margin:auto;
하지만 버튼같은 경우 글 속성이므로 margin:auto; 가 정상적으로 적용되지 않는데,
이는 이 글 속성을 박스 속성으로 만들어 준후 적용해주어야 정상처리가 된다.
display:block;5. 클래스 중첩
class="a b" 처럼 띄어쓰기를 기준으로 복수를 적용해주면 됩니다.
6. style 속성 전체적용 방법
* {
color:red;
}
/* 주로 폰트 스타일을 지정해준다.*/7. style태그 파일로 분리해서 관리
style 태그는 너무 코드가 길어질 수 있기때문에 mystyle.css로 만들어서 옮긴 후 외부에서 가져올 수 있습니다.
<link rel="stylesheet" type="text/css" href = "mystyle.css">로 가져올 수 있습니다.
<파이참 단축키>
- Ctrl + Alt + L을 누르게되면 전체 코드를 정렬시킨다.
- 영역 선택후 Tab을 누르면 전체적으로 Tab이 됩니다.
- 자동완성되어있을때 Enter를 누르는 것이 아닌 Tab을 누르면 그 밑에 자동완성된 내용이 완성됩니다.
<부트스트랩이란?>
- 다양하게 사용가능한 CSS를 미리 모아둔것, 누군가가 이미 완성한 부트스트랩을 가져다 쓰기도 합니다.
<부트스트랩 - 메모장 관련 CSS>
부트스트랩 홈페이지에서 Jumbotron과 CardColumns를 이용해 메인화면을 만들 수 있습니다.
CardColumns는 Card에서 하위요소로 존재합니다.
<예시화면>
1) 부트스트랩의 Forms를 참고하여 Form을 div로 바꿔 사용하면 유용합니다.
2) text창을 늘릴 수 있는 부트스트랩 : Example textarea 참고하기
cf) 구글 검색창에 'css border w3schools' 사이트를 활용
cf) 구글 검색창에 'mdn' 공식문서 사이트 활용