본문 바로가기

Front-end (국비)37

23.06.26 수업 정리 1. 30번째 라인 ~ 내부 34번째 라인 >> div 태그 안에 id 속성값이 title으로 되어있고, text는 게 임 시 작 으로 되어 있다. 36번째 라인 >> div 태그 안에 span 태그와, img 태그가 있다. 44번째 라인 >> 무언가 동작을 하는 기능이니까, 스크립트 태그를 사용한다. document.querySelector('#title').onclick = function() 해당 페이지에서 아이디 속성값이 title이라는 이름을 가진것을 onclick 하면 함수를 실행 한다. this는 #title을 가리킨다. title의 첫번째 자식 객체의 nodeValue 값이 ' 게 임 시 작 ' 이면, title의 첫번째 자식 객체의 nodeValue 값을 ' 결 과 확 인 ' 으로 변경 .. 2023. 6. 26.
23.06.23 수업 정리 1. input 태그의 type 속성은 text 이고, 또 onkeydown 속성은 test(event) 함수를 실행하게끔 되있다. onkeydown 속성은, 다음과 같다. - 키를 눌렀을 때 발생. - 물리키에 반응. - 현재 눌린 문자와는 상관없이 물리적인 키에만 반응. test() 함수가 존재해야지 사용할 수 있으니, function test() { } 를 만들어야 한다. () 괄호안의 매개변수는 event 인데, event가 일어났을 때를 의미한다. 30번째 줄 >> 만약에, 이벤트 동작이 일어났어, 근데 어떤 동작이야 ? keyCode가 13인 동작이야. keyCode가 13인거는 엔터를 의미하니까, 즉, 엔터를 사용자가 쳤다면, if문이 참이 되서, if 문 안의 명령들을 실행 한다. even.. 2023. 6. 23.
23.06.22 수업 정리 1. 27번째 줄 ~ 31번째 줄 태그로 묶을건데, 태그의 id를 "box"라고 지을거야. onclick 하면 (클릭하면) changeColor 함수를 실행 시킨다. this는 onclick 에 대상이 되는 주체 이다. 태그(요소) 안에 onclick 속성에 있으니, 주체가 div id = 'box' 가 되는듯 ? 16번째 줄 ~ 25번째 줄 : javascript 공간을 열어주기. function changeColor(obj) { obj.style.backgroundColor = 'green'; } 객체로 (매개변수 obj) this를 받는다. this는 태그 자체를 의미한다. ( this는 어떤 액션 == 이벤트의 대상이다. (주체 이다) 일반적으로 요소 == 태그 이다. ) div id = "box.. 2023. 6. 22.
JavaScript 에러 1) 어떤 값이 null 인지, 2) 값이 초기화가 안되어있는지, 3) 선언 자체를 하지 않았는지 를 구분할줄 알아야 한다. a는 null로 값이 초기화 된 상황 b는 선언만 되어있는 상황. c는 주석 처리를 통해 아예 선언도 안되있는 상황. 웹 브라우저에 콘솔창을 확인하면, a : null b : undefinded c is not defined 가 뜨게 된다. b는 암튼 선언은 되있어서, 에러는 뜨지 않는 모습을 확인할 수 있고, c는 선언 조차도 안되있어서 에러가 뜬다. 에러가 한번 뜨게 되면 아래의 코드들은 실행되지 않는다. 2023. 6. 22.
<p> </p> 태그 & 블록 요소 & 인라인 요소 1. 태그 (요소) paragraph (문단) 의 약자로, 하나의 문단을 만들 때 쓰인다. 태그로 전체를 묶으면, 전체가 한 문단이 되어서, 아래와 같이 나오게 된다. 문장을 각 문단으로 나누고 싶으면 태그를 나눠서 작성 하면 된다. [ 참고 ] 태그 내부에서 직접 색 지정을 해주면 그 해당 부분에서는 색이 변하고, 나머지는, 위의 요소 선택자 로부터 영향을 받게 된다. 2. 블록 & 인라인 ? html의 요소는 크게 ~~ 블록 요소 (block element) 와 인라인 요소 (inline element) 로 구분 된다. css를 잘 적용하기 위해서는 해당 개념을 잘 알아야 한다. 블록 요소 >> 1) 사용 가능한 최대 가로 너비를 사용 한다. (기본 너비값은 100%) 2) 전체를 차지하기 때문에, .. 2023. 6. 21.
23.06.21 수업 정리 1. CSS 스타일 적용 하기. 외부 > 내부 > 인라인 인라인으로 갈수록 (뒤로 갈수록) 우선 순위가 높아 진다. 2. 원하는 태그 내부에, 즉, 인라인 안에 직접 색 지정을 하는 방법으로 스타일 적용이 가능 하다. 예를들어, 태그가 있으면, 태그 자체를 요소라고 말한다. 이때, p { } 해서 지정하는것을, 요소 선택자 라고 부른다. 그러면, p라는 태그명을 가진 모든 요소에 내부의 기능이 적용 된다. 3. 다양한 선택자 근데, 각 요소들마다 다르게 적용을 하고 싶으면, 태그에 class 이름 또는 id (pk) 이름을 지어준다. 그렇게 해서, 선택자에서 원하는 기능을 적어주면 된다. pk는 #으로 해야하고, class는 .으로 한다. 유일하면 pk로 처리하고, 2개이상이면 class로 처리한다. 4.. 2023. 6. 21.
시맨틱 태그 1. 시맨틱 == semantic >> 의미의 의미론적인 의 뜻을 가진 형용사. 즉, 시맨틱 태그는 의미를 부여한 태그라는 뜻이다. 태그에 의미를 부여했다고 생각하면 편하다. 이러한 시맨틱 태그는 HTML5에서 처음 등장했다. 예를들면, , 같은 태그 이다. 이 태그들은 이름만 봐도 상단과 하단이라는 것을 알 수 있다. 이렇게 시맨틱 태그의 등장으로 인해 태그만 보고서도 문서를 더 쉽게 이해할 수 있다. 2. 시맨틱 태그를 사용해야 하는 이유 웹 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않더라도, 태그를 활용하여 웹 문서를 똑같이 만들 수 있다. 하지만, 시맨틱 태그를 사용해야 하는 이유는 아래의 3가지 이다. 1) HTML 문서의 가독성과 유지보수가 용이해진다. 만약 모든 태그들을 로 만들었으면.. 2023. 6. 20.
table / colspan / rowspan / tr / td 열이 통합된 경우 >> colspan 아래 표와 같이 열이 통합된 경우. 열(column) + 가로지르다(span) >> colspan 을 사용 한다. HTML 삽입 미리보기할 수 없는 소스 첫번째 행을 보면, 열 두개를 합쳤기 때문에 라고 표현할 수 있다. 정말로 열을 가로지른 모습이다. == 열 합치기. colspan 위의 이미지를 코드로 나타낸 것이다. 행이 통합된 경우 >> rowspan 아래 표와 같이 통합된 경우. 행(row) + 가로지르다(span) >> rowspan을 사용한다. 2023. 6. 20.
23.06.20 수업 정리 1. 주석 html 에서는 주석을 자바와 다르게, 으로 주석 처리가 가능 하다. 2. 스타일 설정 주석은 자바와 동일하게, /* 스타일 설정 주석 */ 으로 주석 처리가 가능 하다. 3. 유지보수의 용이함을 위해 은 무조건 따로 분리해서 만든다. 4. 5. 자바스크립트 주석은 자바의 // 주석 처리 방법과 동일 하다. 6. 는 박스 태그 은 글 상자 태그 7. 분홍색 글씨들은 id명 또는 class 명 이다. 8. 9. 10. 는 bold. 는 일반. colspan = "숫자" colspan >> rowspan이 2일때, colspan도 2여야 위에 처럼 나오게 된다. colspan이 지금 상황에서 1로 변경되면 아래와 같게 된다. colspan 과 rowspan 개념은 아래에 정리. 11. 이미지를 눌.. 2023. 6. 20.

티스토리툴바