월드스토리의 코딩 나라

반응형1. 동일한 웹페이지를 보여주나 디바이스의 크기에 따라 레이아웃을 다르게 보여줌2. 모바일로 웹 사이트를 접속하는 경우가 많으므로 반응형은 매우 중요한 기술임 적응형사용자가 모바일 환경인지, PC 환경인지에 따라 다른 웹 페이지를 보여줌.  Viewport 반응형 웹을 디자인하기 위하여 기준으로 삼는 지표를 의미함기기마다 화면 사이즈가 다르기에 기기에 맞춰서 디자인하기 위한 크기 요소디바이스 화면 크기를 고려하여 사용자에게 최적화된 웹페이지를 제공함 @media(미디어 쿼리)   용어 정리의미코드 상의 예시미디어 유형All(전부)/print(인쇄)/Screen(전부)screen크기 규칙min(최소 뷰포트 넓이)max(최대 뷰포트 넓이)지정 기준을 결정min-width, min-heightBreakp..

transform 특정 상황에서만 태그의 상태를 바꾸고 싶을 때 사용하는 CSS 2D 변환 함수CSS 용어용어의 의미 translate(x,y) x축(옆)으로 x만큼, y축(아래)으로 y만큼 이동 translateX(x), translateY(y) 특정 축으로 변수 만큼 이동 scaleX(x), scaleY(y) 특정 축으로 변수 만큼 키움 scale(x,y) x축(width)으로 얼마, y축(height)만큼 크기를 키움 skew(x,y)x축으로 얼마, y축으로 얼마 만큼 기울임skewX, skewY특정 축으로 얼마만큼 기울임matrix(n, n, n, n, n,n)2차원 변환효과rolate(degree)태그를  degree만큼 시계 방향으로 회전3D 변환 함수CSS 용어용어의 의미tran..

요소의 배치 CSS 용어용어의 의미상태position: relative;요소 자신을 기준으로 배치position: absolute;위치 상 부모 요소를 기준으로 배치(부모 요소는 relative인 요소, 둘다 static이라면 메인 페이지를 반영)display 속성이 block으로 변경됨position: fixed;뷰포트를 기준으로 배치display 속성이 block으로 변경됨z-index요소의 배치 순서를 결정auto : default(부모 요소와 동일한 쌓임)숫자 : 숫자가 높을 수록 위에 쌓임 배경 이미지 CSS 용어의미사용법background-color태그의 색상을 지정함default : transparent(투명함)색상값을 넣으면 된다.linear-gradient() : 여러개의 색깔을 그라이데..

요소를 숨기는 3가지 방법 CSS 용어의미사용법opacity투명하게 만든다.모습만 숨기는 것으로 속성도 남고 자리도 차지함opacity : 0;visibility표시상태를 뜻함자리는 차지하고, 모습과 속성만 숨김주로  디자인을 바꾸기 어려운 file 태그를 디자인할 때 사용함visibility : hidden;display그냥 존재 자체를 없애놓는 방법주로 모달창을 만들어 놓을 때 사용display: none

태그의 크기를 지정하는 약어 CSS 용어의미속성width, height요소의 가로/세로 너비auto : 브라우저가 자동으로 너비 계산단위 : px, em, vw 등 단위로 지정max-width, max-height요소가 커질 수 있는 최대 가로/세로none : default(최대 너비 제한 없음)auto : 브라우저가 자동으로 계산단위 : px, em, vw 등 단위로 지정min-width, min-height요소가 작아질 수 있는 최소 가로/세로0: default(최대 너비 제한 없음)auto : 브라우저가 자동으로 계산단위 : px, em, vw 등 단위로 지정Calc()사용자가 원하는 크기 값을 계산하여 사용하기 위해 사용하는 값EX) width : Calc(100vh - 20vw)box-sizei..

