반응형 프론트엔드21 멋쟁이사자처럼 프론트엔드 부트캠프 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 6 (하이퍼링크, 섹션 관련 요소, 컨테이너 요소) 목차하이퍼 링크목록섹션과 메인 요소컨테이너 요소오늘 하루를 돌아보며 하이퍼링크하이퍼링크는 (anchor) 태그를 사용한다. 페이지 내에서 이동하거나 다른 페이지로 이동할 수 있다. a 태그로 텍스트를 감싸면 텍스트에 링크를 달고, 이미지를 감싸면 이미지에 링크를 단다.href 속성을 사용해서 링크의 목적지를 설정한다.링크 텍스트 href 속성에 넣을 수 있는 경로들은 다음과 같다.http(s) = Hyper Text Transfer Protocol (Security). 외부 서비스로 연결할 때는 http(s)를 사용하고, 내부 서비스로 연결할 때는 상대경로를 사용한다./... = 절대 경로(./)... = 상대 경로mailto:email@mail.com = 메일 클라이언트(Outlook/mail)를.. 2025. 5. 1. 이전 1 2 3 4 5 다음 반응형
