LEFT4 css border-radius 속성 오늘은 테두리를 둥글게 만드는 속성인 border-radius에 대해서 알아 보겠습니다. - border radius란? 테두리를 둥글게 만드는 css 속성값으로, 총 8개의 속성값을 넣어야 하지만 값이 같다면 짧게 쓸 수 있습니다. /*기본 문법*/ border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 각각의 속성값들은 해당 그림처럼 적용이 됩니다. (속성값으로는 px, %와 같이 길이 단위를 넣습니다.) 그럼 개념은 이 정도로 하고, 예제 코드로 알아 보겠습니다. - 예제 코드 이 코드를 기본으로 여러 border-ra.. 2021. 12. 26. css position 속성 이번 글에서는 제 포스팅에서도 화면상 위치를 잡을 때 많이 썼었던 css position에 대해 알아보는 시간을 갖도록 하겠습니다. - position이란? position은 이름 그대로 태그들의 위치를 결정하는 css로써, 속성값의 종류에는 static, relative, absolute, fixed가 있습니다. position 자체는 태그들의 위치를 지정하는 css라고만 기억하시고, 속성값마다 다 다르기 때문에 속성값에서 자세하게 설명해 드리겠습니다. - static 모든 태그들은 따로 position값을 지정하지 않아도 기본 position값으로 static이 지정이 됩니다. static의 특징은 순서대로 왼쪽 > 오른쪽, 위 > 아래 순으로 쌓이게 됩니다. 1 2 3 4 지금은 아무에게.. 2021. 12. 17. css clear 속성 오늘은 clear 속성에 대해 알아보도록 하겠습니다. 지난번에는 css의 float 속성에 대해 알아본 적이 있습니다. 이렇게 float을 적용시키면 그 요소가 붕 떠서 화면상 배치를 할 때 쉽게 처리를 할 수 있다 했었습니다. 그런데 float의 특성상 붕 뜨기 때문에 원래의 화면상 배치가 틀어질 수 있습니다. 그럴 때 사용하는 것이 clear 요소인데, 저도 저번 포스팅에서 몇 번 쓴 적이 있었습니다. 이번에는 clear를 설명하기 위해 다른 예시 코드를 보여 드리겠습니다. 박스1 박스2 content 실행을 시키기 전 예상을 해 보면, 전체를 감싸는 box-container에 border와 배경색을 지정해 줬고, 그 안의 요소인 박스1과 박스2에 각각 float left, right를 해 줬기 .. 2021. 12. 16. css의 float 속성 이번에는 css의 float 속성에 대해서 알아보겠습니다. 제가 블로그에 포스팅했었던 전 글들을 보면 그 코드에도 태그들의 화면상 배치를 위해 float 속성을 꽤 많이 활용한 것을 볼 수 있습니다. ex) header .spot li {float:left; position: relative;} 이런 식으로 태그를 화면상에서 왼쪽이나 오른쪽 등으로 배치시키고 싶을 때 주로 사용하게 됩니다. - 정의 float은 원래 '뜨다'라는 뜻의 단어로써, 해당 속성값으로 css를 주게 되면 그 태그는 뜻 그대로 떠서 block과 같은 다른 요소에 방해받지 않고 배치를 시킬 수 있습니다. (https://www.youtube.com/watch?v=xara4Z1b18I) 저는 이 영상을 보고 float의 개념에.. 2021. 12. 16. 이전 1 다음
