여우비오냐의 IT 기술

7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기7.1.1 플렉스 박스 레이아웃 살펴보기플렉스 박스(Flexbox)는 1차원 레이아웃을 손쉽게 설계할 수 있는 CSS 레이아웃 모델입니다. 주로 요소들을 수평 또는 수직으로 배치하는 데 사용됩니다.사용 시기: 수평 또는 수직 방향으로 요소를 정렬하거나 공간을 균등하게 분배할 때 사용합니다.예시:.container { display: flex;}7.1.2 플렉스 박스 레이아웃의 기본 속성플렉스 박스의 주요 속성에는 flex-direction, flex-wrap, justify-content, align-items, align-content가 있습니다. 이 속성들을 통해 플렉스 컨테이너와 그 안의 아이템들이 어떻게 배치될지를 설정할 수 있습니다.사..

6.1 CSS의 특징 살펴보기6.1.1 기본 스타일 시트브라우저는 기본적으로 HTML 요소에 자체 스타일을 적용합니다. 이러한 기본 스타일을 덮어쓰는 것이 CSS의 주요 기능 중 하나입니다.사용 시기: 기본 스타일을 사용자 정의 스타일로 변경할 때 사용됩니다.예시:p { margin: 0; padding: 0;}6.1.2 적용 우선순위와 개별성CSS에서 스타일 적용 우선순위는 인라인 스타일, ID 선택자, 클래스 선택자, 태그 선택자의 순으로 결정됩니다. 이 우선순위에 따라 스타일이 적용됩니다.사용 시기: 특정 요소에 더 강력한 스타일을 적용하고자 할 때 사용됩니다.예시:#unique { color: red;}.class { color: blue;}p { color: green..

5.1 기본 선택자 사용하기5.1.1 전체 선택자전체 선택자(*)는 문서 내의 모든 요소를 선택합니다.사용 시기: 전체 요소에 공통적인 스타일을 적용할 때 사용됩니다.예시:* { margin: 0; padding: 0;}5.1.2 태그 선택자태그 선택자는 특정 HTML 태그를 선택합니다.사용 시기: 특정 태그에 스타일을 적용할 때 사용됩니다.예시:p { color: blue;}5.1.3 아이디 선택자아이디 선택자(#)는 특정 아이디 값을 가진 요소를 선택합니다.사용 시기: 문서 내에서 유일한 요소에 스타일을 적용할 때 사용됩니다.예시:#header { background-color: grey;}5.1.4 클래스 선택자클래스 선택자(.)는 특정 클래스 값을 가진 요소를 선택합니다.사용..

4.1 CSS 문법 살펴보기4.1.1 문법 형식CSS는 선택자(selector)와 선언(declaration)으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하며, 선언은 적용할 스타일 속성(property)과 그 값을 정의합니다.구조:선택자 { 속성: 값;}예시:p { color: blue; font-size: 16px;}4.1.2 주석주석은 코드에 메모를 추가할 때 사용하며, 브라우저는 주석을 무시합니다. 주석은 /*로 시작하고 */로 끝납니다.예시:/* 이 스타일은 모든 단락에 적용됩니다 */p { color: blue;}4.2 CSS 적용하기4.2.1 내부 스타일 시트 사용하기내부 스타일 시트는 HTML 문서의 4.2.2 외부 스타일 시트 사용하기외부 스타일 시..

3.1 텍스트 작성하기3.1.1 hn 태그설명: hn 태그는 HTML에서 제목(Heading)을 정의할 때 사용됩니다. h1부터 h6까지 있으며, 숫자가 작을수록 더 큰 제목을 나타냅니다.사용 시기: 웹 페이지에서 섹션의 제목이나 중요한 내용을 강조할 때 사용합니다.예시:웹 페이지의 주요 제목섹션 제목3.1.2 p 태그설명: p 태그는 단락(Paragraph)을 정의하는 태그입니다.사용 시기: 텍스트를 단락으로 구분할 때 사용합니다.예시:이것은 단락입니다.3.1.3 br 태그설명: br 태그는 줄바꿈(Break)을 삽입하는 태그입니다.사용 시기: 텍스트 내에서 줄을 바꿀 때 사용합니다.예시:첫 번째 줄두 번째 줄3.1.4 blockquote 태그설명: blockquote 태그는 긴 인용문을 표시할 때 사..