본문 바로가기

728x90

HTML + CSS 시리즈🕸/HTML & CSS 시리즈(V 1.0)25

배경이미지 설정 방법 | HTML&CSS 시리즈 020 배경 이미지 설정 방법 background-repeat background-repeat는 이미지를 반복시킬 것인지 아닐 것인지, 그리고 반복시킨다면 어떤 방식으로 반복시킬 것인지 정해주는 속성입니다. /* 반복하지 않음 */ background-repeat: no-repeat; /* 가로 방향으로만 반복 */ background-repeat: repeat-x; /* 세로 방향으로만 반복 */ background-repeat: repeat-y; /* 가로와 세로 모두 반복 */ background-repeat: repeat; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */ background-repeat: space; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 .. 2021. 7. 24.

테두리 (border ) 정리!! | HTML&CSS 시리즈 020 한 줄에 끝내기 가장 일반적인 방법은 border 속성으로 한 줄에 다 쓰는 것입니다. 이 방식을 사용하면 위, 아래, 왼쪽, 오른쪽 모두 같은 테두리가 생깁니다. 값을 쓰는 순서는 굵기, 스타일(실선, 점선 등), 색입니다. 명확하게 나누기 다른 방법은 border-style, border-color, border-width 속성을 써서 테두리의 스타일을 하나씩 지정해주는 것 다채로운 테두리 둥근 모소리 설정 2021. 7. 24.

overflow~ | HTML&CSS 시리즈 019 width, height, max-width, max-height 등을 설정하다 보면 내용물이 들어갈 공간이 부족한 경우가 있습니다. 이런 경우에 오버플로우를 사용해줍니다. scroll과 거의 똑같은데, 한 가지 차이점이 있습니다. scroll은 항상 스크롤바를 보여주고, auto는 내용물이 넘쳐날 때만 스크롤바를 보여줍니다. 2021. 7. 24.

박스 모델(padding, margin) | HTML&CSS 시리즈 018 위 사진을 보면 padding 이 뭔지, margin 이 뭔지 한눈에 이해 할 수 있다. Padding 은 내용과 테두리 사이의 '여유 공간' Margin은 요소 주위의 여백입니다. 즉, 테두리 밖의 공간 이렇게 top , bottom , left , right 로 따로 따로 힘들게 작성할 필요없이 그냥 시계 방향으로 한번에 작성할 수 도 있다. (위, 오른쪽, 아래, 왼쪽 순..) 만약 그냥 padding : 50px 만 쓴다면 , 위아래 오른쪽 왼쪽 다 50px 의 간격이 된다. 만약 padding:50px 30px 쓴다면, 위아래는 50px 간격이 되고, 오른쪽 왼쪽 간격은 30px 이 된다. margin 의 경우도 padding 과 동일하다. 이렇게 하나씩 써도 되지만 한줄로 적을 수도 있다. 만.. 2021. 7. 24.

이전 1 2 3 4 5 ··· 7 다음

728x90

티스토리툴바