Border
-
CSS 설렉터, Pseudo Selectors, 가상설렉터이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 29. 04:55
이번시간은 레이아웃이 복잡할 때 쉽고 유용하게 쓰이는 selector, 설렉터에 대해 배워 보도록 하겠습니다. Pseudo-selector를 배우기 전에, container안에 3개의 box를 만들고, password, 비밀번호를 입력할 수 있는 입력창과 submit, 입력을 누를 수 있는 입력창을 만들어 주면, 아래와 같이, 크롬에서 확인 할 수 있습니다. 여기서, submit, 입력 버튼을 선택하고 싶다면, class 이름을 준 다음, 배경색을 지정해 줄 수 있습니다. 예를 들어, 클래스 이름은 class="submit"과 같이 설정하고, background-color=red와 같이 지정할 수 있습니다. 혼자 작업할 때는 위와 같이 작업하더라도, 별다른 문제가 생기지 않지만, 팀으로 일할 때는 혼란을..
-
Box model, 상자이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 25. 05:15
이번시간에는 BOX모델에 대해 알아보도록 하겠습니다. CSS를 배울 때 이해해야 되는 것 중 하나가 많은 element들이 box, 상자형태라는 점과, 그 요소가 4개 라는 것입니다. 1> 첫 번째는 contents, 컨텐츠, 내용, 2> 두 번째는 박스의 경계, border, 보더, 3> 세 번째는 padding, 패딩, 박스의 보더, border에서 안쪽으로 있는 간격, 4> 그리고 마지막 네번 째는 margin, 마진, 박스의 border, 보더에서 바깥쪽으로 있는 간격 정리하면, contents, 컨텐츠와 border, 경계 안쪽에 있는 간격이 padding이고, 바깥에 있는 간격은 margin입니다. 그럼 이제 HTML문서로 가서, title에는 Box Model이라고 쓰고, incline방법으..
-
CSS 박스모델이거 공부 했더니 어때?/HTML & CSS & JS 2020. 9. 23. 15:45
수많은 HTML요소들은 박스(box, 상자형태)로 이루어져 있습니다. 박스는 아래의 4가지 영역으로 구성 됩니다. 1. 바깥쪽 여백(margin, 마진), 2. 테두리 선(border, 보더), 3. 안쪽 여백(padding, 패딩), 4. 내용(contents, 콘텐츠) 바깥쪽 여백(margin, 마진) 방향은 위부터 시계방향으로 회전하여, 위, 오른쪽, 아래, 왼쪽 순서로 설정 테두리 선(border, 보더) 속성 border: 선의 너비(width), 모양(style), 색상(color) 순으로 값 입력. 속성 border-top/right/bottom/left: 선의 너비(width), 모양(style), 색상(color) 순으로 값 입력. 속성 border-width 속성 border-style..