CSS
웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다.
하나하나 속성을 지정해줘야 하는 HTML과 달리 요소 단위로 한꺼번에 내용과 디자인을 변경해줄 수 있다.
기본 구조는 <style> </style> 태그에 스타일을 지정할 요소와 속성, 속성값을 작성하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<style>
*,
html,
body {
margin: 0;
padding: 0;
}
#wrap {
width: 1024px;
margin: 0 auto;
border: 1px solid black;
font-size: 0;
}
#box1 {
width: 200px;
height: 100px;
}
#box1-1 {
width: 200px;
height: 100px;
background-color: green;
}
#box2 {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
#box3 {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
}
</style>
</head>
<body>
<div id="wrap">
<div id=box1>
<div id=box2></div>
<div id=box3></div>
</div>
<div id=box1-1></div>
</div>
</body>
</html><style> 태그는 head 태그에 작성하게 되며, 작성 방식은 [요소] { 속성 : 속성값; }과 같다. 요소는 위 코드에 작성한 body 처럼 태그를 기준 삼아도 되고, #wrap 처럼 특정 요소를 선택하는 선택자를 활용할 수도 있다. 주요 선택자는 # (id), .(class) 등이 있다.
자주 사용하게 되는 속성은 width와 height, margin과 padding이 있다.
width와 height는 너비와 높이를 결정짓는 속성으로, 반드시 단위를 주어야한다. 보통 px과 % 단위를 많이 사용한다.
margin은 해당 요소의 바깥으로 여백을 주는 속성이며 padding은 반대로 해당 요소의 내부로 여백을 주는 속성이다.
위 코드의 첫 문단에서 *,html,body 태그의 마진과 패딩을 0으로 잡고 시작했다. css를 공부하며 느꼈지만 내가 설정하지 않았던 마진과 패딩이 기본으로 적용된 곳이 많아 원하는 디자인이 안나오는 경우가 많았으므로, 저런식으로 마진과 패딩을 없애고 디자인을 시작하는게 좋았다.
wrap이라는 id를 가진 div는 가벼운 테크닉이라고 강사님이 알려주셨다. 레이아웃을 wrap으로 미리 잡아두는게 좋다고 하셨는데, 그렇지 않다면 웹페이지 전체를 기준으로 잡고 디자인을 해야하기 때문에 애로사항이 많다고 하셨다.
마지막으로 box div의 display 속성이 중요했다. 정렬 방법을 나타내는 속성으로, 대표적으로 block, inline, flex가 있다. block은 요소가 세로로, inline은 요소가 가로로 배치되도록 하는 속성이다. 명확히 이해한 바로는 block 속성을 가진 요소는 기본적으로 \n을 가지고 있고, inline 속성을 가진 요소는 \n을 가지고 있지 않다. 그래서 해당 속성의 요소 다음에 오는 요소의 배치가 결정된다.
flex 속성은 특이하게 해당 요소 내부의 자식들에게 영향을 미치는 속성이다. flex 속성을 가진 요소의 자식들은 가로로 배치된다.
div는 기본적으로 block 속성을 가진 요소다. 위 코드에선 강제로 inline-block 속성을 주어 가로로 배치하되 더이상 배치할 수 없다면 다음줄로 넘어가는 특성을 겸비했다.
