개발 공부 5일차
(몇일 밀려쓰는 5일차 일기)
책과 인터넷보고 하나씩 따라하길 4일.
갑자기 신랑이 알려준 css ㅇㅅㅇ..
웹페이지 하나 열어주고 똑같이 만들으란다....
도저히 뭐부터 시작해야 하는지도 모르겠고 아는 태그라고는 없고
어떤 식으로 진행되는지 모르겠고 멘붕....
결국 신랑이 예를들어 뚝딱 만들어 보여줬고
신랑이 한 것과 검색으로 비슷하게 흉내라도 내봤다.
물론 스스로 검색해서 배워야 한다는건 알았지만
정말 아무것도 1도 모르기에
좀더 세세히 알려줄줄 알았던 신랑은 날 강하게 키우려했다.
css가 엄청 중요하다고 했다.
<div> 를 사용해 class 사용법까지 한번에 몰아치니 어리둥절
css는 html에 스타일을 입힌다고 생각하면 쉽다고 했다.
html로 '안녕'이라는 글씨를 쓴다면
css로 '안녕'의 글자색이나 크기 모양 등등을 설정한다.
신랑이 뚝딱 만든 것.
내가 따라만든 것
이런식으로 <body>에 필요한 텍스트나 이미지를 넣고
<body>
<h3>HOT item</h3>
<div class="card">
<img class="thumnail" src="http://i.011st.com/ex_t/R/150x150/1/85/1/src/pd/18/1/3/6/4/0/7/qRcBC/1954136407_L300.jpg">
<p class="title">여성/남자/면반팔/라운드/티셔츠/커플/빅사이</p>
<p class="price"> 9,900원 ~</p>
</div>
</body>
<head>부분에 <style> 을 만들어준다.
<style>
.card {
float: left;
width: 134px;
padding: 8px;
background-color: white;
}
.title {
font-size: 14px;
color: black;
}
.price {
font-size: 14px;
font-weight: 700;
text-align: left;
}
.thumnail {
width: 150px;
height: 150px;
margin-top: -8px;
margin-left: -8px;
}
.card:hover {
border: 1px red solid;
padding: 8px;
}
.card:hover .title {
text-decoration: underline;
}
</style>
class 로 묶어 원하는 스타일을 넣어줄 수 있다.
이 부분은 다음에 더 자세히 포스팅해봐야겠다.
'개발공부 > HTML' 카테고리의 다른 글
| 개발공부 4일차 - 1.html 텍스트 정렬하기(가운데정렬, 왼쪽정렬, 오른쪽정렬) (2) | 2018.05.31 |
|---|---|
| 개발공부 3일차 -2. html style(배경색, 텍스트 색상, 글꼴, 크기 바꾸기) (0) | 2018.05.30 |
| 개발공부 3일차 -1. html 줄바꿈 <br><pre> (0) | 2018.05.30 |
| 개발공부 2일차 - 2. html 주석달기(comment) (0) | 2018.05.29 |
| 개발공부 2일차 -1.html 목록만들기<ul><ol><li> (0) | 2018.05.29 |