Youna

section태그란 태그는 주제별 그룹의 섹션 태그를 설정하고 문서의 독립적인 컨테츠 섹션을 설정합니다. 부문,구역,영역을 나타내는 기능을 가지고 있으며 문단이라던지 1장,2장,1절, 2절 등과 같이 이루어지는 글 등을 하나의 그룹 혹은 묶음으로 다루어즌 역할을 하고 있습니다. 이러한 섹션을 구체적으로 나타내는 요소로는 , , , 가 있습니다. section 관련 태그 문서의 주요 콘테츠 영역을 설정합니다. 주제별 그룹의 콘테츠 섹션을 설정합니다. 문서의 독립적인 컨테츠 섹션을 설정합니다. 블로그나 뉴스 기사내용 공지사항들을 나타낼 때 적절 합니다. 주요 컨테츠의 보조적 컨테츠 섹션을 설정합니다. 예를 들어 사이드바 , 최근 글 목록, 인기 목록 등을 나타낼 때 적절합니다. 문서의 소개 및 메뉴 링크를 ..

텍스트 관련 요소 01. 제목 관련 태그 요소유형 태그명 태그의 의미 및 특징 블록 요소 ~ 제목 글자 태그 h1이 제일 높고 h6가 제일 낮음 02.글자 형태 태그 요소유형 태그명 태그의 의미 및 특징 인라인 요소 강조하고 싶은 텍스트를 정의하기 위한 태그이며 기울임체로 표시됩니다. 중요한 텍스트를 정의하기 위한 태그이며 굵은체로 표시됩니다. 주의 깊게 볼 텍스트 부분을 강조하기 위한 태그이며 노란색으로 표시됩니다. 의미를 가지고 있지 않으며 단순히 텍스트를 굵은체로 표시합니다. 주의 사항, 법적 제한, 저작권 등을 정의하기 위한 태그이며 작은글씨로 표시됩니다. 아래첨자 텍스트를 정의하기 위한 태그입니다. 위첨자 텍스트를 정의하기 위한 태그입니다. 텍스트 요소 중에 태그와 태그는 의미가 비슷해 보일 수..

마크업이란? 마크업(Mark up)이란 마크(Mark)로 둘러 싸인 언어로 태그(Tag)로 둘러싸여있다고 표현하기도 합니다.HTML, XML 등의 마크업 언어들은 문서의 구조를 정의합니다. 쉽게 말하면 문서의 골격에 해당하는 부분을 작성하는데 사용합니다. 시멘틱 마크업 (Semantic markup) 시멘틱(Semantic)사전적 뜻은 "의미론적인" 으로 해석할 수 있는데, 이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻을 가지고 있습니다. 시멘틱한 마크업을 사용하는 이유는 HTML 문서들은 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만, 모든 사람들이 정보를 동일하게 받아들일 수 있는 환경이 아닐 수 있다는 점을 유의해야 합니다. 예를 들어 시각장애인의 경우 HTML 문서의 콘테츠 ..

