오늘은 CSS박스모델이라는 것을 실습해보겠습니다.
1. box.html이라는 파일을 생성하여 기본 html을 세팅합니다.
2. <h1>CSS</h1>을 입력하여 제목 태그를 지정해줍니다.
그러니까 CSS부분만 남기고 줄바꿈이 됩니다. 즉 줄 전체를 쓰고 있다는 뜻입니다.
왜냐하면 제목 태그는 화면 전체를 쓰는 것이 더 편리하기 때문입니다.
3. CSS 제목 부분을 테두리로 둘러싸보겠습니다.
<style>
h1{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>
테두리 두께
테두리 컬러
테두리 스타일 (단선)
이라는 뜻입니다.
4. 이번에는 하이퍼링크 처리한 "스타일"부분을 똑같은 태그로 지정해보겠습니다.
a{
border-width:5px;
border-color:red;
border-style:solid;
}
로 h1태그부분과 똑같이 태그를 입력했는데도 박스크기가 웹페이지에 나타납니다.
그 이유는 비록 생략이 되었으나 <h1></h1> 제목 태그는 화면 전체를 필요로 하는 block level element 태그 요소이고, <a></a> 하이퍼링크태그는 자기 자신의 컨텐츠크기만큼을 필요로 하는 inline level element 태그 요소이기 때문입니다.
바꿔말하면
<a></a>태그 안에
display:block;
속성을 입력하면 "스타일"부분도 제목 태그처럼 줄 전체를 차지하게 됩니다.
5. 다시 원래의 상태로 돌려놓아보겠습니다.
<style></style>안에 중복되어 입력된 부분이 거슬립니다.
중복된 부분을 제거하여 효율적으로 나타내보도록 하겠습니다.
<style>
h1,a{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>
라고 입력해도 웹페이지의 결과는 같습니다.
이렇게 ,(쉼표)라는 선택자를 통해 코드의 양을 획기적으로 줄일 수 있습니다.
하지만 여전히 border부분이 세 번 쓰였듯이 중복이 존재하고 있습니다.
이 부분도 효율적으로 나타내보겠습니다.
<style>
h1,a{
border:5px solid red;
}
</style>
라고 입력하면 훨씬 간결하게 같은 내용을 나타낼 수 있습니다.
5px solid red의 순서는 상관이 없습니다.
6. 이제 모든 것을 삭제하고 CSS제목 부분만 나타내보겠습니다.
1)제목 부분에 여백을 줘보겠습니다.
<style></style>안에
padding:20px;
를 입력했더니 웹페이지에 여백이 생겼습니다.
2)이번에는 CSS제목을 두 개로 해보겠습니다.
<body></body>안에
<h1>CSS</h1>을 하나 더 입력했더니 웹페이지에 똑같은 내용이 한 줄 더 나타났습니다.
3) 이 둘 사이의 간격을 없애보겠습니다.
margin:0;
이라는 속성을 입력했더니 제목 사이의 간격이 없어집니다.
4) 이번에는 빨간색 박스부분의 크기를 줄여보겠습니다.
width:100px
를 입력하면 빨간 상자의 크기가 그만큼 줄어든 것이 보입니다. 하지만 그 위에 display:block;속성이 있어 화면 전체를 쓰고 있습니다.
7. 하지만 이 태그들이 영어로 되어있고 많기 때문에 일일이 암기하기가 쉽지 않습니다.
그래서 구글에 가서 CSS box model을 입력하여 검색합니다.
이렇게 각각의 속성들이 무엇을 뜻하는지 알 수가 있습니다.
8. 웹페이지로 돌아가서 태그와 속성이 어떻게 구성되어있는지 알아보는 방법을 보겠습니다.
오른쪽 마우스를 클릭하여 맨 밑에 검사로 들어갑니다.
이렇게 모형의 층층마다 같은 색깔로 나타내어 속성값이 무엇을 뜻하는지 나타내줍니다.
'To go to 뉴질랜드 > 간식 - IT(코딩)' 카테고리의 다른 글
| 그리드의 기본 사용법 (0) | 2021.02.20 |
|---|---|
| BOX model을 이용하여 웹페이지 디자인하기 (0) | 2021.02.14 |
| TEXT SIZE(크기), ALIGN(정렬) 및 CLASS, ID 속성 위계관계 (0) | 2021.01.30 |
| 동영상 삽입/CSS시작 (0) | 2021.01.24 |
| 웹호스팅을 해보려고 하다.(모르겠다ㅠㅠ) (0) | 2021.01.23 |
