아라의 WWW

자바스크립트에는 문자열과 관련된 함수가 다양하게 있습니다. 원시유형과 객체 단순히 값을 가지고 있을 경우에는 원시유형이라고 하고 프로퍼티와 메서드를 가지고 잇을 때는 객체라고 합니다. 예을 들어 lenght을 사용할때 변수에 문자열을 할당한 후 lenght 프로퍼티를 사용하는데 이때 변수에 lenght을 할ㄹ당하지 않아도 사용할 수잇습니다. 프로퍼티(Property) 객체(Object) 내부의 속성(Attribute)으로, 해당 객체의 상태를 나타내는 값(Value)이나 함수(Function)를 말합니다. 객체는 프로퍼티를 가지며, 이를 통해 객체의 상태와 행동을 제어할 수 있습니다. lenght 포로퍼티 문자열의 길이를 찾을 때 사용하는 프로퍼티입니다. 보통 배열에서도 많이 사용하며 배열의 인덱스의 총..

html 푸터 아침밥 레시피 한식 일식 양식 간편식 재료선정 탄수화물 단백질 지방 섬유질 건강별 정리 심혈관 질환 성인병 고관절 질환 레시피 도서 추천 한식 일식 양식 간편식 나이별 메뉴 어린이 청소년 청년 중장년 노년 Q&A 문의하기 F&A 2023 아침밥 먹기 실천 위원회 All Right Reserved 우선 각각의 큰 카테고리 별로 div를 만들어 큰 카테코리는 h4로 감싸고 아래로 작은 메뉴는 li로 감싸 작업하였습니다. 그렇게 6개 정도 만들면 됩니다. 아래로는 홈페이지의 이름이 오게됩니다. 중간에 웹표준에 맞추기 위해 페이지의 제목을 h2로 감싸고 그것을 블라인드 처리하기위해 클래스에 blind를 주어 가립니다. css 리셋과 common은 전부터 사용하던 것을 그대로 사용하여 정리할 것이 ..

