HTML이란? Hyper Text Markup Language의 약자이다. 웹 페이지 제작을 위한 표준 마크업 언어(markup language)로 HTML 요소를 사용해 섹션, 링크 등을 만들어 구조화할 수 있다. 또한 HTML은 동적 기능(dynamic functionality)을 할 수 없어 프로그래밍 언어로 간주되지 않는다. 1991년 HTML 1.0이 나오고 현재는 2014년에 출시된 HTML 5를 표준으로 사용하고 있다. HTML과 HTML5의 차이점 멀티미디어 기능 HTML4까지 웹 브라우저에 멀티미디어 파일(3D, 오디오, 영상 등)을 재생하려면 브라우저가 아닌 별도의 플러그인(plug-in)이 필요했지만, HTML5에서는 웹 브라우저에서 직접 재생할 수 있다. Web Storage HTM..
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 배경 이미지의 사이즈를 정해..
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 속성을 통해 배경생을 지..
요소의 가로 길이(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 ..
border : 테두리 border Test 이렇게 테두리의 속성을 하나씩 지정 가능하다. border-style : 테두리 스타일 border-color : 테두리 색상 border-width : 테두리 굵기 한 줄로 작성 border Test1 border Test2 border Test3 이렇게 굵기, 스타일, 색 순서로 한 줄로 작성할 수 있다. 또한 #p3처럼 각각의 설정을 줄 수도 있다. 참고 태그와 같이 기본적으로 테두리가 설정된 요소에 테두리를 없애고 싶으면 border: none; border: 0; 이렇게 border 속성을 지정하면 된다. 부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다. 이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
요소 : 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다. Padding : 내용과 테두리 사이의 여유 공간 Margin : 요소 주위의 여백(테두리 밖의 공간) Padding padding을 주는 여러 가지 방법 가장 직관적으로 padding 주는 방법 padding 속성을 이용하면 순서는 위 오른쪽 아래 왼쪽 이다(시계방향) 모두 같은 padding 속성을 주고 싶으면 그냥 padding에 값만 입력하면 된다 좌, 우 값이 같고 위, 아래 값을 같게 주고 싶으면 padding 속성에 위, 아래 값(20px)을 주고 좌, 우 값(40px)을 주면 된다. Margin margin 도 동일하다. #p1 { border: 3px solid red; margin-top: 3..