님들 ㅎㅇㅎㅇ
HTML 기초 사용법 글 쓰고 나서 겜 몇판 하고 왔습니다 ㅋ 이게 또 사람이 쉴 땐 쉬어줘야 능률이 오르죠(저는 하도 많이 쉬어서 극한의 능률입니다).
오늘은 CSS 기초 사용법을 배워볼게요? 근데 이거는 그냥 개쉬워가지고 저번 HTML 기초 사용법에 비해 훨씬 더 양이 적을겁니다.
일단 저번 글에서 썼던 코드 그대로 들고와봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="main.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<div style="width: 500px; height: 500px; background-color: red"></div>
<h1>스폰지밥!</h1>
<h2>넌 해고야!!</h2>
<p>사랑해요~</p>
<img src="photo/apple.jpg" />
</body>
</html>
이렇게 썼었군요! 이거는 이제 CSS 사용하지 않고 only HTML로 만든 코드입니다. 이렇게 페이지 만들면 이제 뼈대만 만들어서 내는 겁니다.
그냥 이 새기인 겁니다. 인간적으로 너무 뼈다귀잖아요. 이제 살을 붙여봅시다. 하나 하나 볼게요.
일단 div부터 봅시다. 당장은 style을 이용해서 살을 html에서 붙여놨어요. 이 역할은 사실 CSS가 하는 겁니다.
일단 main.css라는 파일을 만들어봅시다. 참고로 위 코드 보면
<link href="main.css" rel="stylesheet" />저거 보이시죠? 저게 main.css 쓴다! 이런 코드라고 생각하시면 돼요.
우리 지금 div에 width, height, background-color를 줬는데, 이거 다 지우고 그대로 css에서 써봅시다. main.css에 가서
div {
width: 500px;
height: 500px;
background-color: red;
}이렇게 써보고 저장한 다음에 live server를 켜서 확인해봅시다. 똑같이 적용이 잘 되죠? 이래 쓰시면 됩니다.
자, 근데 여기서 이제 또 셀렉터를 배워야겠네요. 생각해보니까 CSS 사용법 설명하려면 셀렉터도 설명해야돼서 HTML 기초사용법보다 복잡한데, 제가 더 쉽다고 개구라를 쳤네요. 의도적으로 친건 아니고, 쓰다 보니 생각난거니까 용서하십쇼.
지금 보면 div{~} 이렇게 써놨잖아요. 이러면 이제 뭐냐! 그 index.html에 있는 모든 div들에 다 적용을 한다 이겁니다. 그러면 내가 다른 div들을 막 만들어도 다 저게 적용돼요. 근데 일반적으로 그렇게 디자인을 안하죠..?
<h1>이거 보는 님들의 신체 스펙</h1>
<div>머리통</div>
<div>몸</div>div {
width: 500px;
height: 500px;
}이렇게 하면 여러분들 머리통도 500px, 몸도 500px. 1등신이시네요? 이러면 안되겠죠 당연히?
(설마 이렇게 생기시진 않으셨죠?)
그래서 보통은 이렇게는 안합니다. 나중에 배우겠지만, box-sizing: border-box 라는 성질이 하나 있는데, 이 친구는 보통 div에 쓰는게 국룰이거든요? 그래서 이렇게 뭔가 국룰처럼 다 쓰는 경우에서만 쓰는게 좋아요.
뭐 비슷한 예시로 만약에 내가 어떤 웹페이지를 만드는데, 컨셉 컬러가 초록색이라서 폰트를 다 초록색으로 하고 싶다 한다면 뭐
p {
color: green;
}이런식으로 해두면 되겠죠. 이럴 때 쓰는 겁니다.
보통은 id나 class를 씁니다. tag라고 있긴한데, 얘는 잘 안쓰니까 일단 pass. 어떻게 쓰는거냐...
<h1>이거 보는 님들의 신체 스펙</h1>
<div class="small-head">머리통</div>
<div class="sexy-body">몸</div>이렇게 씁니다. 보통 class를 많이 쓰거든요? 요렇게 태그 옆에 class="작명" 이렇게 해주면 돼요.
그러고 이제 main.css에 가서
.small-head {
height: 10px;
}
.sexy-body {
height: 500px;
}이렇게 해주시면 됩니다. 아까 div는 그냥 div{~} 이렇게 했는데, 클래스의 경우에는 앞에 .을 붙여줘야 해요.
참고로 head 대신에 small-head, body 대신에 sexy-body를 쓴 이유는 이미 head랑 body라는 태그 이름이 있어서 헷갈릴까봐 쓴 겁니다. 절대 제가 소두에 상체가 섹시해서 저렇게 쓴 건 아닙니다.
저는 여러분들과 다르게 css를 쓸 줄 알아서 이렇게 헬창 몸이 된 것을 볼 수 있습니다. 여러분들도 이런 몸이 되고 싶으면 css를 열심히 공부합시다.
어쨌든 저렇게 하면 이제 적용이 됩니다. 다시 원래 소스로 돌아가서 수정해봅시다.
<div class="test"></div>이렇게 class를 하나 넣어준 다음에
.test {
width: 500px;
height: 500px;
background-color: red;
}이렇게 해주면 이제 똑같이 적용이 됩니다. 이러면 아까처럼 div 전체에 적용되는게 아니라 test라는 클래스를 부여받은 요소들만 적용이 되는겁니다. 이해가 아주 야무지게 되죠? 제가 설명을 잘해서 그래요 ㅋㅋ
참고로 id를 쓰신다면 id="작명" 이렇게 한 다음에 css 파일에서는 . 대신에 #을 붙여주시면 됩니다. 이 class랑 id를 셀렉터라고 해요. 간지나게 영어로 selector라고 합시다. 어디가서 설명할때 그 class랑 id랑 어쩌구~ 이러지 말고 uhm... selector~~ 이렇게 말합시다. 모든 남자/여자 분들이 반할겁니다.
이제 한번 나머지 h1, h2, p에도 css로 디자인을 좀 넣어줍시다. 자유롭게 넣으시면 됩니다. 참고로 글씨 크기는 font-size, 색깔은 color, 글씨체는 font-family를 쓰시면 됩니다. 이외에도 많은데, 이쯤에서 또 설교 들어갑니다. 틀니 압수 준비하세요.
사실 설교는 아니긴 한데, 그런게 있습니다. 저 css에서 보면 뭐 font-size, color, background-color, font-family, 등등 진짜 구라 아니고 한 10 무량대수 정도는 있을겁니다(네 과장입니다). 근데 이걸 어떻게 다 외웁니까? 저도 솔직히 다는 몰라요(그래도 전 워낙 고수라서 한 0.0002% 정도 알겁니다). 우리가 영어 공부한답시고 세상에 있는 모든 영단어를 다 외우진 않잖아요? 그런겁니다.
그래서 이 css로 스타일링 할 때는 항상 구글링 해가면서 직접 찾으시는 걸 추천합니다. 물론 대황pt로 찾으면 더 빠르지만, 구글링도 나름의 능력, 실력이라고 생각해서 구글링하면서 찾아보는걸 추천할게요. 나중에 입사하셔도 또 막 열심히 찾으실텐데, 입사하셔서 대황pt 쓰긴 좀 눈치보이잖아요 아무래도.
항상 이렇게 구글링을 사용해서 찾아주도록 합시다. 물론 정말 자주 쓰이고 중요한 것들은 외우는게 좋지만, 걔네는 어차피 너무 자주 써서 알아서 외워질겁니다.
오늘은 여기까지 할게요. 개힘들어서 더 못하겠습니다. 궁금한거 댓글로 알려주시면 제가 수명이 다하기 전까진 답변해드립니다.
