반응형 멋쟁이사자처럼후기47 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 11 (포지셔닝 레이아웃, 플로팅 레이아웃) 목차포지셔닝 레이아웃플로팅 레이아웃CSS 선택자CSS 스타일링오늘 하루를 돌아보며 포지셔닝 레이아웃position은 요소 박스의 배치 방식을 지정하는 속성이다. 기본 값은 static이다.position이 가질 수 있는 속성 값은 다음과 같다.static: normal flow(일반적인 흐름)에 따른 배치 방식. 마크업 순서대로 선형화되어 배치된다.relative: 원래 있던 영역을 기준으로 움직이며 layer 형태(static을 제외하고, 먼저 선언한 게 밑으로 깔린다. 배경 이미지는 먼저 선언한 게 위로 쌓인다.)로 겹친다. 주변 상자 위치에 영향을 주지 않는다. (그림자를 만들 때 사용할 수 있다.)absolute: 원래 있던 영역을 기준으로 움직이며 layer 형태로 겹친다. 주변 상자.. 2025. 5. 7. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 10 (타이포그래피, 박스 모델, 리스트 스타일링, 배경 스타일링) 목차타이포그래피박스 모델리스트 스타일링배경 스타일링오늘 하루를 돌아보며 타이포그래피fonts는 글꼴, 글자 크기, 굵기 등 다양한 스타일링을 할 수 있는 속성이다.더 자세한 정보 보러가기 CSS Fonts Module Level 3This CSS3 module describes how font properties are specified and how font resources are loaded dynamically. The contents of this specification are a consolidation of content previously divided into CSS3 Fonts and CSS3 Web Fonts modules. The description ofwww.w3.org f.. 2025. 5. 3. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 9 (CSS 기초, 선택자, 상속과 겹침, 우선순위 규칙) 목차CSS 기초CSS 문법CSS 선택자CSS의 세 가지 개념오늘 하루를 돌아보며 CSS 기초CSS란?CSS(Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어다. 글꼴, 여백, 배경 이미지 등 HTML 문서의 레이아웃과 스타일을 정의한다.Cascading: 겹쳐서 사용. 마지막 정의한 게 적용된다.Style Sheet: 스타일을 정의함. 워드프로세서 등에 사용했던 개념이다.CSS를 사용하면서 문서의 구조와 표현을 분리할 수 있게 됐다. 구조를 바꾸지 않고도 CSS를 어떻게 적용하느냐에 따라 콘텐츠가 다르게 보일 수 있다. CSS Zen Garden: The Beauty of CSS DesignSo What is This About? There is a conti.. 2025. 5. 3. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 8 (폼 관련 요소, 인터렉티브 요소, 스크립팅 요소, 유저 인터렉션 속성, WAI-ARIA) 목차폼 관련 요소dialog 요소와 popover 속성details, summary 요소스크립팅 요소유저 인터렉션 속성WAI-ARIA오늘 하루를 돌아보며 폼 관련 요소> 요소는 사용자가 입력한 정보를 서버로 전송하기 위한 컨테이너다. 텍스트 필드, 체크박스, 라디오 버튼, 드롭다운 목록 등 다양한 입력 요소를 넣을 수 있다.form 관련 요소는 1대1로 대응되는 (식별 가능한 이르름표)을 가져야 한다. 폼 관련 요소의 id 또는 name 속성값을 label의 for 속성값에 연결한다. label을 클릭하면 연결된 요소에 포커싱된다.1. input 요소 요소는 사용자에게 데이터를 입력받기 위해 사용한다. action 속성은 데이터를 받을 서버 url을 지정하고, method 속성은 테이터를 전송하는 방식(.. 2025. 5. 3. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 7 (텍스트 레벨 요소, 테이블 관련 요소, 임베디드 요소) 목차프레이징 요소인용문텍스트 레벨 요소테이블 관련 요소address 요소임베디드 요소오늘 하루를 돌아보며 프레이징 요소문장이나 텍스트와 관련된 요소로, 문서의 텍스트를 단락 내에서 마크업하는 데 사용한다. 즉, 문장이나 텍스트의 일부를 의미적으로 표시하거나 스타일을 적용하는 데 사용되는 태그들을 가리킨다. 요소는 텍스트의 중요성을 강조할 때 사용한다. 스타일 기본값은 bold다. 요소도 텍스트를 강조할 때 사용하지만 strong이 중요도가 더 높다. 스타일 기본값은 italic이다. 요소가 텍스트를 기울일 때(italic) 사용하고, 요소는 텍스트를 굵게(bold) 강조할 때 사용한다.strong이나 em의 시각적 모습이 i나 b와 동일하지만 의미가 다르다. strong과 em은 텍스트의 중요성을 강조하.. 2025. 5. 3. 이전 1 ··· 5 6 7 8 9 10 다음 반응형
