일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 리베이스
- 소스트리
- 프로그래밍
- P태그
- 부모자식태그
- 커밋
- HTML
- 깃허브데스크탑
- 자료형
- 풀리퀘스트
- 문자열
- 미디어쿼리
- 브랜치
- BR태그
- blank
- 머지
- Github Pages
- 숫자형
- 깃허브
- github
- CSS
- !DOCTYPE HTML
- vscode
- 파이썬
- java
- 리스트자료형
- 코딩
- github desktop
- meta charset
- web
- Today
- Total
홍강zone
[CSS] 박스 모델 block, inline / padding, margin, width 본문
새로운 파일을 만들어준다 html의 기본적 코드를 갖고있다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1 - CSS</title>
</head>
<body>
</body>
</html>
h1태그는 줄바꿈이 되었고
a태그는 줄바꿈이 되지 않았다.
이런 차별이 존재하는 이유는 h1태그는 제목 태그인데 제목 태그는 화면 전체를 쓰는것이 편리하기 때문이다.
</head>
<body>
<h1>CSS</h1>
마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면
<a href="https://www.boostcourse.org/">CSS</a>는
옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다.
<style>태그를 이용해 h1태그에 테두리를 적용시켜 준다.
테두리는 border
width:두께 / color:색상 / 스타일(단선,점선,실선):style
solid:단선
<style>
h1{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>
</head>
<body>
<h1>CSS</h1>
마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면
<a href="https://www.boostcourse.org/">CSS</a>는
옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다.
</body>
h1태그는 화면 전체를 사용하는 태그고/* block level element */
a태그는 자기 크기만큼을 사용하는 태그다./* inline element */
h1태그를 자기 크기만큼 쓰고 싶다면 display:inline; 을 적용시켜주고
a태그를 화면 전체를 사용하고 싶다면 display:block; 을 적용시켜준다.
<style>
h1{
border-width:5px;
border-color:red;
border-style:solid;
display:inline;
}
a{
border-width:5px;
border-color:red;
border-style:solid;
display:block;
}
</style>
a태그도 같이 적용시켜주고 싶다면 스타일 태그안에 똑같이 길게 적을 필요없이
h1,a{}
콤마를 찍어주면 된다.
<style>
h1,a{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>
</head>
<body>
<h1>CSS</h1>
마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면
<a href="https://www.boostcourse.org/">CSS</a>는
옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다.
</body>
border 또한 중복이기 때문에
border:5px solid red;
순서는 상관없다.
<style>
h1,a{
border:5px solid red;
}
</style>
</head>
<body>
<h1>CSS</h1>
마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면
<a href="https://www.boostcourse.org/">CSS</a>는
옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다.
</body>
테두리와 내용 사이에 간격을 넓히려면
padding:20px; 을 적용해준다
똑같은 내용 2줄이 있으면 테두리와 테두리간의 간격이 생기는데 이 간격을 없애려면
margin:0; 을 적용해준다.
h1은 화면 전체를 사용하기 때문에 테두리상자가 큰데 이것을 줄이려면
width:100px; 값을 적용해준다.
구글 이미지 검색에서 css box model을 구글링하면 유용하다.
web페이지에서 우클릭-검사를 누르면 개발자 도구가 나와 분석을 할 수 있다.
'CSS' 카테고리의 다른 글
[CSS] 그리드 사용하기 (0) | 2023.03.27 |
---|---|
[CSS] 그리드(grid)의 기본 (0) | 2023.03.27 |
[CSS] Tag와 .class선택자 #id선택자 우선순위 (0) | 2023.03.26 |
[CSS] 모든 h1태그를 크게,가운데 정렬 하는 방법, 구글링 하는 방법 (0) | 2023.03.26 |
[CSS] 웹페이지 안에 CSS를 삽입하는 방법 <style>태그와 속성, 밑줄치는 CSS (0) | 2023.03.26 |