#8. CSS 활용

공부를 하다보니 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 : 단어 그대로 박스에 그림자를 설정할 수 있다.

Author And Source

이 문제에 관하여(#8. CSS 활용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ggwnag/9.-CSS-활용

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)