월드스토리의 코딩 나라

요소를 숨기는 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. 동일한 조건..