레이아웃을 구성하는 CSS 박스 모델
블록 레벨 요소
요소를 삽입했을 때 혼자 한 줄을 차지하는 요소
요소의 너비가 100%이다.
예) <div> , <p> 등
<h1>시간이란</h1>
<div>내일 죽을 것처럼 <p class = "accent"> 오늘 </p>을 살고</div>
<p>영원히 살 것처럼 <br>내일을 꿈꾸어라.</p
인라인 레벨 요소
줄을 차지하지 않는 요소
화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음.
예) 등
<h1>시간이란</h1>
<div>내일 죽을 것처럼 <span class = "accent"> 오늘 </span>을 살고</div>
<p>영원히 살 것처럼 <br>내일을 꿈꾸어라.</p>
박스모델
실제 콘텐츠 영역, 패딩, 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨
width, height 속성
실제 콘텐츠 영역의 크기 지정
크기 : 값을 px이나 em 단위로 지정한다. (웹 브라우저 창을 줄여도 바뀌지 않는다.)
백분율 : 박스 모델을 포함하는 부모 요소를 기준으로 백분율(%)로 지정합니다.(웹 브라우저 창에 따라 크기가 변한다.)
auto : 박스 모델의 width, height이 콘텐츠 양에 따라 자동으로 결정됩니다.(기본값)
box-sizing 속성
실제 박스 모델의 너비를 계산할 때 어디까지 포함할지 결정하는 속성
border-box : 테두리까지 포함해서 너빗값을 지정한다.
content-box : 콘텐츠 영역만 너빗값을 지정한다.(기본값)
box-shadow 속성
선택한 요소에 그림자 효과 내기
수평, 수직 거리는 필수이고, 나머지 속성은 옵션이다.
box-shadow : <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset
<style>
.box1 {box-shadow : 2px -2px 5px 0px;}
.box2 {box-shadow : 5px 5px 15px 5px blue;}
</style>
<h1>안녕박스야</h1>
<h1 class = "box1">안녕박스야</h1>
<h1 class = "box2">안녕박스야</h1>
박스 모델의 값 지정 방향
4개 방향의 값을 한꺼번에 지정할 때는 방향 순서를 지켜야 함
top → right → bottom → left
border-style 속성
기본 값이 none → 화면에 테두리 표시안됨
테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정
border-style : none | hidden | dashed …
border-width 속성
테두리 두께 지정
border-width: 크기값 (크기값 종류 : | thin | medium | thick)
<style>
.box1 {border-width:2px;
border-style:solid; }
.box2 {border-width: thick thin;
border-style:solid; }/*top,right만 적용됨*/
.box3 {border-width: thick thin medium;
border-style:solid; }
.box4 {border-width: 2px 4px 6px 8px;
border-style:solid; }
</style>
<h1 class = "box1">박스</h1>
<h1 class = "box2">박스</h1>
<h1 class = "box3">박스</h1>
<h1 class = "box4">박스</h1>
border-color 속성
border 속성
테두리 스타일과 두께, 색상 등을 묶어 표기
border-top이나 border-right처럼 방향을 함께 써서 4개 방향의 스타일을 따로 지정할 수 있음
순서는 상관없음.
<style>
h1{border : 3px dotted blue;}
</style>
<h1 class = "box1">박스</h1>
border-radius 속성
박스 모델의 테두리를 둥글게 처리
박스 모델의 꼭짓점 부분에 원(반지름 r)이 있다고 가정해서 둥글게 처리
border-radius: 크기|백분율
<style>
#round{border-radius: 25px;}
#circle{border-radius: 50%;}
</style>
<img id = "round" src = "images/duck.jpg",width = 300 , height = 200>
<img id = "circle" src = "images/cat.jpg",width = 300 , height = 200>
border와 radius 사이에 위치를 나타내는 예약어를 사용하면 꼭짓점마다 다르게 처리 가능
EX) border-top-left-radius : 20px;
margin 속성
현재 요소 주변의 여백
마진을 이용하면 요소와 요소 간의 간격 조절 가능
margin: 크기 | 백분율 | auto
margin 속성을 사용해 가운데 정렬이 가능하다.
배치할 요소의 너빗값이 정해져 있어야 함.
margin-left와 margin-right의 속성값을 auto로 지정
<style>
body {background-color: black;}
#container{
background-color: aliceblue;
width : 600px;
margin : 20px auto;/*위아래 마진은 20px 좌우는 자동 계산*/
}
</style>
<body>
<div id = "container">
<h1>레드향</h1>
<h5>맛있더라</h5>
</div>
</body>
마진 중첩 현상
요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐지는 것
요소를 가로로 배치할 경우에는 상관없음
padding 속성
콘텐츠 영역과 테두리 사이의 여백
마진을 지정하는 방법과 같다.
display 속성
요소의 배치 방법을 결정하며 속성 값이 매우 많다.
float 속성
요소를 문단에(박스) 관계없이 왼쪽이나 오른쪽에 떠 있게 만듦
float : left | right | none(좌우 어느 쪽으로도 배치하지 않음)
<style>
img{
float: left;
margin-right : 40px;
}
</style>
<img src = "images/cat.jpg",width = "300" , height="180">
<p>Cats are small 생략</p
clear 속성
float 속성을 무효화시키는 속성
clear: none | left | right | both
각각 해당 부분의 float를 해제하는 명령어이다.
left, right, bottom, top 속성
<style>
#pos1{
position :absolute;
left : 50px;
top : 50px;
}
#pos2{
position :absolute;
right : 100px;
top : 200px;
}
#pos3{
position :absolute;
left : 100px;
bottom : 10px;
}
</style>
<p id = "pos1">Cats are small carnivorous mammals tbehavioral characteristics.</p>
<p id = "pos2">One of the most Unlike dogs, cats are not pack animals and do not require the same level of social interaction with humans or other cats. However, cats are often very affectionate with their owners and enjoy cuddling, playing, and receiving attention.</p>
<p id = "pos3">Cats are also notor and exercise to stay healthy and happy.</p>
position 속성
웹 문서 안에 요소들을 배치하기 위한 속성
position: static | relative | absolute | fixed
CSS의 핵심
CSS는 가져다 쓰는 기술이다 . 다른 사람이 작성한 스타일을 가져와 내가 설계한 HTML 틀에 적용 하고, javascript로 반응형 웹을 만들면 된다.
