가변 이미지

가변 이미지 1. 가변 이미지 - 이미지 또한, 브라우저 비율에 따라 가변적으로 변경할 수 있음 (동영상도 가능) See the Pen Tistory_Front-End Study_반응형 웹_가변 이미지_1. 가변 이미지 by NewBean0312 (@newbean6775) on CodePen.

• format_list_bulleted Front-End Study/반응형 웹
• · 2023. 2. 5.
• textsms

가변 font

가변 font 1. 가변 font - 폰트의 크기를 가변적으로 설정이 가능함 - 가변 폰트는 가변 그리드 공식과 같음 → 가변 폰트값 = (가변 폰트를 적용할 글자 크깃값 ÷ 적용할 요소를 감싸고 있는 요소의 글자 크깃값) - 예시) 글자 크기 96px으로 적용된 박스가 있고 그 박스안에 글자 크기 64px의 박스를 적용 See the Pen Tistory_Front-End Study_반응형 웹_가변 font_가변 font_1. 가변 폰트 by NewBean0312 (@newbean6775) on CodePen. 2. rem 단위 - 앞에서 사용한 em 단위는 자신의 부모 박스에 글자 크기가 지정되어 있을 경우, 자식 박스에게 글자 크기가 상속됨 - rem 단위는 웹 문서의 최상위인 태그를 기준으로 하기..

• format_list_bulleted Front-End Study/반응형 웹
• · 2023. 2. 3.
• textsms

가변 margin, 가변 padding

가변 margin, 가변 padding (margin과 padding 정리 → 박스 모델(Box Model)) 1. 가변 margin - 마진의 간격을 가변으로 설정이 가능함 - 가변 마진은 가변 그리드 공식과 같음 → 가변 마진값 =(가변 마진을 적용할 마진값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 - 예시) 300px 두개의 박스 사이에 가변 마진을 설정 #wrap { width: 90%; /* 960px */ height: 500px; margin: 0 auto; border: 4px solid black; } #wrap div { display: inline-block; width: 31.25%; /* 300px ÷ 960px */ height: 100%; } #wrap di..

• format_list_bulleted Front-End Study/반응형 웹
• · 2023. 2. 3.
• textsms

가변 그리드 (Fluid Grid)

가변 그리드 (Fluid Grid) 1. 가변 그리드 - 가변적 : 객체 or 물체 or 사물이 늘어나거나 줄어들거나 성질이 변하는 것 - 그리드 : 격자나 눈금 (웹에서의 그리드는 가로 or 세로 크기, 여백, 단 수 등 구조 설계를 위한 것을 뜻함) 2. 가변 그리드 공식 - 정확한 가변 크기의 박스를 만들기 위해선, 공식이 존재 → 가변 크기의 %값 = (가변 크기로 만들 박스의 가로 너비 ÷ 그 박스를 감싸고 있는 박스의 가로 너비) x 100 - 예를 들어, 아래와 같이 테두리 박스의 너비가 960px이고 노란 박스의 너비가 300px이면, (300 ÷ 960) x 100 = 31.25% 3. 서로 다른 크기의 박스를 가변 크기로 변환 - 960px의 테두리 박스 안에 각 300px, 600px..

• format_list_bulleted Front-End Study/반응형 웹
• · 2023. 1. 14.
• textsms

반응형 웹

반응형 웹 1. 반응형 웹 - PC, 태블릿, 스마트 폰 등 기기 or 환경마다 최적화된 웹사이트 - 웹사이트의 구조를 기기에 맞는 화면에 최적화된 구조로 변경하여 보여줌 ※ 사용하는 것은 HTML+CSS 페이지와 동일하나, 집중적으로 파기 위해 반응형 웹만 따로 개설하였음 ※ 반응형 웹을 공부하기 전, HTML+CSS 페이지를 먼저 공부하는 것을 권장함 ※ Do it! 반응형 웹 만들기 서적을 참고하였음

• format_list_bulleted Front-End Study/반응형 웹
• · 2023. 1. 14.
• textsms

background 속성

※ abc 순으로 정렬 ● background 속성 - 아래의 속성들을 한번에 설정함 ● background-color 속성 - 배경 색 지정 - background-color: | | - rgb 값 : 빛의 삼원색으로 빨간, 녹색, 파란색을 이용해서 색을 표시하는 방식 (각 값 당 255까지 가능) ※ rgba는 투명도 까지 가능한 값 - 색상이름 : red, blue 처럼 색상 이름으로 표기 - 16진수 : 16진수로 #000000 처럼 표기 가능 (ex : 파란색(#0000ff)) ※ background-color 값은 상속되지 않음 ● background-clip 속성 (참고 : 박스 모델) - 배경 적용 범위 조절 - background-clip: border-box | padding-box |..

• format_list_bulleted Front-End Study/CSS 사전
• · 2023. 1. 8.
• textsms