9. 배경이미지

background-repeat 이미지 반복시키는 여부 정하는 속성 /* 반복하지 않음 */ background-repeat: no-repeat; /* 가로 방향으로만 반복 */ background-repeat: repeat-x; /* 세로 방향으로만 반복 */ background-repeat: repeat-y; /* 가로와 세로 모두 반복 */ background-repeat: repeat; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */ background-repeat: space; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */ background-repeat: round; background-size 배경 이미지의 사이즈를 정해..

• format_list_bulleted CS/HTML CSS
• · 2022. 6. 26.
• textsms

8. box-sizing

width와 height 속성은 border(테두리)와 padding을 제외한 content(내용물)의 크기만을 나타냅니다. 그래서 아래 코드를 실행해보면 p1과 p2의 크기가 다릅니다. #p1 { border: 3px solid red; width: 400px; height: 200px; margin-bottom: 100px; } #p2 { border: 3px solid red; width: 400px; height: 200px; padding: 20px; } p1의 경우 가로는 406px이고 세로는 206px입니다. p2는 가로 446px이고 세로는 246px입니다. 결국 가로 400px이고 세로 200px로 만들기 위해서는 border과 padding 속성을 다 계산하고 width, height ..

• format_list_bulleted CS/HTML CSS
• · 2022. 5. 7.
• textsms

7. border-radius, background-color, box-shadow

border-radius border-radius 속성을 통해 모서리를 둥글게 만들 수 있습니다. p{ border: 3px solid red; border-radius: 10px; } 값이 커질 수록 더욱 둥글어집니다. 또한 각 모서리를 개별 설정할 수 있습니다. p{ border: 3px solid red; border-top-left-radius: 5px; /* 왼쪽 위 */ border-top-right-radius: 10px; /* 오른쪽 위 */ border-bottom-right-radius: 20px; /* 오른쪽 아래 */ border-bottom-left-radius: 0px; /* 왼쪽 아래 */ } background-color background-color 속성을 통해 배경생을 지..

• format_list_bulleted CS/HTML CSS
• · 2022. 5. 7.
• textsms

6. width, height, overflow

요소의 가로 길이(width)와 세로 길이(height)를 설정할 수 있다. p { border : 3px solid red; width: 200px; height: 300px; } 최소, 최대 길이 min-width, max-width, min-height, max-height 를 이용해서 가로, 세로의 최소, 최대 길이를 지정할 수 있다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates debitis pariatur omnis! Optio ipsa rem qui ratione natus, inventore illum sed minima, quibusdam aspernatur quia laboriosam reprehenderit ..

• format_list_bulleted CS/HTML CSS
• · 2022. 5. 7.
• textsms

5. border

border : 테두리 border Test 이렇게 테두리의 속성을 하나씩 지정 가능하다. border-style : 테두리 스타일 border-color : 테두리 색상 border-width : 테두리 굵기 한 줄로 작성 border Test1 border Test2 border Test3 이렇게 굵기, 스타일, 색 순서로 한 줄로 작성할 수 있다. 또한 #p3처럼 각각의 설정을 줄 수도 있다. 참고 태그와 같이 기본적으로 테두리가 설정된 요소에 테두리를 없애고 싶으면 border: none; border: 0; 이렇게 border 속성을 지정하면 된다. 부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다. 이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

• format_list_bulleted CS/HTML CSS
• · 2022. 5. 7.
• textsms

4. Margin, Padding

요소 : 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다. Padding : 내용과 테두리 사이의 여유 공간 Margin : 요소 주위의 여백(테두리 밖의 공간) Padding padding을 주는 여러 가지 방법 가장 직관적으로 padding 주는 방법 padding 속성을 이용하면 순서는 위 오른쪽 아래 왼쪽 이다(시계방향) 모두 같은 padding 속성을 주고 싶으면 그냥 padding에 값만 입력하면 된다 좌, 우 값이 같고 위, 아래 값을 같게 주고 싶으면 padding 속성에 위, 아래 값(20px)을 주고 좌, 우 값(40px)을 주면 된다. Margin margin 도 동일하다. #p1 { border: 3px solid red; margin-top: 3..

• format_list_bulleted CS/HTML CSS
• · 2022. 5. 7.
• textsms