HUMANITY

초보자를 위한 HTML과 CSS 기초 웹 개발을 시작하고 싶은데, 어디서부터 시작해야 할지 막막한가요? HTML과 CSS는 웹 개발의 기본이 되는 언어로, 이를 이해하면 웹 페이지를 만들 수 있습니다. 이 글에서는 HTML과 CSS의 기초에 대해 알아보겠습니다. HTML HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하는 언어입니다. HTML 태그를 사용하여 텍스트, 이미지, 링크, 표, 목록 등을 웹 페이지에 배치할 수 있습니다. HTML의 기본 구조 HTML 제목 본문 목록 1 목록 2 코드를 사용할 때는 주의하시기 바랍니다. 자세히 알아보기 content_copy CSS CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 디자인을 담..

IT/HTML 2023. 10. 10. 12:23

주요 속성(Attribute) action : 폼 데이터를 보낼 URL 지정 submit, button 등을 통해 사용자가 데이터를 제출하는 이벤트가 발생했을 때, 입력받은 데이터를 어디로 보낼지 지정 참고) URL란? Uniform Resource Identifier, 리소스의 위치를 식별하기 위한 문자열, (cf-URL은 URI의 하위 개념) 다른 웹 페이지 주소, 서버의 주소, 프로젝트 내 다른 HTML 파일 등 method: GET, POST 등 양식을 제출할 때 사용할 HTTP 메소드 GET : action에 명시한 URI에 Query Parameter(?뒤로 오는 값)형태롤 이어 붙여서 전송(Default, 기본값) 예) 그대로 드러나기 때문에 보안에 취약함 Post: Request Body에..

IT/HTML 2023. 9. 24. 15:06

CSS transform-origin속성은 요소 변환의 원점을 설정합니다. 원점은 변환이 적용되는 지점입니다. 기본값은 50% 50%요소의 중심인 입니다. 속성 transform-origin은 백분율, 길이, 키워드 등 CSS 위치로 사용할 수 있는 모든 값으로 설정할 수 있습니다. 예를 들어 다음 코드는 요소의 원점을 왼쪽 위 모서리로 설정합니다. transform-origin: 0% 0%; 속성 transform-origin을 키워드 값으로 설정할 수도 있습니다. 다음 키워드가 지원됩니다. top: 요소의 상단 가장자리입니다. bottom: 요소의 아래쪽 가장자리입니다. left: 요소의 왼쪽 가장자리입니다. right: 요소의 오른쪽 가장자리입니다. center: 요소의 중심입니다. 이 속성은 , ..

IT/HTML 2023. 9. 13. 23:44

skew() 함수의 구문은 다음과 같습니다. skew(x-deg, y-deg); 여기서 x-deg는 요소를 x축으로 기울일 각도이고, y-deg는 요소를 y축으로 기울일 각도입니다. 각도는 degrees 단위로 지정됩니다. 음수 각도는 반대 방향으로 기울이는 것을 의미합니다. 예를 들어, 다음 CSS는 요소를 x축으로 30도, y축으로 45도로 기울입니다. div { transform: skew(30deg, 45deg); } 이 CSS는 다음과 같은 결과를 생성합니다. 이 요소는 x축으로 30도, y축으로 45도로 기울였습니다. skew() 함수는 다음과 같은 2개의 옵션을 사용할 수 있습니다. origin: 요소의 기울임 중심을 지정합니다. deg: 각도를 degrees 단위로 지정합니다. (기본값) ..

IT/HTML 2023. 9. 13. 23:35

HTML/CSS scale() 함수로 요소 크기 조절하기 HTML/CSS에서 scale() 함수는 요소의 크기를 조절하는 변환을 정의합니다. 변환의 결과는 데이터 유형입니다. scale() 함수의 구문은 다음과 같습니다. scale(x, y); 여기서 x는 요소의 가로 크기를 조절하는 값이고, y는 요소의 세로 크기를 조절하는 값입니다. x와 y는 모두 숫자 값입니다. x와 y의 값이 모두 1이면 요소의 크기가 변하지 않습니다. x 또는 y의 값이 1보다 크면 요소의 크기가 커집니다. x 또는 y의 값이 1보다 작으면 요소의 크기가 작아집니다. 예를 들어, 다음 CSS는 요소의 가로 크기를 2배로, 세로 크기를 1.5배로 조절합니다. div { transform: scale(2, 1.5); } 이 CSS..

IT/HTML 2023. 9. 13. 23:27

TML/CSS에서 transform속성은 요소에 변형을 적용하는 데 사용됩니다. 적용할 수 있는 변환 중 하나는 translate()요소를 특정 양만큼 이동하는 것입니다. 이 translate()함수의 구문은 다음과 같습니다. transform: translate(x, y); 여기서 x는 요소를 수평으로 이동하는 양이고 는 y요소를 수직으로 이동하는 양입니다. x및 값은 y양수 또는 음수일 수 있습니다. 예를 들어 다음 CSS는 요소를 오른쪽으로 100픽셀, 아래로 50픽셀 이동합니다. div { transform: translate(100px, 50px); } 이 translate()함수는 현재 위치를 기준으로 요소를 이동하는 데에도 사용할 수 있습니다. 이를 위해 속성 translate()과 함께 함..

IT/HTML 2023. 9. 13. 23:19

HTML/CSS에서 rotate() 함수는 2D 평면에서 고정된 지점을 중심으로 요소를 회전하는 변환을 정의합니다. 변환의 결과는 데이터 유형입니다. rotate() 함수의 구문은 다음과 같습니다. rotate(angle) 여기서 angle은 요소를 회전할 각도입니다. 각도는 degrees 단위로 지정됩니다. 음수 각도는 반시계 방향으로 회전하는 것을 의미합니다. 예를 들어, 다음 CSS는 요소를 90도 시계 방향으로 회전합니다. div { transform: rotate(90deg); } rotate() 함수는 다음과 같은 3개의 축을 중심으로 요소를 회전할 수 있습니다. X 축: 요소의 왼쪽에서 오른쪽으로. Y 축: 요소의 위에서 아래로. Z 축: 요소의 앞에서 뒤로. 축을 지정하려면 rotate()..

IT/HTML 2023. 9. 13. 23:14

HTML Body 태그 디지털 시대에는 시각적으로 매력적이고 사용자 친화적인 웹사이트를 만드는 것이 기업과 개인 모두에게 중요합니다. 웹 개발의 기본 요소 중 하나는 HTML 본문 태그의 중요성을 이해하는 것입니다. HTML 본문 태그의 모든 면과 다양한 속성, 그리고 웹 콘텐츠를 형성하는 데 중추적인 역할을 하는 방법을 살펴보겠습니다. HTML 본문 태그 이해 HTML(Hypertext Markup Language)은 웹 개발의 중추입니다. 웹 페이지를 구성하기 위해 태그 시스템을 사용합니다. 태그는 웹페이지에 표시되는 콘텐츠를 정의하는 가장 중요한 구성 요소 중 하나입니다. 태그의 역할 태그는 웹페이지에 표시되는 모든 콘텐츠의 컨테이너 역할을 합니다. 텍스트, 이미지, 동영상, 링크 등 사용자에게 보..

IT/HTML 2023. 9. 5. 14:59