오늘 배운 자바스크립트를 정리해볼 예정입니다! 자바스크립트 1. 함수 유형 : 객체리터럴 함수 { function func(num, name, com){ this.num = num; this.name = name; this.com = com; } func.prototype = { result1: function(){ document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`); }, result2: function(){ document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`); }, result3: function(){ document.write(`${this.num}. ${this.name}가 $..

HTML 메인 슬라이드 영역 EVENT 아침식사를 합니다🥪 아침밥은 하루를 시작하기 위해 필요한 에너지를 제공하고, 신진대사를 촉진하여 체내 기능을 개선시키는 데 도움이 됩니다. 또한, 혈당 수준을 안정시켜주어 집중력과 기억력을 개선시켜줄 수 있습니다. 자세히보기 상담 신청 이전이미지 다음이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 메인에 들어가는 슬라이드를 피그마로 만들어 HTML로 구현 하였습니다. 제가 원하는 컨테이너영역에 이미지가 꽉 차서 화살표 버튼으로 움직이는 모양으로 구현하였습니다. 밑에 점으로 이미지가 움직일때마다 변화될 수 있도록 HTML을 구현하였습니다. CSS /* reset */ * { margin: 0; padding: 0; } a { text-decoration..

오늘은 강아지가 나오는 퀴즈화면을 만들어 보았습니다. reset.css 리셋은 먼저 제가 제작하려는 사이트들의 기본 셋팅을 의미합니다. 이번에는 csss파일로 만들어 제작하였습니다. @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/elice/EliceDigitalBaeum.css'); * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; columns: #222; } ..

01. 디자인 우선 피그마로 디자인을 만들어 보았습니다. 기본적인 그리드 시스템을 칼럼을 12줄로 주고 여백은 380을 주어 콘텐츠가 들어가는 부분의 기본적인 그리드 시스템을 주었습니다. 그리드 시스템은 하나를 주게되면 한 사이트에 여러번 사용되기때문에 계속 숙지하는 것이 좋습니다. 그리드시스템 말고도 가이드 라인을 주어 자신이 어떤 요소를 어디에 넣고 여백을 얼마를 줄지 지정하는 것이 좋습니다. 02.코딩 이제 위와같은 디자인을 코딩으로 구현하고자 합니다. 우선 코드를 먼저 보여드리자면 아침이 주는 효과 아침 식사는 우리의 몸과 뇌를 에너지로 충전하는 첫 번째 식사입니다. 아침에 적절한 양의 전압을 회수하면 하루가 점점 늘어나고 기억력이 좋아지고, 몸의 대사 기능도 빨라집니다. 에너지 충전 아침밥은 에..

자바스크립트는 함수형 프로그래밍 언어로, 함수가 중요한 역할을 합니다. 함수는 function 키워드를 사용하여 정의할 수 있습니다. 01. 선언적 함수 선언적 함수(declarative function)는 function 키워드를 사용하여 함수를 선언하는 방식입니다. 함수의 이름과 매개변수를 괄호 안에 넣고, 함수 본문을 중괄호로 감싸서 정의합니다. function 함수(){ 실행문; } 출력문; function func(){ document.write("실행 "); } func(); 기본적인 함수로 출력문(호출)이 함수의 앞또는 뒤에 있어도 호출이 가능합니다. 화살표 함수 또한 각각의 함수들은 화살표로 좀 더 짧게 표현 되기도 합니다. 기존 함수 표현식에서 function키워드를 삭제하고 인자를 받는..

자바스크립트은 웹을 동적인 구현이 가능하게 하는 언어입니다. 동적인 구현이 이루어지기위해서는 변수에 데이터를 저장하는 것이 기본적이 중요한 역활을 하게 됩니다. 데이터를 저장하는 방법은 다양해 공부가 필요한 부분입니다. 간단하게 변수, 상수 배열 객체 별로 나누어지지만 그안에서 여러 가지 방법이 있습니다. 01.변수 : 데이터 저장 변수는 데이터를 저장하는 저장소입니다. 예전에는 var로 변수를 선언했지만 요즘은 let을 사용하는 경우가 많습니다. { var x = 100; // 변수 x에 숫자 100을 저장함 var y = 200; // 변수 y에 숫자 200을 저장함 var z = "javascript"; // 변수 z에 문자 "javascript"를 저장함 console.log(x); console..

선택자 종류 선택자에 대해서는 예전에 한번 올렸지만 다시한번 제대로 포스팅 해보려고 해요! 선택자란 css로 UI의 어느 부분을 디자인 할지, 즉 표현할 대상이 되는 부분을 말합니다. css 속성이 기본으로 형식은 이런 식으로 되어있습니다. 앞에 선택자는 태그를 선택자로 삼은 type선택자입니다. 이제 선택자에 대해 알아보겠습니다. 01. type선택자 02. 아이디 선택자 03. class 선택자 04. 전체 선택자 05. 하위 선택자 06. 자식 선택자 07. 인접 선택자 08. 형제 선택자 09. 그룹 선택자 10. 속성 선택자 11. 가상 클래스 선택자 12. 가상 요소 선택자 13. 종속 선택자 14. 선택자들의 우선순위 01. type 선택자 html의 태그 이름을 선택자로 사용한 선택자입니다..

블록구조의 태그들은 기본적으로 세로로 배치가 되지만 float를 이용하여 가로로 배치할 수있습니다. 레이아웃을 완성할때 필수적인 속성으로 지정하고 해제하는 방법도 있습니다. 1. float float는 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열 되던 블록들을 가로로 배치하려 할때 유용하며 float한 박스에 가로 사이즈를 지정해 주어야 크로스 브라우징 됩니다. (크로스 브라우징 : 서로 다른 브라우저들끼리 서로 호환이 가능하도록 하는 것) float 적용 전(미리보기는 0.5로 보는 것이 편합니다.) See the Pen float 적용전 by jo0132 (@jo0132) on CodePen. float 적용 후(미리보기는 0.5로 보는 것이 편합니다...

마크업으로 레이아웃을 짤 때 시멘틱 태그를 사용합니다. 각자의 태그들이 의미하는 바와 사용하는 방식이 다른데 이 부분에 대해서 한번 알아봅시다. 🤔 태그는 보통 사이트의 도입부, 즉 머릿 부분에 사용되며 사이트의 로고나 제목 등을 포함할 때 사용합니다. 텍스트, 인라인 요소, 블록 요소를 포함할 수 있지만 , 태그는 포함 할 수 없습니다. 웹 페이지의 는 하나만 사용해야한다. 🤔 내비게이션 표현을 위한 태그로 같은 사이트에 있는 페이지나 다른 사이트를 연결한는 링크들의 모음 즉, 메뉴형식을 표현할때 사용하는 태그입니다. 텍스트, 인라인 요소, 블록 요소를 포함할 수 있습니다. 는 위치에 신경쓰지 않는 편이며 여러 개 사용이 가능합니다. 메뉴는 에도 들어가지만 에는 현재 열려있는 페이지에서 이동가능한 링크..

See the Pen Tail Animation by jo0132 (@jo0132) on CodePen.

변수에는 데이터 형식이 존재합니다. 데이터를 가지고 코드를 처리할때 데이터 형이 제대로 있어야 정확하게 처리하게 되어있습니다. 자바스크립트의 자료형은 크게 원시유형과 객체으로 나눠집니다. 01. 문자열 형 문자열 형은 문자와 문자열(문장or 단어)을 저장하는 변수입니다. 큰 따옴표(")와 작은 따옴표(')로 감싸서 표현합니다. 큰 따옴표는 큰따옴표끼리 작은 따옴표는 작은 따옴표끼리 감싸 표현합니다. typeof ("큰 따옴표를 사용한 문자열입니다");// string typeof ('작은 따옴표를 사용한 문자열입니다');// string 02. 숫자형 음수, 양수, 정수, 소수, n진수 등의 숫자 값을 넣을 수 잇는 자료형입니다. 숫자를 나타내는 변수를 숫자형이라하고 따옴표 없이 정수또는 소수, n진법으..

시멘틱 마크업(Semantic markup) 시멘틱의 사전적 뜻은 의미론적인 종도로 해석할 수 있다. 이것은 마크업을 할때 의미에 부합하는 태그를 사용하라는 뜻입니다. HTML은 보통 시각적인 방법으로 사용자에게 전달되지만 예를 들어 시각 장애인의 경우에는 음성으로 전달해 주어야 하는데 이럴 경우 태그의 의미가 적절해야합니다. 이렇듯 시멘틱은 태그에 의미를 부여하여 좀더 명확에게 읽어 낼수 있도록 할수있는 마크업입니다. 시멘틱 마크업(Semantic markup)을 사용하는 이유 검색엔진 최적화 웹브라우저에 검색하게 되면 정보를 제공하는 검색엔진에 노출되는것이 유리합니다. 웹접근성 웹사이트에 접근과 비장애우들과 동등하게 정보를 이해할 수 있습니다. 코드 가독성 div를 주로 사용한다면 구조적으로 파악하기..

코딩 공부를 할때 인라인 구조와 블록 구조를 몰라 위치나 크기값을 지정할때 자신이 원하는 대로 적용이 되지 않아 당황하는 경우가 종종 있습니다. 인라인과 블록구조를 공부하고 이러한 문제를 해결해 봅시다 블록 레벨요소(Block-level Elements) 인라인요소(inline Elements) 블록 레벨요소(Block-level Elements)와 인라인요소(inline Elements)의 차이점 블록 레벨요소(Block-level Elements)와 인라인요소(inline Elements)의 변환 🤨블록 레벨 요소(Block-level Elements) 블록레벨 요소는 자신이 필요로하는 영역보다 더 많은 요소를 차지합니다. 사용가능한 최대의 가로너비를 사용하며 이러한 특성때문에 수직으로 적용될 수 밖..