전체 글 50

[JavaScript] 반복문 (loop or iterate)

목록에서 2, 3을 반복해서 쓰고 싶다. 이럴 경우 단순히 복사해서 붙여넣기를 할 수도 있지만 그 반복의 횟수가 100000단위를 넘어서도 복붙을 할것인가? 반복문을 써서 더 쉽게 쓰는 법을 알아보자! 1. while //주로 변수를 정의하는 자리 while(조건문 - 주로 변수의 범위이다){ 반복해서 실행할 코드 - 변수가 늘어나는 규칙을 포함한다 } Loop while뒤에 오는 괄호안의 조건에 대해 boolean값이 오게 되고 그 값이 true면 코드를 반복실행하다가 false가 되면 반복을 멈춘다. while반복문은 사용하기 쉽지만, 변수와 관련된 자리에 다른 여러 가지 코드들이 개입될 수 있다는 단점도 있다. ​ ①. 태그에서 JavaScript를 작동시키기 위해 태그의 document.write..

JavaScript 2021.03.24

[JavaScript] 조건문 (Conditional statements)

1. IF //1. true if(true일 경우){여기에 있는 코드가 실행 } else{else뒤에 오는 코드는 실행되지 않는다 } //1. false if(false일 경우){false 바로 뒤에 오는 코드는 실행되지 않는다 } else{여기에 있는 코드가 실행 } 조건문 if 다음에 오는 괄호 안에는 분리연 값이 오고 그 값이 true냐 false냐에 따라 {}안의 코드가 실행되거나 무시된다. 따라서 자신이 원하는 조건에 따라 if뒤 소괄호에 오는 값(value)이 true나 false가 될 수 있게끔 조건문을 써야 한다. var a = 10; var b = 20; var c = 30; if(a>b){ document.write('a가 b보다 크다'); } else if(b>c){ document...

JavaScript 2021.03.24

[JavaScript] 연산자 (operator)

연산자는 규칙에 따라 계산하여 값을 구해주는 것이다. 연산자를 통해 표현식을 작성하면 자바스크립트 엔진이 그 JS코드를 기계어로 바꾸어(Compile) 해석하고 실행한다. 이를 표현식을 평가한다고 하며 그 반환값을 평과 결과라고 한다. 1. 대입 연산자 (할당 연산자) 오른쪽 항에 있는 숫자를 왼쪽에 있는 변수에 대입한다. ​ 1=2; 라고 하면 에러가 뜬다. 1에 2를 대입할 수 없어서 그런것이다. 변하지 않는 수인 1은 상수이다. ​ 2. 산술 연산자 종류 설명 예시 +, - *, / (기본 산술 연산자) 더하기, 빼기, 곱하기, 나누기 1+1 결과값 = 2 + 더하기로 연결된 문자를 이어서 붙여준다. var name1 = "java" var name2 = "script" name1+name2 결과값..

JavaScript 2021.03.23

[웹접근성 정리] AOA11Y - 웹접근성과 웹표준

1. 웹접근성 웹사이트에서 제공하는 정보를 차별 및 제한없이 다양한 사람이 동등하게 이용할 수 있도록 보장하는 것 다양한 사람 : 장애인 및 고령자를 포함한 모든 사람 + 다양한 platform 및 Device와 웹브라우저 등 모든 환경 2. 웹접근성을 향상시키기 위한 방법 1) 웹접근성 지침 = WCAG를 준수 WCAG = W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안 : 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있또록 준수해야 하는 지침. (1). WCAG 2.1 - https://www.w3.org/TR/WCAG21/​ (2). 한글 웹콘텐츠 접근성 가이드라인 - https://yamoo9.gitbook.io/wcag/intern...​ ..

HTML 2021.03.13

어렵다를 다른 관점에서 바라보기

최근에 디자인-퍼블리싱으로 이어지는 프로젝트 과정이 너무 막연하고 어려워서 고민이 많았다. ㅠㅠ 남들은 다들 잘하고 열심히 하는데 뭔가 나만 계속 돌부리에 걸려서 헛바퀴질만 하고 나아가지 못하는 기분이었다. 그럼에도 아.. 조금 괜찮다 싶은 마음이 들 때도 있어서 그날은 살짝 나아진 기분이고 또 다음에 다시 걸리고를 반복했는데.. 멋진 것보다는 실용적인 것에 조금 더 손을 들어주고 살아왔던 자라 처음에 이러는건 어쩔 수 없는 것 같다. 너무 잘하려고 하기 보다는 그 전보다 나은 나를 만들어 나가는 것이 더 나은 것 같다. 그리고 벤치마킹을 하고자 여러 잘된 디자인을 볼 때 내가 좋아하는 색이 많이 들어간 작품을 보면 더 기분이 좋고 예쁘다는 느낌을 받는 것 같다. 후후 그러니까 이왕이면 좋아하는 것 위주..

