Web, View/HTML, CSS 4

CSS #4 Margins & Padding

Margin : Margins are used to create space around elements. outside of any defiend borders. 마진을 통해서 Border(경계선) 바깥의 공간의 값을 지정할 수 있습니다. Shorthand : /* Syntax */ margin-top: 값1; margin-bottom: 값3; margin-right: 값2; margin-left: 값4; /* Shorthand Syntax */ margin: 값1, 값2, 값3 값4; 이전의 내용과 마찬가지로 Shorthand를 사용할 때는 시계방향으로 값이 지정됩니다. 4개의 값이 지정될 경우 : 위, 오른쪽, 아래, 왼쪽 3개의 값이 지정될 경우 : 위, 양옆, 아래 2개의 값이 지정될 경우 : 위..

Web, View/HTML, CSS 2022.06.23

CSS #3 Border

Border The CSS border properties allow you to specify the style, width, and color of an element's border. Border property는 요소의 경계에 스타일, 굵기 그리고 색을 설정할 수 있습니다. Border Style : Border의 스타일을 정의할 수 있습니다. /* dotted; dashed; solid; double; groove; ridge; inset; outset; none; hidden; [mix] dotted dashed solid double; */ Border Width : Border(경계선)의 굵기를 정의합니다. p.one { border-style: solid; border-width: 5px..

Web, View/HTML, CSS 2022.06.23

CSS #2 Backgrounds

Backgrounds 🔎 배경에대해 조금 더 알아봅시다. Color opacity : 불투명도 0.0 ~ 1.0의 수치로 조절이 가능합니다. rgba를 이용하여 RGB 값에 opacity를 추가할 수 있습니다. div { background: rgba(0, 128, 0, 0.3) } /* Green background with 30% opacitvy */ image : background요소에 이미지를 사용하게 해줍니다. body { background-image: url("img.jpg"); } /* 이미지를 사용할 때에는 텍스트와 밸런스를 잘 조절해야합니다.! */ Repeat : Background-image는 기본값으로 수직과 수평으로 계속 반복되게 설정 되어있습니다. 이미지에 따라 수직과 수평을..

Web, View/HTML, CSS 2022.06.23

CSS #1 Syntax, Selectors, Colors

한 주가 skip 되었습니다. 오늘은 오전에 JSP, 오후에 자습이 있어서 JSP 시간에 만드는 게시판을 조금 다듬고 CSS에 대해 공부를 해보았습니다. 아무래도 JSP의 비중이 크다보니 Web이나 DB 부분들은 추가로 공부를 계속해야될 것 같습니다. 이미 CSS는 어느정도 진도가 나갔지만 초기 개념들이 부족하다고 생각하여서 필기장을 적게되었습니다. 주말에는 정처기 실기를 공부해야되지만 시간이 된다면 작게나마 게시판 만들기를 정리해보도록 하겠습니다. 다짐 다짐 CSS basic CSS is the language we use to style a Web page. CSS(Cascading Style Sheets) 는 HTML 요소들을 어떻게 화면에 구성하고 표현하는지 명시해줍니다. Syntax Select..

Web, View/HTML, CSS 2022.06.17