css

css 단위 크기 크기 단위 cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %, rem이다. px은 절대값이고 em, %는 상대값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. px 1050개의 픽셀을 가진다는 의미이다. 200만 화소(픽셀)의 디지털 카메라로 찍은 사진은 1600 * 1200 = 1,920,000으로 통상 200만 화소라 한다. 픽셀은 디바이스 해상도(resolution)에 따라 상대적인 크기를 갖는다. px은 요소의 크기나 이미지의 크기 지정에 주로 사용된다. % %는 백분률 단위의 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. em em은 배수(..

이미지 IR 효과 / 이미지 스프라이트 / 백그라운드 표현 IR 효과 웹접근성 연구소 사이트의 한국형 웹콘텐츠 접근성 지침에 따라 웹콘텐츠 제작기법을 보면준수해줘야 할것들이 있다. 웹접근성은 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적에 있기 때문에 만약 시각 장애인이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없다 그래서 이미지에 텍스트를 붙여준다. 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그라운드로 넣어주는 이미지라고 할지라도 텍스트를 써주는 것이 좋다. 이런걸 ir효과한다. .ir { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1p..

CSS기본문법 CSS기본 문법에 대해 설명드리겠습니다. 내부 스타일시트 CSS를 HTML문법 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들 p { color : red ; }의 의미는 p태그 안의 글자 색상을 빨간색으로 설정하라는 뜻입니다. 결과보기 우리를 기쁘게하는 것들. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장 자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용돠는 반면, 외부 스타일시트는 그 스타일을 선언한 모든 HTML페이지에 적용 됩니다. ▶css 파일의 상단에는 @cha..

비트맵(bitmap)이란? 비트맵 방식은 '비트의 지도'(Map of bits)라는 뜻이다. 각 픽셀에 저장된 비트정보가 집합된 것이다. 비트맵은 벡터와 다르게 픽셀의 점 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교한 이미지 표현이 가능하다. 픽셀의 수가 많아질수록 뛰어나지만, 용량 또한 커지게 되고 비트맵 이미지는 크기를 확대하거나 축소하면 기본에 이루고 있던 픽셀의 수가 변해서 원본 이미지가 손상된다. 깨짐 현상과 이미지 품질 저하가 발생하게 된다. 다른표현으로 픽스맵(Pixmap)이나 레스터(Raster) 이미지로도 불린다. 대표적인 프로그램으로는 어도비 포토샵이 있다. 벡터란? 벡터 방식은 비트맵과 반대로 표현되는 그래픽의 형태들이 수학적 공식으로 이루어져 있다. 벡터 방식은 고정된 ..

퀴즈 프로그램 웹디자인기능사 자격증을 준비하면서 퀴즈가 나오는 프로그램를 구현하였습니다. 자바스크립트-객관식 "정답 확인하기" 버튼을 누르면 답이 나오도록 구성하였습니다. js //선택자 const quizType = document.querySelector( ".quiz__type" ); //퀴즈종류 const quizNumber = document.querySelector( ".quiz__question .number"); //퀴즈번호 const quizAsk = document.querySelector( ".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector( ".quiz__answer .confirm") //정답확인버..