본문 바로가기

컴퓨터 사이언스138

HTML-CSS 가상 클래스 선택자(Pseudo-Classes) 동작을 나타내는 가상 클래스 선택자 1. ABC:hover 가상 클래스 선택자 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택. 2. ABC:active 가상 클래스 선택자 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택. cf. hover 와 나타나는 모습은 똑같지만 마우스를 클릭하고 떼고 있지 않는 동안에만 이벤트 발생 3. ABC:focus 가상 클래스 선택자 선택자 ABC 요소가 포커스(가 활성화)되면 선택. cf. 포커스가 될 수 있는 요소는 input, button, label, select 요소 등과 같은 HTML 대화형 콘텐츠. 그 외, tabindex 속성을 사용한 요소도 포함. cf. tabindex 속성을 통해 Focus가 될 수 있는 요소를 만들 수 있다. Tab .. 2022. 7. 4.
JavaScript 끝말잇기 게임 작성하기 프로그램 절차를 만들 때의 원칙 1. 프로그램 절차의 개수는 정해져 있어야 한다. 2. 각 절차는 항상 같은 내용이어야 한다. 3. 모든 가능성을 고려해야 한다. 4. 예시는 절차를 검증하는 데 사용한다. ex) 끝말잇기 게임 절차 프로그래밍 절차 ⓐ 네 명의 참가자가 있다. ① 게임에 몇 명이 참가할지를 선택한다. ⓑ A가 '자바스크립트'라고 말했다. ② 참가자 순서를 정한다. (편의상 숫자로 한다) ⓒ B가 '트리구조'라고 말했다. ③ 첫 번째 사람이 어떤 단어를 말한다. ⓓ C가 '조합'이라고 말했다. ④ 다음 사람이 어떤 단어를 말한다. ⓔ D가 '합성'이라고 말했다. ⑤ 절차 4에서 말한 단어가 올바른지 판단한다. ⓕ 다시 A가 '성공'이라고 말했다. ⑥ 올바르다면 그 다음 사람이 어떤 단어를 .. 2022. 7. 3.
[OP] HTML + CSS로 카카오 프로필 페이지 만들기 오늘의 생각 : 디브를 어떻게 나눌 것인지에 대한 것과 패딩과 마진을 이용한 요소 배치와 디자인적으로 바람직한 convention 내지는 의도를 생각해보도록 하자. 그리고 쉬운 것도 두들겨보자. 공부해서 머리만 굵어지고, 정착 쉬운 결과물도 낼 줄 모르면 무용지물. 2022. 7. 2.
MGS Day 05 HTML # 하이퍼링크 a 태그의 옵션 target의 값 _blank(새 창에서 열기)가 적용되어져 있지 않은 사이트를 링크를 통해 새 창으로 열고 싶을 때는, command나 ctrl 키를 누르면서 클릭하게 되면 새 창에서 사이트에 연결될(열) 수 있다. 요소(텍스트)를 어떤 요소로 묶어주는(감싸는) 행위를 Wrapping이라고 부른다. div 태그가 대표적인 block 요소는 가로 사이즈를 가장 넓게 사용하고, 하나에 한 줄씩 적용되기 때문에 요소가 수직으로 쌓이도록 배치되어 출력된다. span 태그가 대표적인 inline 요소는 가로 사이즈를 최소한으로만 사용하려고 한다. 그래서 글자를 다룰때에는 span 태그와 같은 inline 요소로만 다루어야 한다. br(break의 약어) 태그는 HTML에서.. 2022. 7. 1.
나의 첫 Hexo Blog ! config 파일 설정에 주소를 잘못 입력하여 배포가 제대로 안되었었지만, 팀원들의 도움으로 에러 잡아내고 우여곡절 끝에 마크다운으로 작성한 나의 첫 정적블로그 Hexo Blog 탄생~ 이게 뭐라고 감격스럽다... https://helloavenir.github.io/ Hello Avenir Slow but steady wins the race. helloavenir.github.io 2022. 7. 1.
MGS day 04 git commands git remote add origin {원격저장소 주소} git 명령어로 git과 연결되는 원격저장소를 생성(등록). 이름은 origin(통상적)이고, 주소는 { } 안의 주소. git push origin main git 명령어로 이름이 origin이라는 원격저장소의 main 브랜치에 업로드(push). git config --global core.autocrlf input (macOS) git config --global core.autocrlf true (Windows) git이라는 명령어로 환경설정(config, configuration)을 해주는데 옵션(--)은 전역(global)에서 사용하도록 하고, crlf(개행 문자, New Line) 설정을 운영체제에 따라 inp.. 2022. 6. 30.
Java switch 문 값에 따라 여러 방향으로 분기하는 경우, if 문보다 switch 문을 사용하면 가독성이 높은 좋은 코드를 작성할 수 있다. 이 때, 실행문은 실행문장은 { }로 둘러싸지 않는다. switch 문은 식의 결과 값을 case 문의 값과 비교한다. case 문의 값은 변수나 식은 사용할 수 없고, 정수 리터럴, 문자 리터럴, 문자열 리터럴만 허용한다. switch (식) { case 값1: 실행문 1; break; case 값2: 실행문 2; break; ... case 값m: 실행문 m; break; default: 실행 문장 n; } default 문 : 어떤 case 문으로도 분기하지 못하는 경우 default의 실행문을 실행한다. 생략 가능하다. Wrapper 클래스 개념 이름이 Wr.. 2022. 6. 30.
MGS day 03 2022년 6월 29일 오늘 수업의 학습목표 git을 사용하기 위해 CLI(Command Line Interface) Shell command와 Vim editor를 다룰 수 있다. 코드 관리를 위한 git의 사용법을 정확히 이해한다. git의 저장소 개념을 이해하고, 원격 저장소 서비스의 차이를 인식한다. git을 사용하면서 발생하는 다양한 상황을 해결할 수 있다. commit의 보편적인 작성법을 이해하고 이를 활용하여 commit을 작성할 수 있다. 수업을 통해 배운 내용 Shell Command $ cd {directory name} // change directory $ mkdir {directory name} // make directory $ cd .. // 상위 디렉터리로 이동 $ pwd /.. 2022. 6. 30.
MGS Day 02 VS Code ... 문서의 HTML 버전을 지정, html은 기본적으로 HTML5를 의미, HTML1 예전버전을 사실 명시할 일은 잘 없고, (예전 버전 사용을 안하므로) HTML2 혹 있다면 XHTML정도 HTML3 ex) 2022. 6. 28.

티스토리툴바