CSS3 속성1
* 이 게시물은 HTML5 웹 프로그래밍 입문 3판-한빛 아카데미 책을 기반으로 작성됩니다*
* 스스로 공부하고 복습하는 개념으로 정리하는 것이기에 부족한 부분이 있을 수도 있습니다!*
1. 박스 속성
css에서는 각 요소가 박스라는 사각 영역을 생성하고, 이 영역이나 이것을 둘러싼 테두리에 크기, 색상, 위치 등과 관련한 속성을 지정함으로써 스타일을 변경합니다. 따라서 박스 속성은 웹 페이지의 레이아웃을 구성할 때 가장 중요하다고 말할 수 있습니다.
1-1. 박스 크기와 여백
태그 전체 크기는 다음 공식으로 구할 수 있습니다. margin 속성, border속성, padding 속성은 양쪽에 위치하므로 2를 곱합니다.
전체 너비 = width+2*(margin+border+padding)
전체 높이 = height+2*(margin+border+padding)
margin 속성과 padding 속성은 상하좌우를 각각 지정가능 합니다.
1-2. 박스 테두리
박스에 테두리를 넣을 때는 두께, 형태, 색상에 해당하는 속성을 사용해야 합니다.
테두리 두께는 border-width속성을 이용하고, 테두리 형태는 border-style 속성을 사용하며, 테두리 색상은 border-color 속성을 사용합니다.
박스 테두리 조정하는 예시를 보여드리도록 하겠습니다.
먼저 기본 테두리 만드는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
.box{
border-width: thick;
border-style: dashed;
border-color: black;
}
</style>
</head>
<body>
<div class="box">
<h1>Lorem ipsum dolor amet</h1>
</div>
</body>
</html>
둥근 테두리를 만들기 위해서는 border-radius속성을 적용해주면 됩니다.
마찬가지로 모서리마다 둥글기를 다르게 적용시키기 위해서는 border-radius속성에 크기 단위 4개를 입력하면 각 테두리에 서로 다른 둥글기가 적용됩니다.
2. 가시 속성
가시 속성은 태그가 화면에 보이는 방식을 지정합니다. 대표적으로 display 속성이 있습니다. CSS의 display 속성을 사용해서 박스를 인라인 형식, 블록 형식, 인라인-블록 형식으로 설정할 수 있습니다.
inline과 inline-block 키워드 적용하면
- block 형식, inline-block 형식
- margin 속성, padding 속성을 상하좌우 네 방향으로 지정할 수 있습니다.
- inline 형식
- margin 속성, padding 속성을 왼쪽과 오른쪽으로만 지정할 수 있습니다.
3. 배경 속성
배경에 이미지나 색상은 배경 속성을 사용해 지정합니다.
3-1. 배경 이미지 삽입과 크기 지정
background-image 속성은 배경 이미지를 지정하는 속성으로 스타일 값에는 URL 단위나 그레이디언트를 입력합니다. 배경 이미지의 크기는 background-size 속성으로 조정하고, 크기 단위나 키워드를 입력할 수 있습니다. 크기 단위로는 퍼센트를 많이 이용하고, 너비와 높이 값 2개를 입력 가능합니다.
3-2 배경 이미지 반복과 부착 형태, 위치
background-repeat 속성은 배경 이미지의 반복 형태를 지정합니다. repeat를 입력하면 이미지를 패턴처럼 표시하고, repeat-x를 입력하면 x축 방향으로만 이미지가 반복됩니다.
background-attachment는 배경 이미지를 화면에 고정하는 속성으로 기본 키워드는 scroll입니다. 이는 화면 스크롤에 따라 배경 이미지가 함께 이동하는 것을 의미합니다.
background-position 속성은 배경 이미지의 배치를 지정합니다.
•background-position: 키워드;
•background-position: X축 위치;
•background-position: X축 위치 Y축 위치;
오늘은 CSS속성에 대해서 알아보았는데요. 내용이 많아서 다음 포스팅에서 계속해서 CSS속성에 대해 알아보는 시간을 가지려고 합니다. 이번 포스팅도 읽어주셔서 감사합니다:)