잡다한 블로그

CSS Flexbox는 복잡한 레이아웃을 간단하고 직관적으로 구성할 수 있는 강력한 도구입니다. 이번 글에서는 Flexbox의 기본 개념과 실제 적용 사례를 다루며, 다양한 레이아웃을 직접 만들어 보겠습니다. 준비물HTML 및 CSS 기본 지식텍스트 편집기(예: VS Code)브라우저(예: Chrome, Edge) Flexbox의 주요 개념컨테이너와 아이템Flexbox는 부모 요소를 컨테이너로 설정하고, 자식 요소를 아이템으로 취급합니다.Flexbox를 사용할려면 display: flex; 스타일 속성을 추가해주어야 합니다.주요 속성justify-content: 주 축 방향 정렬align-items: 교차 축 방향 정렬flex-wrap: 아이템 줄바꿈 설정  크롬의 개발자도구를 통해 주요 속성을 변경하며..

HTML과 CSS를 사용해 간단한 개인 프로필 페이지를 만들어 보겠습니다. 포트폴리오 프로필 제작 시 템플릿으로 복사해서 사용하시면 편합니다. 결과화면  소스코드 홍길동 웹 개발자 | 프론트엔드 전문가 | 기술 블로거 About Me 안녕하세요! 저는 사용자 경험과 인터페이스를 중점으로 한 웹 개발에 열정을 가진 개발자입니다. 항상 새로운 기술을 배우고 적용하는 데 관심이 많습니다. Skills HTML5 & CSS3 JavaScript (E..

lang 속성... 웹 페이지의 언어를 선언하려면 html태그의 lang속성에 값을 입력하면 됩니다. 이 속성은 검색엔진에 관련되어 있습니다. 처음 두 자리는 HTML 페이지의 언어를 정의하고 뒤에 두 자리는 국가를 정의합니다. 예시ko-KO"> ... (한국어-한국)en-US">... (영어-미국) 한국어 언어코드만 사용할려면 ko"> 이렇게 작성하시면 됩니다. title 속성The title AttributeMouse over this paragraph, to display the title attribute as a tooltip. title 속성의 값을 입력하고 해당 태그에 마우스를 올려보면 툴팁이 나옵니다. 아래 글에 마우스를 올려보세요 ↓Mouse over this paragraph, to d..

h1~h6 태그This is heading 1This is heading 2This is heading 3This is heading 4This is heading 5This is heading 6 h태그는 일반적인 제목을 작성할 때 사용합니다.  h뒤에 붙은 숫자로 제목의 크기를 나타내고 1이 가장 크고 6이 가장 작습니다.  p 태그This is a paragraph.This is another paragraph. 일반적인 문자를 작성할 때 사용하는 태그입니다.  a 태그HTML LinksHTML links are defined with the a tag:This is a link 가장 많이 사용되는 링크 태그입니다. 지금껏 보지 못한 태그 안 href라는 것을 볼 수 있을 겁니다. 이것을 태그 속성..

코드 작성을 연습해보려면 메모장만 있으면 되지만 가독성이나 좀 더 편하게 작성하기 위해선 notepad++이나 이클립스, 비주얼 스튜디오 등의 편집기가 필요하다. 간단한 코드를 연습하는 정도는 notepad++을 추천한다. 큰글씨내용 위와같은 코드를 작성해서 확장자를 html으로 저장해보자   해당 파일을 실행시켜보면 아래의 화면처럼 작성한 코드의 내용이 나온다. (html확장자가 연결되어있지 않으면 브라우저와 연결해주자)

HTML은 웹페이지 표준 마크업 언어이다. (국제 표준 웹개발 언어) 웹개발의 기초가 되는 언어이므로 웹개발자는 필수적으로 공부하여야한다.  위 소스는 HTML의 기본 문법이다.      왼쪽과 같이 를 태그라고 부른다.  태그는 시작이 있으면 끝이 있다. 닫는 태그는 이렇게 작성한다. 설명는 HTML5 문서임을 정의는 HTML 페이지의 기본 요소는 HTML 페이지에 대한 메타 정보를 포함는 페이지의 제목는 내용이 입력되는 부분