텍스트유형 01번 이번에 만들어볼 사이트입니다. 자세히보기가 들어가있는 형식의 사이트입니다. 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS 이미지를 백그라운드 효과 방식으로 삽입하였습니다. flex를 사용하고 justify-content를 사용하여 이미지를 정렬하였습니다. 자세히보기와 내용을 백그라운드 이미지 삽입 방식을 통해 이미지 위에 배치하였습니다. /* font */ .nexon { font-family: 'NexonLv1GothicLow'; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-we..
CSS 요소를 숨기는 5가지 방법 요소를 숨기는 방법이 5가지가 있습니다. 각각 방법이 조금씩 다르고 특징이 있습니다. 1. display: none; (애니메이션 X, 영역X) *{ display: none; } /*전체 요소를 표시하지 않습니다.*/ 2. opacity: 0; (애니메이션 O 영역 O) *{ opaccity: 0; } /*전체 요소의 투명도를 0으로 설정합니다. 애니메이션으로 사용하여 나타낼 수도 있습니다. */ 3. visible: hidden; (애니메이션 X, 영역X) *{ visibility: hidden; } /*전체 요소를 표시하지 않습니다. 애니메이션으로 사용하여 나타낼 수도 있습니다. */ 4. transform: scale(0); (애니메이션 O, 영역X) *{ tra..
퀴즈 이펙트 - 객관식 (여러문제 슬라이드) 결과 확인하기 자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해 코드를 효과적으로 사용하였습니다 또한 문제를 풀고 정답 확인 버튼을 누르면 맞은 문제 갯수와 틀린문제 갯수를 출력하도록 하였습니다. 문제 출력하기 템플릿 리터럴을 사용하여 ${}속에 변수를 지정하였습니다. . 또한 각각 칸에 알맞게 변수명을 집어넣어 정보를 입력하였습니다. 문제출력코드 //문제출력 const quizQuestion = document.querySelector(".quiz__question"); //문제 번호, 질문 const quizSelects = document.querySelector(".quiz__selects") const quizTy..
퀴즈 이펙트 - 객관식 (여러문제) 슬라이드 확인하기 자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해 코드를 효과적으로 사용하였습니다 또한 문제를 풀고 정답 확인 버튼을 누르면 맞은 문제 갯수와 틀린문제 갯수를 출력하도록 하였습니다. 문제 출력하기 강아지의 구성요소 입니다. 문제와 함께 같이 출력되는 강아지를 구성하였습니다. 문제출력코드 정답입니다! 틀렸습니다! Next! 출력하기 문제정보를 각각 변수명을 지정해 객체 속에 저장하였습니다. 60문제로 구성되었습니다. 문제정보 // 문제정보 const quizInfo = [ { answerType: "웹디자인 기능사 2012년 4회", answerNum: "1", answerAsk: "커뮤니케이션 디자인에 대한 설명으..
색상 표현 단위 색상을 지정하기 위해 키워드(red, blue…)를 사용할 수 있습니다. 그냥 색의 이름을 쓰면 되기때문에 사용이 간편하다는 장점이 있으나 표현할 수 있는 색상의 수는 제한된다. 단위 예시 HEX 코드 단위 (Hexadecimal Colors) viewport 너비의 1/100 RGB (Red, Green, Blue) viewport 높이의 1/100 RGBA (Red, Green, Blue, Alpha/투명도) rgba(255, 255, 0, 1) HSL (Hue/색상, Saturation/채도, Lightness/명도) hsl(0, 100%, 25%) HSLA (Hue, Saturation, Lightness, Alpha)) hsla(60, 100%, 50%, 1) #hex {back..
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은 배수(..
이미지유형 03번 이번에 만들어볼 사이트입니다. 마우스를 이미지에 올리면 자세히보기와 설명이 나오는 방식을 사용하였습니다. 이번에는 grid방식을 사용하여 작업하였습니다.(flex방식을 사용하면 웹에서 이미지를 불러올때 한번에 불러오지 못해서 오류가 발생할 수 있기 때문입니다.) 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS img태그와 백그라운드 효과를 사용하여 이미지를 삽입하는 방식을 사용하였습니다. hover라는 css요소를 사용하여 마우스가 이미지에 올라가면 설명이 나오도록 작업하였습니다. 처음에 image__desc를 -100px로 위치시켜 보이지 않게하고 가상요소를 주어서 마우스가 이미지에 올라가면 0px로 바뀌도록하였습니다. 또한 opacity를 사용하여 투명도를 사용하여 효과를 ..
이미지유형 02번 이번에 만들어볼 사이트입니다. 마우스를 이미지에 올리면 자세히보기와 설명이 나오는 방식을 사용하였습니다. 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS img태그를 사용하여 이미지를 삽입하는 방식을 사용하였습니다. hover라는 css요소를 사용하여 마우스가 이미지에 올라가면 설명이 나오도록 작업하였습니다. 처음에 image__desc를 -100px로 위치시켜 보이지 않게하고 가상요소를 주어서 마우스가 이미지에 올라가면 0px로 바뀌도록하였습니다. /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); /* reset */ * { margin: 0; padding: 0; } a { t..
이미지유형 01번 이번에 만들어볼 사이트입니다. 자세히보기가 들어가있는 형식의 사이트입니다. 피그마를 이용하여 이미지를 만들어 작업하였습니다. CSS 이미지를 백그라운드 효과 방식으로 삽입하였습니다. flex를 사용하고 justify-content를 사용하여 이미지를 정렬하였습니다. 자세히보기와 내용을 백그라운드 이미지 삽입 방식을 통해 이미지 위에 배치하였습니다. /* font */ @import url('https://webfontworld.github.io/score/SCoreDream.css'); .score { font-family: 'SCoreDream'; } /* reset */ * { padding: 0; margin: 0; } a { text-decoration: none; color: ..
이미지 IR 효과 / 이미지 스프라이트 / 백그라운드 표현 IR 효과 웹접근성 연구소 사이트의 한국형 웹콘텐츠 접근성 지침에 따라 웹콘텐츠 제작기법을 보면준수해줘야 할것들이 있다. 웹접근성은 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적에 있기 때문에 만약 시각 장애인이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없다 그래서 이미지에 텍스트를 붙여준다. 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그라운드로 넣어주는 이미지라고 할지라도 텍스트를 써주는 것이 좋다. 이런걸 ir효과한다. .ir { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1p..
SCSS CSS와 SCSS는 몇가지 차이가 있지만 그중에서 가장 큰 차이는 변수를 만들 수 있습니다. 밑에 예시에서 확인하시겠습니다. 변수를 만드는 방법 예) SCSS 변수예시보기 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } CSS로 보기 body { font: 100% Helvetica, sans-serif; color: #333; } olor: $primary-color; } 중첩 중첩 HTML 을 작성할 때 분명히 중첩되는 계층적인 구조 가 있습니다. 반면 CSS 는 그렇지 않습니다. Sass를 사용하면 HTML 의 동일한 시각적 계층 구조를..
SCSS를 이용하여 강아지 애니메이션 만들기 SCSS와 PUG를 이용하여 강아지 애니메이션을 만들어 보았습니다. 기존에 사용하던 HTML과 CSS와는 차이가 있었고 들여쓰기의 중요성이 커졌습니다. CSS와 SCSS는 몇가지 차이가 있지만 그중에서 가장 큰 차이는 변수를 만들 수 있습니다. 밑에 예시에서 확인하시겠습니다. CSS SCSS로 작업했던 것들을 CSS로 컴파일하여 다시 나타냈습니다. 두가지의 차이점을 보면서 어떻게 변형되었는지 확인해보는것이 좋겠습니다. CSS보기 body { display: flex; flex-direction: column; justify-content: center; align-items: center; } html, body { background: #96FF7B; wid..
정규표현식 객체 주요패턴 정규표현식 객체는 정해진 문자의 패턴을 만들 때 사용합니다. 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[^abc]d/는 'ab', 'bd', 'cd' [^abc] a, b, c를 제외한 문자 하나를 검색합나다. /[^abc]d/는 'ed','fd','gd' [A-Z]; 알파벳 대문자 문자를 검색합니다. [a-z] 알파벳 소문자 문자를 검색합니다. [0-9] 0-9까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표'문자 그대로의 의미를 사용할 경우 '￦.'으로 표현해야 합니다. \w 알파벳, 숫자, _를 검색합니다. \W 알파벳, 숫자, _를 제외하고 검색합니다. \d 숫자를 검..
구조 관련 요소 ,,,,, 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 없습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없습니다. 1. HTML 문서에서 맥락이 같은 요소ㅡㄹ을 주제별로 그룹화 해주는 태그이며 섹션 주제에 대한 제목요소 ~를 포함하는 것이 좋습니다. 2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. 1.HTML 문서의 푸터 영역을 의미하는 태그로 섹션 작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 없습니다. 2. 텍스트, 인사인 요소, 블록 레벨 요소를 포함할 수 있지만 ,태그는 포함할 수 없습니..
미디어 쿼리(media query) 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로톡이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결하는는 뜻입니다. 태블렛이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbsr를 누르면 기기마다의 해상도도 확인할 수 있고 기기모델도 추가할 수 있습니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 6,7,8 plus 414 736 iPhone 5 320 568 Galaxy S5,S8 360 640 Galaxy Note 8 360 640 iPad Pro..
CSS기본문법 CSS기본 문법에 대해 설명드리겠습니다. 내부 스타일시트 CSS를 HTML문법 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들 p { color : red ; }의 의미는 p태그 안의 글자 색상을 빨간색으로 설정하라는 뜻입니다. 결과보기 우리를 기쁘게하는 것들. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장 자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용돠는 반면, 외부 스타일시트는 그 스타일을 선언한 모든 HTML페이지에 적용 됩니다. ▶css 파일의 상단에는 @cha..
