WEB/HTML4 CSS FlexBox 사용법: 컨테이너와 아이템 속성 알아보기 CSS FlexBox란? FlextBox 개념FlexBox(Flexible Box Layout)는 CSS 레이아웃 모듈로, 컨테이너 안의 아이템들을 효율적으로 배치하고 정렬하기 위해 사용됩니다. FlexBox를 사용하면 레이아웃을 더 쉽게 구성하고, 다양한 화면 크기나 장치에 맞게 반응형 디자인을 구현할 수 있습니다. Container, ItemFlexBox 는 컨테이너, 아이템에 각각 부여할수 있는 속성들이 있습니다. main axis, cross axis (중심축, 반대축)FlexBox 는 중심축(main axis)과 반대축(cross axis) 개념이 있습니다. 상황에 따라 중심축이 수평선이면 반대축은 수직선이 되고 수직선이 중심축일때는 수평선이 반대축이 됩니다. FlexBox Container 속.. 2024. 7. 7. HTML 하이퍼링크 속성과 예제, 문서 내부 링크 걸기 HTML 하이퍼링크웹 페이지 간의 연결을 만드는 데 사용되는 요소입니다. 주로 사용자가 클릭할 수 있는 텍스트, 이미지 또는 기타 요소를 제공하여 다른 웹 페이지로 이동하거나 현재 페이지의 다른 부분으로 스크롤할 수 있도록 합니다. 하이퍼링크는 웹의 기본적인 네비게이션 메커니즘을 제공하며, 웹 문서들 사이의 관계를 정의하는 데 중요한 역할을 합니다. 하이퍼링크 속성href속성href 속성은 태그에서 가장 중요한 속성으로, 하이퍼링크의 대상이 되는 URL을 지정합니다. 이 속성은 절대 URL(https://www.example.com)이나 상대 URL(../index.html)을 포함할 수 있습니다. 또한 href 속성의 값으로 이메일 주소나 페이지 내부의 특정 위치를 가리키는 앵커(#section1) .. 2024. 6. 29. HTML 구조, 시멘틱(Simentic) 요소 알아보기 (header nav section...) HTML 구조, 시멘틱(Simentic)HTML의 시맨틱(Semantic) 요소는 문서의 구조와 의미를 명확히 표현하기 위해 사용되는 태그들을 의미합니다. 시맨틱 태그를 사용하면 웹 페이지의 콘텐츠를 더 잘 설명할 수 있으며, 이는 검색 엔진 최적화(SEO), 접근성, 그리고 코드의 가독성을 향상시키는 데 도움이 됩니다. Simentic 중요성가독성: 시맨틱 태그를 사용하면 HTML 코드를 읽고 이해하기가 더 쉬워집니다. 예를 들어, , , 등을 사용하면 각 부분의 목적과 역할이 명확해집니다.검색 엔진 최적화(SEO): 검색 엔진은 시맨틱 태그를 사용하여 페이지의 구조와 내용을 더 잘 이해하고, 이를 기반으로 검색 결과를 개선할 수 있습니다.접근성: 시맨틱 태그를 사용하면 스크린 리더와 같은 접근성 도.. 2024. 6. 28. HTML 문서의 구조, 요소(Element) 개념과 CSS/JS 스크립트 적용 방법 HTML 시작하기 HTML 이란?HTML(Hypertext Markup Language)는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. HTML은 elements 로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. HTML 문서의 구조 This is my page : 해당 문서가 HTML5 표준을 따르는 문서임을 명시합니다. 웹 브라우저에게 문서의 타입과 버전을 알려주는 역할을 합니다. 이를 통해 브라우저는 문서를 올바르게 렌더링할 수 있게 됩니다. first second third fourth f.. 2024. 6. 28. 이전 1 다음