어느날/2023 2021.01.02

1차 프로젝트를 마치다

발표를 하는데 같이 공부한 사람 중에 엄청 잘한 사람이 있어서 비교가 됐다. 나는 어떤 웹퍼블리셔가 되고 싶은걸까.. 막다른 곳에 몰릴 때마다 드는 생각.. 잘하는 사람을 보고 무작정 저 사람처럼 되고 싶다고 생각하기보다는 좀 더 개인적인 목표가 있었음 좋을텐데.. 접근성을 높이고 기본에 충실한 사이트를 만들고 싶은 건 참 추상적이면서 붕뜬 느낌이다. 직접 만들어보면서 계속 나만의 느낌을 찾아가는 수 밖에 없겠지.. 생각만으로는 한계가 있다..! 일단 1차 프로젝트 한 것은 꾸준히 손을 봐야 할 것 같다. 사진 부분도 애니메이션을 위해 다듬어야하고 제대로 작동하지 않거나 이상하게 구동하는 제이쿼리도 고치고 프로젝트를 할 때 반성이 되는건.. 일정과 할일을 체계적으로 진행하지 못한 것.. 그래서 발표를 할..

어느날/2023 2020.10.13

[HTML] 시멘틱 태그

header - 위치: 페이지 맨 윗쪽, 왼쪽 - form 태그를 사용해 header안에 검색창을 넣는다. - nav 태그를 사용해 header안에 사이트 메뉴를 넣는다. - haeder태그를 본문의 머리말로 사용한다. nav - 위치: 어디에서나 사용된다. - 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타낸다. - 푸터에 있는 사이트 모음 부분에 사용된다. *section과 article 대체로 section 요소는 HTML 문서의 전체적인 내용에 포함되며, article 요소는 문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용하면 됩니다. section article - HTML문서의 전체적인 내용과 관련이 있는 콘텐츠를 주제별로 묶을 때 사용한다. - h1..

HTML 2020.08.15

[CSS] overflow

콘텐츠 영역과 관련된 속성. 글자가 width, height값을 훨씬 넘겨버릴 때 화면상에 어떻게 보여줄지를 결정한다. - overflow: visible; 내용이 영역을 벗어나는 한이 있어도 다 보여준다. - overflow: hidden; 내용이 영역을 넘어가면 그 넘어간 부분은 숨긴다. - overflow: auto; 내용이 영역을 넘어가면 스크롤을 만들고 넘어가지 않으면 스크롤을 만들지 않는다. - overflow: scroll; 내용이 영역을 넘어가지 않아도 무조건 세로, 가로 방향 스크롤을 만든다. 출처 더보기 - 2020 국비교육 공부 내용

CSS 2020.08.15

[CSS] 간단한 네비게이션바 만들기 (4) 가상 요소 이용하기

A A는 첫 번째 알파벳 B B는 두 번째 알파벳 C C는 세 번째 알파벳 @charset="utf-8"; /*tag reset*/ body, ul, li, figure {padding:0; margin:0;} ul {list-style: none;} ul {width: 260px; margin: 30px auto; padding: 20px; border: 2px solid black;} ul li {margin-top: 20px; background:ORANGE;} ul li:first-child {margin-top: 0px;} ul li strong, ul li figure figcaption {float: left; width: 140px;} ul li strong {text-indent: 10p..

CSS 2020.08.13

[CSS] 글꼴

- 웹 문서에서 사용할 글꼴은 font-family속성으로 지정한다. - 부모요소의 글꼴을 지정해주면 자식요소로 상속된다. 따라서 보통 제일 윗 요소인 body에 선언한다. - 서체명이 한글이거나 공백이 있는 경우 인용부호로 감싼다. - 한글명은 영문명으로 다시 한 번 써준다. 인식을 못하는 컴퓨터도 있기 때문이다. - 한 가지 글꼴만 지정해줘도 되지만 지정한 글꼴이 없을 경우를 대비해 두 번째, 세 번째 글꼴까지 지정한다. 1. font-size font-size의 속성값으로는 절대크기, 상대크기, 크기값 직접 지정, 백분율이 올 수 있다. 크기 값을 직접 지정하는 경우 고정되어 있는 단위인 px말고도 em과 rem이라는 단위가 있다. * em 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로..

CSS 2020.08.12