글자 설정을 바꾸는 CSSCSS 지시어의미속성font-weight글자의 두께 지정normal : 기본두께(400)bold : 두껍게(700)bolder : 상위(부모) 요소보다 두껍게lighter : 상위(부모) 요소보다 앏게100~900 : normal과 bold 이외의 두께 지정font-size글자 크기 지정16px : 글자 설정의 defaultpx, em, rem 등의 단위로 지정하기 가능% : 부모 요소의 폰트 크기에 대한 비율smaller : 상위(부모) 요소보다 작은 크기larger : 상위(부모) 요소보다 큰 크기xx-small ~ xx-large : 가장 작은 크기 ~ 가장 큰 크기까지 7단계의 크기 지정line-height  한 줄의 높이 지정 숫자 : 요소의 글꼴 크기의 배수로 지정단위..

가상 클래스 선택자1. 사용자의 행동에 따라 변화하는  상황에 따라서 요소를 발생하는 선택자  가상 클래스 선택자의 종류선택자 종류선택자의 의미선택자 쓰는 법ABC : hover 마우스 커서가 올라가 있는 태그 선택a : hover {  color : red;}= a 태그에 마우스가 올라가 있을 때, 글자를 빨간색으로 변경ABC : active 선택자 ABC 요소 위에서 마우스 오른쪽 버튼을 눌렸을 때 발생a : active {   background-color : red;}a 태그를 사용자가 선택했을 때 배경색을 빨간색으로 바꿔라.ABC : focusinput 태그를 클릭 한 뒤, 커서가 깜빡일 떄처럼 포커스가 올라가 있을 때 선택input :focus {  background-color : orang..

CSS 기본 용어 정리용어 선택자(Selector)HTML 의 Style을 지정하기 위하여 HTML 테그를 선택하기 위한 수단.속성(Property)HTML 요소를 선택하고 {} 내에 속성 값을 지정하여 다양한 style을 정의함.여러 개의 프로퍼티를 연속해서 지정할 수 있으며, 세미콜론(;)으로 구분함속성은 이미 지정되어 있는 용어이며, 사용자가 임의로 정의하지 못함.값(value)해당 속성에 대하여, 키워드나 크기 단위, 또는 색상 단위로 표시되어 있는 실제 값 CSS의 기본 선택자 용어의미사용법전체 선택자(Universal Selector)모든 요소를 선택함* {    color : red;}= 전체 태그에 대해서 빨간색 글씨로 써라.태그 선택자(Type Selector)태그의 이름에 대해서 선택 ..

CSS(Cascading Style Sheet)1. 웹 페이지를 디자인하기 위해 사용하는 언어 개발자 도구○ 브라우저에서 개발 편의를 위해 제공하는 도구로 F10을 누르면 활성화된다.○  현재 보고 있는 웹페이지를 구성하는 HTML, CSS, javascript를 볼 수 있다.○ 화면을 돌리면 원상태로 복구되겠지만, 화면을 수정하여 변경하는 것도 가능하다.○ 특정요소 코드 보기 및 수정 / 크기 줄이기 / 화면의 사이즈를 줄여서 반응형 확인하기. CSS의 참조 방식인라인(inline 방식) 1. 각 태그마다 스타일에 변화를 주고 싶을 때 사용2. 테그마다 스타일을 설정하는 것이기에, CSS 코드의 재사용이 불가능하다.내장 Style 1. 태그 내부에서 Style을 선언하여 사용하는 방식2. 동일한 조건..

5. 사용자가 실제 데이터를 입력하는 곳을 나타내는 태그 - select 태그의 모습태그의 유형사용 목적선택 폼 생성1. 어떤 내용을 선택하는 부분을 생성하는 태그속성 - Name : select 박스의 이름선택 폼의 옵션1. 실제 선택할 내용을 생성하는 태그속성● Value : 실제적으로 전달되는 값● Selected : 최초로 선택되는 값으로 설정● Disabled : 보이지만 선택할 수 없는 옵션으로 만듬option을 묶는 태그1. option을 그룹화하는 태그속성★ Label : 그룹화하는 옵션의 그룹명을 결정 6. 테이블을 생성하는 테그 - table태그의 모습 사용목적속성테이블을 생성• border : 테두리 두께 • cellspacing : 테두리 간격 사이의 너비 • cellpadding ..