본문 바로가기

전체 글125

[JavaScript] 콘솔에 출력, script async / defer 차이점 (With. Ellie) 드디어 HTML 과 CSS 다음에 프로그래밍 언어 JavaScript 까지 무사히 시작하게 되었다. 이번에도 차근차근히 기초부터 꼼꼼히 JS를 배워보도록 하자! 우선 VScode를 실행해서 js 파일을 만들어 JS의 시작을 알리는 Hello World를 콘솔 창에 출력해 보았다. 또, index.html 파일을 만들어서 JavaScript가 실행되게끔 하는데 있어서, js파일을 포함하는 과정에 있어 어느 방법이 효율적인지 알아보았다. 1) 콘솔창에 Hello Woooorld! 출력하기 javascript에서 콘솔창에 Hello Woooorld!를 출력하는 명령어는 console.log( )를 사용한다. ( )안에 출력하고자 하는 내용을 작성하면 되는데, Hello Wooorld!와 같은 문자열은 ' ' .. 2021. 7. 21.
[CSS] 웹 프로젝트 11일차! (index 부분 css 작업) 지난 시간에는 아래 화면의 html, 즉 뼈대를 완성했다. 이번에는 본격적으로 css를 사용해 아래 화면처럼 이쁘게 보이도록 해 보았다!! 우선 모든 화면에 적용해야 하는 status-bar부터 시작! 아! 그 전에 우선, 브라우저의 기본 세팅값을 초기화를 위한 reset.css파일을 먼저 추가해 주어야 한다!! rest.css) status-bar) 우선 위 화면처럼 적당한 간격으로 icon의 위치를 설정해주어야 한다. 이럴 땐 무엇을 쓴다? --> 바로 flex!!! icon의 부모요소인 .status-bar에 flex를 지정해 주었고 justify-content:center;를 적용했다. 그러면 중앙에 아이콘들이 모여있는 것을 볼 수 있는데 이럴 때 사용할 수 있는 스킬이 바로... width:33.. 2021. 7. 20.
[HTML] 웹 프로젝트 10일차! (클론 코딩 index.html) 카카오톡 클론 만들기 1일차! 로그인 화면 - index.html) +) 왜 이름을 index.html로 했는가? 왜냐하면! 대부분의 웹 서버가 디폴트로 index.html을 찾아보도록 설정되어 있기 때문이다. 영어로 index는 첫 번째를 뜻한다. html 코딩에 들어가기 앞써 어떤식으로 코딩을 해야하는지 구상부터 했다. 이런식으로 box부터 구상하고 차례차례 큰 것부터 잡은 후에 세부적인 box를 코딩해주었다. 큰 box들에는 div를 사용했고, 세부적인 요소들은 text에는 span을 이미지에는 i를 사용했다. 여기서 i는 font awesome에서 추가한 아이콘을 뜻한다. font awesome을 사용하면 아이콘 코드를 바로 복사-붙여넣기 후 사용할 수 있기 떄문에 무척 편하다. 그 대신 이 코드.. 2021. 7. 18.
[Unity] 3D 게임 만들기 #5 (UI 디자인) 와.... 드디어 마지막 흐어어엉 ㅠㅠㅠ 짧고도 긴 유니티 미니 프로젝트 roll_the_ball를 오늘 마무리 했다. 저번 시간까지 게임의 전체적인 틀을 만들었다면, 이제는 이쁘게 포장할 차례다. 어떻게 포장하냐...?! 바로 UI(User Interface)를 통해!! 그렇게 이쁘지는 않지만 최대한 이쁘게 ㅎㅎ 만들어 보았다. - item 개수를 알려주는 UI 만들기 - 떨어졌을 때의 Re? 버튼 만들기 - 모든 아이템을 다 먹었을 때, congratulation! 화면 전환과 Re? 버튼 만들기 그럼 하나씩 차근찬근히 해 봅시당...! item 개수를 알려주는 UI 만들기) 우선 기본 틀을 create -> ui -> text 두 개/ image 하나를 생성해 만들어준다. te.. 2021. 7. 16.
[CSS] 웹 프로젝트 9일차! (animation) 오늘은 여러 state 속성에 대해 공부했다. active, hover, focus, focus-within, visited ~~ 그리고 드디어.. 애니메이션 효과를 넣는 방법을 배웠다. state) - active -> 해당 요소를 마우스로 클릭했을 때 지정한 효과를 적용한다. - hover -> 마우스가 해당 요소 위를 지나갈 때 지정한 효과를 적용한다. - focus -> 키보드로 선택되었을 때 지정한 효과를 적용한다. - focus-within -> 부모 요소에게 적용하며, 자신의 자식 요소 중 하나가 focused 되었을 때 지정한 효과를 적용한다. - visited 링크를 걸어 두었을 때, 이미 방문한 사이트일 경우에 효과를 적용한다. 추가적으로 조건을 나열해 여러 상황을 설정할 수도 있다!!.. 2021. 7. 14.
[CSS] 웹 프로그래밍 8일차! (position & pseuco selector) 오늘은 position 과 pseudo selector에 대해 공부했다. 우선 position에 대해 알아보자!! position) position은 요소의 위치를 지정하는 기준을 정하고 그에 맞추어 요소의 위치를 설정한다. 그렇다면 본격적으로 4가지 속성에 대해 알아봅시당!! - position : static ; (기준 없음) 모든 태그의 position 디폴트 값은 static으로 설정되어 있다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. - position : relative ; (요소 자신을 기준) 태그의 위치를 살짝 조정하고 싶을 때 사용한다. 이 코드를 사용함으로써 top(위) bottom(아래) left(왼쪽) right(오른쪽) 속성을 사용해 위치를 조정할 수 있다. * 주의할 점.. 2021. 7. 12.

티스토리툴바