이미지출처 블록 레벨 요소 (Block-level Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스여서 한 줄을 모두 차지하는데 이 때 한 줄을 차지한다는 말은 너비가 100%라는 얘기입니다. 따라서 왼쪽과 오른쪽에 붙을 공간이 없어 자연스러운 줄넘김이 가능합니다. 블록 속성을 가진 요소들 중에는 , , 요소들과 , , 이 있습니다. 주로 화면구성과 레이아웃을 만들 때 사용 됩니다. 따라서 블록 레벨 요소는 한 묶음으로 이루어져 오롯이 하나의 존재로 이루어져 있는 요소로 그 안이 비어져 있습니다. 텍스트와 인라인 요소를 자식 요소로 포함 하여 집어 넣을 수 있습니다. 블록레벨 요소 중에는 블록레벨 요소를 자식으로 포함할 수 있는 요소와 없는..

문자열 객체 자바스크립트에서 문자열은 문자들의 집합을 나타내는 데이터 타입입니다. 이러한 문자열 데이터를 다루기 위해 자바스크립트는 String객체를 제공합니다. String객체는 문자열을 생성하고 다양한 문자열 조작 기능을 제공합니다. at() at()메서드는 인덱스를 전달받아 해당 위치의 문자를 반환합니다. 만약 인데스 문자열 길이를 넘어선 경우 undefined를 반환합니다. let str = "hello"; console.log(str.at(1)); //e console.log(str.at(10)); //undefined at(1)은 문장열 hello 에서 인덱스 1의 위치에 있는 문자 e 를 반환합니다. at(10)은 문자열의 길이가 5이므로 해당 인덱스가 유효하지 않기 때문에 undefined..

정보처리 기능사 오답노트 01. SQL문의 빈칸을 완성하시오. [학생] 테이블에서 전화번호가 NULL 값이 아닌 학생명을 모두 검색하기 위한 SQL문의 작성하시오. SELECT 학생명 FROM 학생 WHERE 전화번호 _____; 정리 SELECT 테이블 FROM 테이블명 WHERE 조건문 형식입니다. NULL의 값이 아닌 문제를 불러올 때 IS NOT NULL을 사용합니다. 02. SQL문의 빈칸을 완성하시오. 사용자 "HWANG"에게 테이블을 생성할 수 있는 권한을 부여하기 위한 SQL문을 작성하시오. _____ CREATE TABLE _____ HWANG 정리 권한을 부여하는 SQL은GRANT FROM을 사용해줍니다. 03. SQL문의 빈칸을 완성하시오. [성적] 테이블에서 점수가 90점 이상 95..

페럴랙스 이펙트 오늘은 페럴랙스 이펙트로 인트로효과를 만들어 보았습니다. HTML

패럴랙스 이펙트 01 이미지가 부드럽게 움직이는 패럴랙스 효과를 이용해서 메뉴효과를 만들어 보았습니다. HTML Javascript parallaxEffect01 패럴렉스 이펙트 : 메뉴효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 용기를 가지되 허세는 부리지 말라. 02 Section2 세상은 변하지 않는다 우리가 변한다. 03 Section3 타인의 자존감을 높여주면 나의 인생이 반짝이게 된다. 04 Section4 내 기분은 나만 정할 수 있어. 오늘 나는 '행복'으로 정할래. 05 Section5 네 안을 들여다 보아라 넌 네가 생각하는 것보다 더 큰 존재다. 06 Section6 사랑이란 다른 사람이 원하는 것을 네가 원하는 ..

자바스크립트-마무리문제 자바스크립트 마무리 문제 중에 명언들이 10초마다 바뀌는데 이미지도 10초동안 함께 바뀔 수 있도로 꾸며 보았습니다! https://younajeong.tistory.com/72 스쳐가는 명언들 속에 내 명언을 찾아보자 자바스크립트 - 마무리문제 10초동안 스쳐가는 명언들을 스크립트를 사용해서 풀어보는 마무리 문제입니다. 마무리문제 먼저 새로운 폴더 안에 js파일과 html파일을 만들어 주었습니다. html파일 younajeong.tistory.com 이번에 역시 저번에 했던 형식과 비슷하게 코딩을 해 줄 예정입니다. HTML&CSS HTML&CSS 저번 형식과 똑같은 형식으로 result안에 img 태그를 추가하고 id에 image를 부여해줍니다. 10초동아 바뀌는 이미지 링크를..

로또 번호 생성하기 로또가 당첨될때 나오는 무작위한 번호들을 자바스크립트를 사용해서 번호들을 추출해보도록 하겠습니다. HTML & CSS 로또 당첨번호 행운이 당신에게 찾아오기를 추첨 HTML&CSS 먼저 HTML에서 contanier를 설정해서 그 안에 제목과 내용 그리고 button을 추가한 다음에 결과 값이 나올 수 있는 result도 만들어 줍니다. 전체적으로 CSS에서는 전체적인 글자 배치와 버튼 배치 폰트와 배경 그리고 글씨색상들을 부여해주었습니다. Javascript javascript 1개의 버튼 결과를 출력할 요소들을 선택자로 button과 #result를 선택하였습니다. 함수를 이용해서 lottoNumber 함수가 실행하도록 하였는데 set자료 구조를 이용해서 생성하게 하였습니다. fo..

자바스크립트 - 마무리문제 10초동안 스쳐가는 명언들을 스크립트를 사용해서 풀어보는 마무리 문제입니다. 마무리문제 먼저 새로운 폴더 안에 js파일과 html파일을 만들어 주었습니다. html파일에 선택자 Result,Quote,Author을 querySelector로 선택자를 만들어 주었습니다. fetch를 사용해서 js파일을 불러온 후 items라고 지정 후 json데이터를 파싱했습니다. Math()메서드를 사용해서 json데이터에 무작위 인용구를 선택하였습니다. 마지막으로 선택된 인용구와 저자를 textContent로 업데이트 하고 dataresult()를 호출해서 페이지가 로드될 때 무작위 인용구를 선택하도록 하였고 setInterval(dataresult, 10000)를 사용해서 10초마다 새 인..

슬라이드이펙트 07 - 버튼과 썸네일 만들어보기 슬라이드 이펙트 저번 시간에 이어서 버튼과 썸네일을 만들어서 움직일 수 있는 슬라이드 이펙트를 만들어 보았습니다. 버튼과 썸네일을 누를때마다 변하는 슬라이드 효과를 만들었습니다! HTML & CSS Javascript sliderEffect07 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next jeongyouna_@naver.com HTML&CSS HTML의 구조에서는 전체 main안ㅇ세 slider__wrap을 만들어 준 후 그 안에 img 와 thumb를 만들어 줍니다. 그리고 btn을 만들어서 그 안에 넘어갈 수 있는 버튼이 생길 수 있도록 이전버튼 prev와 다음버튼 next를 만들어 준 후 footer에..

슬라이드 이펙트06 -버튼과 닷메뉴를 사용해서 슬라이드를 움직여보기! 이번 슬라이드 이펙트는 버튼과 닷메뉴를 사용해서 슬라이드 왼쪽으로 움직여 볼 수 있도록 하겠습니다. HTML&CSS Javascript sliderEffect06 슬라이드 이펙트 : 좌로 움직이기(버튼, 닷메뉴) 1 2 3 4 5 6 7 HTML& CSS HTML구조에서 slider__btn 과 slider__dot을 추가해 줍니다. slider__btn안에 prev이전이미지와 next다음이미지로 넘어갈 수 있도록 구조를 만들어 줍니다. CSS로 넘어와서 btn과 dot에 필요한 속성들을 부여해서 btn은 양 사이드 가운데로 올 수 있으며 클릭할 때 바뀔 수 있도록 설정해 줍니다. dot은 동그랗게 만들어 준 후 가운데로 올 수 있도록..

슬라이드 이펙트 05 - 아래에서 위로 연속적으로 움직이는 효과! 저번 시간에 이어서 슬라이드가 아래에서 위로 연속적으로 움직일 수 있는 효과를 만들어 보았습니다! 저번에 만들었던 3번 효과를 참고하여서 함께 만들어 보도록 하겠습니다! https://younajeong.tistory.com/67 슬라이드 이펙트 03 - 아래에서 위로 올라오는 슬라이드 효과! 슬라이드 이펙트 03 아래에서 위로 올라오는 슬라이드 효과! 1,2번을 토대로 이번에는 아래에서 위로 올라는 슬라이드 효과를 주겠습니다! 이펙트 03번 같은 경우에는 02번의 HTML그대로 가져와서 C younajeong.tistory.com HTML& CSS Javascript sliderEffect05 슬라이드 이펙트 : 아래에서 위로 움직이기(..

See the Pen Untitled by younajeong (@younajeong) on CodePen. 코드펜을 사용해서 LED조명과 같은 효과를 만들어 보았습니다🌈

애니메이션 효과 코드펜을 사용해서 봄에 어울리는 벚꽃을 만들어 보았습니다. See the Pen Untitled by younajeong (@younajeong) on CodePen.

애니메이션 오늘은 3D 느낌을 살려서 애니메이션을 만들어 보았습니다. 코드

애니메이션 효과 코드펜을 이용해서 애니메이션 효과를 html과 css를 이용해서 만들어 봤습니다! 01.움직이는 두 원 HTMl 만드는 방법 div를 만들어 준 후 span을 만들어 준 후 class요소를 이용해서 loding과 circle1,2를 만들어 주면 html은 끝입니다. CSS body { height : 100vh; background-color : #111; } .loding { left : 50%; top : 50%; position : absolute; animation : loding 1s ease 1000; } .circle1 { display : block; height : 20px; width : 20px; background-color: #fff; border-radius : ..

CSS 문자 관련 스타일 우리가 사이트나 화면을 볼 때 그림과 사진도 눈에 들어오지만 절대적으로 빼먹을 수 없는 것이 있습니다. 바로 폰트! 글인데요 요즘 트랜드로도 강조형 타이포그래피 같은 글자 스타일과 크기로 강조하는 디자인이 떠오르는 만큼 글자에 대해서 잘 알고 활용하는 것이 중요하다고 생각합니다. 그러므로 오늘은 CSS 속성 중 문자 관련한 속성들을 알아보는 시간을 가지도록 하겠습니다. 01. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: "돋움", Dotum, Arial, Helvetica, sans-serif ; ..

Grid layout grid 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조 관점에서 html 기본 요소로 작성된 요소 입니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 그리고 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 쉽게 말해 저번 시간에 정리했던 flex는 한 방향 레이아웃 시스템이고 grid는 두 방향 (가로,세로)레이이아웃 시스템입니다. 01. grid를 활용한 레이아웃 grid 레이아웃 만드는 방법 flex와 비슷한 형태로 시멘틱 태그를 만들어 줍니다. 시멘틱 태그로 만들어진 태그에 배경색과 grid area에 각 시멘틱 태그 이름을 붙혀줍니다. 태그들을 총 감싸고 있는 wrap태그 안에 wi..

레이아웃 Flex 요소들이 포함된 크느 박스에 flex를 선언하고, 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 박스 안에 구문은 해당 요소에 flex로 레이아웃을 계한다고 선언하는 뜻입니다. 01. flex layout flex를 이용해 레이아웃을 만든다 이렇게 코드진행을 할 수 있습니다. 가운데 부분은 class container를 이용해서 만들어 줍니다. 박스가 3개 나열 된다고 생각하고 처음에는 큰 메인 박스를 만들어 준 후 그 아래로 차례로 section1,2,3에 가로와 세로 값 배경색을 부여한 후 display: flex를 main부터 sectio..

선택자(selector) 선택자란 말 그대로 선택을 해주는 요소이며 CSS로 UI의 어느 부분을 디자인할지, 즉 표현하고 규칙을 정할 대상을 선택자라고 부릅니다. See the Pen Untitled by younajeong (@younajeong) on CodePen. CSS로 속성을 하는 부여하는 방법입니다. 여기에서 h1은 선택자 { }는 선언부로 선언부 안에 color라는 속성 그리고 red라는 속성값을 표시하며 속성 설정간에는 ";"를 표시하여 구분해준 후 또 다른 속성과 속성값으로 선언을 할 수 있습니다. 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 01. 태그선택자(type Selector) 태그 선택자는 html문서의 태그 이름을 직접 지칭하는 가장 간단한 선택자입니다. Css에 대한..

보통 레이아웃을 만들게 되면 block요소기 때문에 세로로 나열이 됩니다. 하지만 오늘 이 방식을 사용한다면 우리 모두 세로로 손 쉽게 바꿀 수 있습니다. 바로 float입니다. 01. 레이아웃 - float float은 레이아웃을 쉽게 구성할 수 있도록 도와주는 css요소입니다. float은 요소를 좌측이나 우측으로 붙이고 아래 내용이 그 주변으로 흐르게 하는 속성인데, 세로로만 나열되던 블록들이 가로로 서로 어울리게 배치하려고 할 때 아주 유용한 방식입니다. float한 박스에는 가로 사이즈를 지정해 주여야 속성이 사용됩니다. 하지만 heading요소나 인라인 요소들은 가로 사이즈 없이 float을 해도 레이아웃이 흐트러지지 않습니다. 이렇게 사용 했을시에 첫 이미지에 html이미지에서 css로 변경..

Id 와 Class 01.이름을 불러올 때 클래스를 불러올 때는 클래스명 앞에 마침표를 찍어준다. 아이디를 불러 올 떄는 아이디 값 앞에 샵(#)표시를 해줍니다. 또 여러개의 요소에 같은 class명을 부여해줄 수 있습니다. 또한 하나의 요소에 여러개의 class명을 부여할 수도 있습니다. 자료출처 이미지 처럼 id로 "attendance"를 불러왔고 값 앞에 #표시를 해둔 걸 볼 수 있습니다. 또 class="name"을 사용해서 김영희라는 이름을 사용했습니다. 02. 중복 사용 class는 중복 사용이 가능하지만 id는 중복사용이 불가능 합니다. class는 동일한 클래스명을 페이지 여러곳으로 사용해도 되지만 id는 한개의 id로 딱 한 페이지에서 사용이 가능합니다. 자료출처 사람으로 생각한다면 하나..

HTML 삽입 미리보기할 수 없는 소스

CSS CSS는 HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. HTML 바탕으로 뼈대를 만들어 주고 CSS는 디자인적인 요소를 입혀주는 역할입니다. CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 01. 내부 스타일시트 CSS를 HTML문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. HTML 문서 내의 태그에 태그를 사용하여 CSS 스타일을 적용합니다. 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다. 이미지출저 이처럼 내부에 필요한 스타일을 입력해 주는 방식으로 배경색상, 제목색상, 텍스트 꾸밈을 할 수 있습니다. 내부 스타일시트는 그 스타일이 기술된 페이지에..