coding for _

CSS 기본 문법 CSS(Cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. CSS에서의 주석은 /* */로 표현합니다. 01. 내부 스타일 시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들. 02. 외부 스타일시트 스타일 속성을 따로 *.css 확장자를 가진 파일로 저장하여 HTML문서에 파일명으로 연결하는 형태입니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용하지만, 외부 스타일시ㅡ는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다. html 우리를 기쁘게 하는 것들. style.css @charset "UTF-8"; p {c..

미디어쿼리(media query) 미디어쿼리는 뷰포트의 해상도에 따라 CSS를 분기시키는 반응형 기법입니다. 01. 최소 가로폭이 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다. 02. @media @media all and (min-width: 1000px) { 모든 기기에서 해상도가 최소 1000px 인 경우 적용할 속성들... } CSS 파일을 하나로 만들어서 CSS 내부에서 조건에 따라 분기시키는 것이 일반적인 형태의 반응형웹 CSS입니다. all은 Media Type을 나타냅니다. and 전, 후에 띄어 씁니다. Media Type 설명 all 모든 미디어 장치에 사용 (기본값) print 프린터에 사용 screen PC, 태블릿, 스마트폰에 사용 speech 스..

Card Type Web Site HTML, CSS를 통해 카드유형 웹사이트 만들기 - 두번째 Result 원본 소스 보기 원본 페이지 보기 Figma 먼저, Figma로 두번째 카드유형 웹사이트 레이아웃 그리드를 만들었습니다. HTML article로 카드영역을 나누고 line구조인 a링크를 card title 옆에 넣어 더보기 버튼을 만들었습니다. 취미 운동 추천 가장 좋아하는 취미가 운동이 될 때 건강 증진 효과는 크다. 누구나 즐길 수 있는 재밌는 운동 추천! 요가 요가(yoga)는 고대 인도에서 제의적으로 연유한 명상의 방법으로 힌두교의 종교적 · 영적 수행 방법의 하나로도 알려져있다. 웨이트 트레이닝 더 쉽고, 편리하며, 믿을 수 있는 인테리어 시공, 이사, 이사청소, 수리 서비스 어렵게만 느..

웹 표준성 | 접근성 | 호환성 웹 표준성(Web Standards)이란? ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미하는 것으로 국제 표준화 단체인 W3C(World Wide Web Consortium)가 지정한 표준안을 지켜 웹사이트를 제작하는 것. 웹표준성(Web Standards)을 준수해야 하는 이유 국내 웹의 현실은 특정 브라우저와 사용자 등의 이용환경과 비표준 페이지 및 과도한 플러그인 사용으로 장애인, 노약자를 포함한 모든 사용자들에게 운영체제 및 웹 브라우저 등의 정보 접근 제약이 있습니다. 따라서 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 웹 표준기술 작업이 필요하며 웹 표준 준수는 웹 접근성 준수를 위한 핵심입니다. 웹 접근성(Web Ac..

퀴즈 이펙트 04 웹디자인기능사 필기 퀴즈 - JS를 통해 문제의 정답을 객관식으로 선택할 수 있고, 입력 후 정답/오답/해설로 알려줍니다. 결과 원본 소스 보기 JavaScript for문과 if문을 통해 객관식 보기 문제를 출력하고 정답/오답을 비교할 수 있다. //선택자 const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document...

퀴즈 이펙트 03 웹디자인기능사 필기 퀴즈 - JS를 통해 여러 문제의 정답을 주관식으로 입력할 수 있고, 입력 후 정답/오답여부에 대해 알려줍니다. 결과 원본 소스 보기 JavaScript innderText, for문, forEach문 등 다양한 방법으로 코딩할 수 있습니다. //선택자 - 문제가 여러개임으로 querySelectorAll을 사용함 const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호 const quizAsk = document.querySelectorAll(".quiz__qu..

요소 선택 Javascript로 요소를 선택하는 방법 요소를 직접 선택하는 메서드 메서드 설명 getElementById() document.getElementById('content')일 경우 HTML 요소 중 id 속성인 'content'인 요소를 선택합니다. getElementByClassName() getElementByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementByTagName() getElementByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. querySelector() 요소의 선택 방법이 css 선택 방법과 같습니다. 선택된 요소 중 첫 번째 요소만 선택 합니다...

퀴즈 이펙트 02 웹디자인기능사 필기 퀴즈 - 문제를 보고 정답을 입력하면 정답/오답을 알려줍니다. 결과 원본 소스 보기 JavaScript 클릭 이벤트, 함수 등 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"); //정답..

퀴즈 이펙트 01 웹디자인기능사 필기 퀴즈 - 문제를 보고 정답버튼을 누르면 정답을 알려줍니다. 결과 원본 소스 보기 JavaScript 데이터 저장, 문제 출력, 정답 입력 시 함수 실행 등 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 ..

레이아웃02 float, flex, grid를 통해 표현한 레이아웃 float 원하는 곳에 float: left, right, none 등 을 준다. float을 줄 땐 버그 방지를 위한 방법이 3가지 있다. 1. claer: both; 2. overflow: hidden; 3. .clearfix::before, .clearfix::after {content: '' " ; display: block; line-height: 0;} .clearfix::after {clear: both;} See the Pen 레이2float by kimm99604 (@kimm99604) on CodePen. float - 반응형 미디어쿼리를 통해 float 반응형을 만들 수 있다. @media(max-width:1300p..