● counter-reset 속성 - 카운터를 초기화하기 위한 속성 - counter-reset : [카운터명] [정수] ● counter-increment 속성 - 카운터를 증가시키기 위한 속성 - counter-increment : [카운터명] [정수] - 정수값은 카운터의 증가 배율임 ● counter( ) 속성 - 카운터를 사용하기 위한 속성 - 함숫값에는 카운터명, 카운터 스타일, 문자열이 들어올 수 있으며 쉼표로 구분
Front-End Study
플렉서블 박스 (Flexible Box) 1. 플렉서블 박스 - 박스 요소들을 다양하고 자유롭게 조작 및 배치할 수 있는 기술 - 다른 속성들과 달리 박스의 배치 순서를 변경하거나 자유롭게 바꾸는 것이 가능 ※ 부모 박스를 플렉서블 박스, 그의 자식 박스를 플렉스 아이템이라고 함 ※ 자세한 내용은 Front-End Study/HTML+CSS에서 flex 관련 속성 정리 참조
뷰포트 (Viewport) 1. 뷰포트 - 화면에서 실제 내용이 표시되는 영역 - 뷰포트는 메타 태그를 이용해 화면의 크기 or 비율을 조절 2. 뷰포트 속성 속성명 속성값 속성 설명 width device-width, 양수 뷰포트의 너비를 지정 height device-height, 양수 뷰포트의 높이를 지정 initial-scale 양수 뷰포트의 초기 배율 지정 (기본값 1) (축소 < 1 < 확대) user-scalable yes, no 뷰포트의 확대/축소 여부 지정 minimum-scale 양수 뷰포트의 최소 축소 비율 지정 (기본값 0.25) maximum-scale 양수 뷰포트의 최대 확대 비율 지정 (기본값 5.0)
미디어 쿼리 1. 미디어 쿼리 - 화면의 크기나 환경에 따라 웹사이트를 변경하는 기술 2. 기본 문법 - 미디어 쿼리를 작성할 때는 기본적인 순서와 규칙을 따라야 함 → @media [only 또는 not] [미디어 유형] [and 또는 , 콤마] (조건문) {실행문} - @media : 미디어 쿼리 문법의 시작을 알리는 부분 - [only 또는 not] - only 키워드 : 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드 - not 키워드 : not 다음에 오는 조건을 부정하는 키워드 - 미디어 유형 : 미디어별로 적용할 CSS를 따로 작성함. 미디어 유형은 다음과 같음 기기명 설명 all 모든 장치 print 인쇄 장치 screen 컴퓨터 화면 장치 or 스마트 기기 화면..
가변 이미지 1. 가변 이미지 - 이미지 또한, 브라우저 비율에 따라 가변적으로 변경할 수 있음 (동영상도 가능) See the Pen Tistory_Front-End Study_반응형 웹_가변 이미지_1. 가변 이미지 by NewBean0312 (@newbean6775) on CodePen.
가변 font 1. 가변 font - 폰트의 크기를 가변적으로 설정이 가능함 - 가변 폰트는 가변 그리드 공식과 같음 → 가변 폰트값 = (가변 폰트를 적용할 글자 크깃값 ÷ 적용할 요소를 감싸고 있는 요소의 글자 크깃값) - 예시) 글자 크기 96px으로 적용된 박스가 있고 그 박스안에 글자 크기 64px의 박스를 적용 See the Pen Tistory_Front-End Study_반응형 웹_가변 font_가변 font_1. 가변 폰트 by NewBean0312 (@newbean6775) on CodePen. 2. rem 단위 - 앞에서 사용한 em 단위는 자신의 부모 박스에 글자 크기가 지정되어 있을 경우, 자식 박스에게 글자 크기가 상속됨 - rem 단위는 웹 문서의 최상위인 태그를 기준으로 하기..
가변 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..
가변 그리드 (Fluid Grid) 1. 가변 그리드 - 가변적 : 객체 or 물체 or 사물이 늘어나거나 줄어들거나 성질이 변하는 것 - 그리드 : 격자나 눈금 (웹에서의 그리드는 가로 or 세로 크기, 여백, 단 수 등 구조 설계를 위한 것을 뜻함) 2. 가변 그리드 공식 - 정확한 가변 크기의 박스를 만들기 위해선, 공식이 존재 → 가변 크기의 %값 = (가변 크기로 만들 박스의 가로 너비 ÷ 그 박스를 감싸고 있는 박스의 가로 너비) x 100 - 예를 들어, 아래와 같이 테두리 박스의 너비가 960px이고 노란 박스의 너비가 300px이면, (300 ÷ 960) x 100 = 31.25% 3. 서로 다른 크기의 박스를 가변 크기로 변환 - 960px의 테두리 박스 안에 각 300px, 600px..
반응형 웹 1. 반응형 웹 - PC, 태블릿, 스마트 폰 등 기기 or 환경마다 최적화된 웹사이트 - 웹사이트의 구조를 기기에 맞는 화면에 최적화된 구조로 변경하여 보여줌 ※ 사용하는 것은 HTML+CSS 페이지와 동일하나, 집중적으로 파기 위해 반응형 웹만 따로 개설하였음 ※ 반응형 웹을 공부하기 전, HTML+CSS 페이지를 먼저 공부하는 것을 권장함 ※ Do it! 반응형 웹 만들기 서적을 참고하였음
※ 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 |..
※ abc 순으로 정렬 ● list-style 속성 - 아래의 속성들을 한번에 설정함 ● list-style-image 속성 - 불릿 대신 이미지 삽입 - list-style-image : none | url(이미지 파일 경로) - none : 설정 안함 (기본값) - url(이미지 파일 경로) : 불릿 대신 사용할 이미지 파일의 경로 지정 ● list-style-position 속성 - 목록에 들여 쓰는 효과 - list-style-position: inside | outside - inside : 불릿 or 숫자를 안쪽으로 들여 씀 - outside : 불릿 or 숫자를 밖으로 내어 씀 (기본값) ● list-style-type 속성 - 목록의 불릿과 번호 스타일 지정 - list-style-type..
※ abc 순으로 정렬 ● direction 속성 - 글자 쓰기 방향 지정 - direction : ltr | rtl - ltr : 왼쪽에서 오른쪽 (left-to-right)으로 텍스트 표시 (기본값) - rtl : 오른쪽에서 왼쪽 (right-to-left)으로 텍스트 표시 ● line-height 속성 - 줄 간격 조절 - line-height: normal | | | | inherit - normal : 설정하지 않음 (기본값) - , , : 글자 크기를 기준으로 간격 크기 지정 ● text-align 속성 - 텍스트를 정렬 - text-align: left | right | center | justify | initial | inherit - left : 왼쪽 정렬 - right : 오른쪽 정렬..
※ abc 순으로 정렬 ● color 속성 - 글자 색 지정 - color: (rgb or rgba) | (색상이름) | (16진수) - rgb 값 : 빛의 삼원색으로 빨간, 녹색, 파란색을 이용해서 색을 표시하는 방식 (각 값 당 255까지 가능) ※ rgba는 투명도 까지 가능한 값 - 색상이름 : red, blue 처럼 색상 이름으로 표기 - 16진수 : 16진수로 #000000 처럼 표기 가능 (ex : 파란색(#0000ff)) ● letter-spacing 속성 - 글자 간격 조절 - letter-spacing: normal | length - normal : 기본 값 (문자에 공백이 들어가지 않음) - length : px, %, em, rem 등으로 간격 설정 ● text-decoration..
● button 태그 - 버튼을 삽입함 - - submit 속성 : 폼을 서버로 전송함 - reset 속성 : 폼에 입력한 모든 내용을 초기화함 - button 속성 : 기능은 없는 그냥 버튼
