1) 학습한 내용
margin,padding
margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미한다. margin과 padding는 border 을 경계로 나뉜다. 각 요소간의 보더 간격을 margin , 보더와 요소와의 간격을 padding 이라고 한다.
방향
방향마다 여백을 다르게 설정할 수 있다.
- margin: 20px 같은 표현은 상하좌우 모두 20px을 의미한다
- margin: 30px 10px은 상하 30px, 좌우 10px을 의미한다.
- margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미한다.
- margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미한다.
방향의 위부터 시계방향으로 회전하여 위 오른쪽 아래 왼쪽 순서로 설정한다.
margin,padding 속성Box-sizing
box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정한다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다. box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있다.
<!doctype html>
<html>
<head>
<style>
*{
box-sizing:border-box;
}
div{
margin:10px;
width:150px;
}
#small{
border:10px solid black;
}
#large{
border:30px solid black;
}
</style>
</head>
<body>
<div id="small">Hello</div>
<div id="large">Hello</div>
</body>
</html>Box-sizing의 예시
2) 학습내용 중 어려웠던 점
CSS는 배우는 것은 명령문을 익히는 것과 같은 것이다.
3) 해결방법
계속해서 반복해서 작성하는 것 뿐만 아니라 직접 찾아봐서 적용시켜야 하는 것이다.
4) 학습소감
CSS 수업을 통해서 알게 된것은 홈페이지의 구성은 HTML과 CSS로 이뤄져 있다는 것이다. 그런데, 이것은 웹디자인 쪽에 가까운 축에 불과한 것이기에 웹 디자이너에 해당되고 프로그래머라면 자바스크립트, 장고, 리액트, node.js와 같은 백엔드를 배워야 한다. 프론트엔드를 배우는 것은 백엔드를 배울 때, 도움이 되며 백엔드를 익히면 풀스택에 들어갈 수 있게 된다.
coding
0개의 댓글
관련 채용 정보
