공부를 하다보니 css를 활용해서 웹 페이지를 꾸미기에는 참 끝도 없는 것 같다.
html로 만든 웹 페이지는 칙칙하게 글자도 검정색만 가능하고, 정렬도, 간격도 다 맞추기 힘든데 css를 이용하니 화려하게 변했다.
아직 공부해야 할 부분이 많이 있지만 그것들은 더 공부하면서 차차 보기로 하고,
오늘은 프리캠프에서 사용한 css, 그리고 아직은 볼품없지만 자기소개 페이지를 만들면서 사용한 css들을 조금씩 정리하며 포스팅해 봐야겠다.
CSS의 기본
ascading Style Sheets 의 약자이다.
앞서 공부했던 HTML이 몸체로서 정보의 구조화를 담당한다면 CSS는 단어 그대로 스타일링을 담당한다고 볼 수 있을 것 같다.
HTML과 CSS는 각자의 문법을 갖는 별개의 언어이고, HTML은 CSS를 포함할 수 있다.
선택자, 속성, 속성값
h1 { color: red; font-size: 12px; }
h1: 선택자 (셀렉터) 이며, html 의 요소를 선택할 수 있다. (html의 모든 h1 요소를 선택함){}: 선언블록으로 선택자 뒤에 삽입하여, 속성과 값을 선언할 수 있다.color , font-size: 속성으로, 표준 스펙으로 이미 지정되어있는 것을 사용해야한다. 속성마다 (;) 세미콜론을 붙여야하며, 이 것으로 속성과 속성을 구분할 수 있다.red, 12px: 속성값으로, 속성에 해당하는 값을 입력해준다.
이것들을 다 묶어서 Rule Set 이라고 하며, 이 Rule Set의 집합을 스타일시트(style sheet) 라고 한다.
HTML과 CSS 연동
1. Inline Style
<h1 style="color: red; font-size: 15px;">My Velog</h1>
간단한 css 정보라면 굳이 스타일 시트를 만들지 않고, 직접 입력하여 적용시킬 수 있다.
<@ style:"속성: 속성값;"> </@> 으로 입력한다.
입력한 속성이 하나라면 세미콜론(;)으로 마무리를 하지 않아도 작동하지만, 두개 이상이 되었을 경우엔 세미콜론으로 나누어주지 않으면 작동하지 않기때문에, 항상 세미콜론을 붙이는 습관을 들여야한다.
2. Embedding Style
<style> h1 { color: red; } p { background-color: blue; } </style>
html 문서 내에 css를 포함시키는 방식으로, <style> 과 </style> 로 감싼 후 css 코드를 입력해준다.
3. Link Style
<head> <link rel="stylesheet" href="css/style.css"> </head>
별도의 css 파일을 만들어 html로 불러오는 방식으로, 가장 일반적으로 사용되며, 지정해놓은 스타일을 여러 html 파일에서 사용할 경우 유용하다.
사용 css 정리
html, body { height: 100%; width: 100%; }
html과 body 태그의 높이와 넓이 100%
- 여기서 짚고 가는 크기의 단위:
- px : 픽셀
- % : 상대적 백분율
- em : 요소의 글꼴 크기
- rem : 루트 요소(html)의 글꼴 크기
- vw : 뷰포트 가로 너비의 백분율
- vh : 뷰포트 세로 너비의 백분율
body{ background-color: #efe7e3; }
배경색을 정한다.
.frame{ margin: 30px 150px; display: flex; flex-direction: column; }
- margin(외부여백은 top부터 시계방향으로 돌아간다.):
- 10px (top, right, bottom, left) : 사방으로 10px씩
- 10px 20px (top, bottom) (right, left) : 상 하 10px / 좌 우 20px
- 10px 20px 30px (top) (right, left) (bottom) : 상 10px / 좌 우 20px / 하 30px
- 10px 20px 30px 40px(top) (right) (bottom) (left) : 상 10px / 우 20px / 하 30px / 좌 40px
flex 는 내용이 길어질 것 같으니 다음에 정리하는 것으로 해보자..
.nav_menu{ font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 16px; }
- font-family : 글자체를 지정한다. 여기서는 Montserrat으로 했다.
- font-weight : 글자의 굵기를 지정한다. 굵게 하고 싶을 땐 값을 올리거나 bold;를 입력한다.
- font-size : 글자의 크기를 지정한다. 위에서 나온 단위를 사용한다.
a { color:grey; } a:hover{ color: white; transition: 0.5s; }
- color : 글자색을 지정한다.
- a:hover{color} : 마우스를 a태그 위에 올렸을 때 색깔을 바꾼다.
- a:hover{transition} : 마우스를 a태그 위에 올렸을 때 변하는 속도를 조정한다.
.photo1{ width: 300px; height: 300px; border-radius: 70%; overflow: hidden; margin: 0 50px 0 0; box-shadow: 5px 5px 10px grey; }
- border-radius : 300px, 300px 크기의 사각형 모서리를 둥글게 만든다. 70%로 설정할 경우 원으로 만들수 있다.
- overflow : 안에 사진을 넣었는데 지정해놓은 photo1 보다 커서 넘어가는 부분에 대해 조정할 수 있다. 이 경우엔 hidden을 써서 안 보이게 가렸다.
- box-shadow : 단어 그대로 박스에 그림자를 설정할 수 있다.
