210726 CodeStates 6일차

오늘은 지난주의 HTML에 이어 CSS에 대해 공부했다.

CSS(Cascading Style Sheets)

CSS는 HTML과 같은 마크업 언어가 표현되는 방법을 결정한다.(스타일을 결정한다.)
HTML이 웹 페이지의 구조를 담당한다면, CSS는 그 구조를 꾸미는 역할을 담당한다.
일반 사용자를 대상으로 하는 애플리케이션은 UI(User Interface)가 필수요소이다.
적당한 위치에 컨텐츠를 배치하는 레이아웃 디자인은 개발자라면 기본적으로 갖춰야하는 소양이다.
CSS는 .css파일에 작성을 한 후 HTML의 태그를 이용하여 .css파일을 적용시킬 수 있다.
ex) <link rel="stylesheet" href="style.css">

CSS의 기본문법은 다음과 같다.
선택자와 그 뒤의 중괄호{}안에 선택자로 선택된 HTML요소에 적용시킬 스타일을 적어준다.
선택자는 태그이름을 사용할 경우에는 HTML문서내의 같은 태그이름을 갖는 모든 태그를 선택하게 되고 HTML요소의 속성인 class,id를 이용해 특정 요소를 선택할 수도 있다.
class를 이용한 선택자로 요소를 선택하고 싶다면 .class값 형태로 선택자를 적고, id를 이용한 선택자로 요소를 선택하고 싶다면 #id값 형태로 선택자를 적는다.
ex) .wrapper{ ... wrapper라는 class을 갖는 요소를 선택}
      #wrapper{... wrapper라는 id값을 갖는 요소를 선택}

위의 사진속 코드에서 처음에 위치한 button선택자는 html문서에 있는 모든 button요소에 중괄호안의 스타일을 적용한다.
button#backward 선택자는 button요소중 id값이 backward인 요소에 괄호안의 스타일을 추가로(모든 button에 적용된 스타일에) 적용한다.

적용할 스타일의 정의는 키:값(key:value)형태로 나타낸다.
자주 쓰이는 스타일의 속성은 다음과 같다.

• color:글자의 색상을 지정한다.
• font-family:글꼴을 지정한다.
• font-size:글자의 크기를 지정한다.
• font-weight:글자의 굵기를 지정한다.
• text-decoration: 밑줄,가로줄등을 지정한다.
• text-align:가로로 정렬을 어떻게 할지를 결정한다.

Boreder-box와 Content-box

박스의 크기를 어떻게 측정하는지의 여부는 굉장히 중요하다.
기본적으로 html요소의 박스는 margin,border,padding,contents로 구성된다.

• margin: 테두리 바깥에 위치하는 요소의 외부 여백영역이다.
  margin속성을 이용해 두께를 설정할 수 있다.
• border: 테두리영역으로 border속성을 이용해 테두리의 두께,색상,형태를 설정할수 있다.
• padding: 테두리 안쪽에 위치하는 요소의 내부 여백영역이다. padding속성을 이용해 두께를 설정할 수 있다.
• contents: 요소의 텍스트나 이미지등 실제내용이 위치하는 영역이다. Width,height속성을 이용해 크기를 설정할 수 있다.

box-sizing속성은 width,height속성의 대상영역을 변경할 수 있다.
기본적으로 컨텐츠의 크기를 width와 height속성을 이용해 설정한다 했지만 이는 사실 해당 요소의 box-sizing속성의 값이 content-box이기 때문이다.
box-sizing의 속성값은 content-box와 border-box가 있으며 차이점은 다음과 같다.

• content-box: width,height속성의 값은 content영역의 너비와 높이를 의미한다.(기본값)
• border-box: width,height속성의 값은 content영역, padding영역, border영역을 포함한 영역의 너비와 높이를 의미한다.

grid layout

grid는 격자라는 뜻의 영어 단어이다.(수평선과 수직선이 교차하여 이루어진 집합)
마치 함수의 좌표평면과 같이 가로와 세로에 선을 만들고 그 선을 기준으로 요소들을 원하는 위치에 배치할 수 있는것이 grid layout이다.

먼저 grid layout으로 격자를 생성할 요소에 display:grid를 선언한다.
그리고 grid-template-columns,grid-template-rows속성으로 격자를 생성한다.

div#wrapper{
	display:grid;
    grid-template-columns:300px 300px 300px;
    grid-templates-rows: 200px 200px;
}

위와 같은 css를 적용하면
사진에 보이는 것처럼 wrapper라는 id값을 가진 영역에 점선으로 격자가 생성되고 div1~div5까지 차례로 정렬된다.
column방향(세로방향)으로는 3개의 영역(300px3)과 그 영역의 경계선인 점선 4개, row방향(가로방향)으로는 2개의 영역(200px2)과 그 영역의 경계선인 점선 3개가 격자를 이루게 된다.
grid영역 안의 grid요소 각각에 grid-column,grid-row속성을 이용하여 직접 위치를 정해줄 수도 있다.